zoralabTABLE科技规范 - ZORALab赫斯提亚

主要目的

这个软件包的出生主要是支持渲染表格的界面元件。在网络界面世界里， 这元件的成果如下：

历史遗录

这个软件包在ZORALab赫斯提亚v1.2.0版本之前曾经被名为 table_hestiaUI。改名的目的是有人要横行强盗设计的版权和为了编程 文件编写能力而整理过。

设计师

这个元件的设计是由以下的创造者所建设的：

依赖其他元件

这个元件是需要以下的其他元件才能好好的运行 (排序从‘左上到右下’）：

HTML

至于HTML，为了简单化和最大的兼容性整个用法，ZORALab赫斯提亚运用W3C的语法。我们 推荐您用以下的HTML代码来运用这个界面元件。

最小的HTML

在最小的HTML代码运用方法如下：

<table>
	<thead>
		<tr>
			<th>H1</th>
			<th>H2</th>
			<th>H3</th>
			...
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>...</td>
			...
		</tr>
		<tr>
			<td>...</td>
			...
		</tr>
		...
	</tbody>
</table>

双轴页眉HTML

所需要的HTML代码运用方法如下：

<table>
	<thead>
		<tr>
			<th>H1</th>
			<th>H2</th>
			<th>H3</th>
			...
		</tr>
	</thead>
	<tbody>
		<tr>
			<th>C1</th>
			<td>...</td>
			...
		</tr>
		<tr>
			<th>C2</th>
			<td>...</td>
			<td>...</td>
			...
		</tr>
		...
	</tbody>
</table>

CSS界面自选性

ZORALab赫斯提亚非常重用CSS变化值来装置这个界面元件并且还推出界面自选性功能。 以下是所有界面自选性CSS变化值任您发挥。

Display

影响元件的显示模式。

变化值     : --table-display
CSS属性    : display
默认数码   : block (>= v1.2.0)

Overflow

影响元件的在溢出包装时的应付条件。

变化值     : --table-overflow
CSS属性    : overflow
默认数码   : auto (>= v1.2.0)

Margin

影响元件的外向边距空间。

变化值     : --table-margin
CSS属性    : margin
默认数码   : 2rem auto (>= v1.2.0)

Padding

影响元件的内向边距空间。

变化值     : --table-padding
CSS属性    : padding
默认数码   : 0 (>= v1.2.0)

Min-Width

影响元件的最少宽度。

变化值     : --table-min-width
CSS属性    : min-width
默认数码   : initial (>= v1.2.0)

Max-Width

影响元件的宽度。

变化值     : --table-max-width
CSS属性    : max-width
默认数码   : 100% (>= v1.2.0)

Min-Height

影响元件的最少高度。

变化值     : --table-min-height
CSS属性    : min-hieght
默认数码   : initial (>= v1.2.0)

Max-Height

影响元件的最大高度。

变化值     : --table-max-height
CSS属性    : max-height
默认数码   : initial (>= v1.2.0)

Border

影响元件的边界线。

变化值     : --table-border
CSS属性    : border
默认数码   : 1px solid var(--table-color-primary) (>= v1.2.0)

Color

影响元件的颜色。

变化值     : --table-color
CSS属性    : color
默认数码   : var(--body-color) (>= v1.2.0)

Color（标题元格）

影响元件标题元格的颜色。

变化值     : --table-color-header
CSS属性    : color
默认数码   : var(--color-typography-100) (>= v1.2.0)

Color（主要）

影响元件主要的颜色。

变化值     : --table-color-primary
CSS属性    : color
默认数码   : var(--color-primary-300) (>= v1.2.0)

Color （印刷）

影响元件在印刷环境里的颜色。

变化值     : --table-color-print
CSS属性    : color
默认数码   : var(--body-color-print) (>= v1.2.0)

Background

影响元件的背景。

变化值     : --table-background
CSS属性    : background
默认数码   : var(--body-background) (>= v1.2.0)

Background（表格头列标题）

影响元件表格头列标题的背景。

变化值     : --table-background-header-row
CSS属性    : background
默认数码   : var(--color-primary-900) (>= v1.2.0)

Background（表格头排标题）

影响元件表格头排标题的背景。

变化值     : --table-background-header-column
CSS属性    : background
默认数码   : var(--color-primary-700) (>= v1.2.0)

Background（排序单数）

影响元件排序单数元格的背景。

变化值     : --table-background-odd
CSS属性    : background
默认数码   : transparent (>= v1.2.0)

Background（排序双数）

影响元件排序双数元格的背景。

变化值     : --table-background-even
CSS属性    : background
默认数码   : var(--color-primary-50) (>= v1.2.0)

Background（被关注）

影响元件元格在被关注时的背景。

变化值     : --table-background-focus
CSS属性    : background
默认数码   : var(--color-contrast-500) (>= v1.2.0)

Background （印刷）

影响元件在印刷环境里的背景。

变化值     : --table-background-print
CSS属性    : background
默认数码   : var(--body-background-print) (>= v1.2.0)

元格Margin

影响元件表格单元格的外向边距空间。

变化值     : --table-cell-margin
CSS属性    : margin
默认数码   : 0 (>= v1.2.0)

元格Padding

影响元件表格单元格的内向边距空间。

变化值     : --table-cell-padding
CSS属性    : padding
默认数码   : 1rem (>= v1.2.0)

元格Border

影响元件表格单元格的边界线。

变化值     : --table-cell-border
CSS属性    : border
默认数码   : var(--table-border) (>= v1.2.0)

JavaScript

庆幸的是这个元件没有运用到任何JavaScript。放心吧！

ToCSS

渲染呈现CSS的输出数据。

Hugo

用法：

{{- $ret := partial "hestiaGUI/zoralabTABLE/ToCSS" . -}}
<pre>{{- printf "%#v\n" $ret -}}</pre>