zoralabULIST科技规范 - ZORALab赫斯提亚

主要目的

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

• 太阳

• 地球

  • 人类

  • 树木

• 木星

历史遗录

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

设计师

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

依赖其他元件

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

HTML

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

最小的HTML

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

<ul>
	<li>...</li>
	<li>...</li>
	<li>...</li>
</ul>

综合列表的HTML

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

<ul>
	<li>
		...
	</li>
	<li>
		...
		<ul style="--ulist-li-before-background-image: linear-gradient(to bottom, yellow, orangered);">
			<li>...</li>
			<li>...</li>
		</ul>
	</li>
	<li>
		...
	</li>
</ul>

CSS界面自选性

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

Display

影响元件的显示模式。

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

Margin

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

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

Padding

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

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

Text Align

影响元件的文字对齐方式。

变化值     : --ulist-text-align
CSS属性    : text-align
默认数码   : left (>= v1.2.0)

条文Margin

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

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

条文Padding

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

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

目符号Content

影响元件的列表项Before伪元素（目符号）的内容。

变化值     : --ulist-li-before-content
CSS属性    : content
默认数码   : "❡" (>= v1.2.0)

目符号Display

影响元件的列表项Before伪元素（目符号）的显示模式。

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

目符号Margin

影响元件的列表项Before伪元素（目符号）的外向边距空间。

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

目符号Padding

影响元件的列表项Before伪元素（目符号）的内向边距空间。

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

目符号Border

影响元件的列表项Before伪元素（目符号）的边界线。

变化值     : --ulist-li-before-border-radius
CSS属性    : border-radius
默认数码   : 1px solid transparent (>= v1.2.0)

目符号Border Radius

影响元件的列表项Before伪元素（目符号）边界线的角落圆形度。

变化值     : --ulist-li-before-border-radius
CSS属性    : border-radius
默认数码   : 50% (>= v1.2.0)

目符号Font Size

影响元件的列表项Before伪元素（目符号）的字体大小。

变化值     : --ulist-li-before-font-size
CSS属性    : font-size
默认数码   : 2.8rem (>= v1.2.0)

目符号Font Weight

影响元件的列表项Before伪元素（目符号）的字体厚度。

变化值     : --ulist-li-before-font-weight
CSS属性    : font-weight
默认数码   : 800 (>= v1.2.0)

目符号Text Align

影响元件的列表项Before伪元素（目符号）的字体对齐条件。

变化值     : --ulist-li-before-text-align
CSS属性    : text-align
默认数码   : left (>= v1.2.0)

目符号Background Image

影响元件的列表项Before伪元素（目符号）的配色。

变化值     : --ulist-li-background-image
CSS属性    : background-image
默认数码   :
(>= v1.2.0)
linear-gradient(to bottom, var(--color-primary-200), var(--color-primary-400))

目符号Background Image（反转环境）

影响元件的列表项Before伪元素（目符号）在反转环境里的配色。

变化值     : --ulist-li-background-image-inverted
CSS属性    : background-image-inverted
默认数码   :
(>= v1.2.0)
linear-gradient(to bottom, var(--color-primary-200), var(--color-primary-400))

目符号Background Image（印刷）

影响元件的列表项Before伪元素（目符号）在印刷时的配色。

变化值     : --ulist-li-background-image-print
CSS属性    : background-image-print
默认数码   :
(>= v1.2.0)
linear-gradient(to bottom, var(--body-color-print), var(--body-color-print))

JavaScript

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

ToCSS

渲染呈现CSS的输出数据。

Hugo

用法：

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