zoralabNOTE科技规范 - ZORALab赫斯提亚

主要目的

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

历史遗录

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

设计师

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

依赖其他元件

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

HTML

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

最小的HTML

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

<div class="note">
	<input id="...ID-A..." type="checkbox" checked>
	<label for="...ID-A...">...</label>
	<p class="content">
		...
	</p>
</div>

CSS界面自选性

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

Box-Sizing

影响元件的大小控制态度。

变化值     : --note-box-sizing
CSS属性    : box-sizing
默认数码   : border-box (>= v1.2.0)

Margin

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

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

Padding

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

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

Border

影响元件的边界线。

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

Border Radius

影响元件边界线的角落圆形度。

变化值     : --note-border-radius
CSS属性    : border-radius
默认数码   : .5rem (>= v1.2.0)

Min-Width

影响元件的最少宽度。

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

Width

影响元件的宽度。

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

Max-Width

影响元件的宽度。

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

Min-Height

影响元件的最少高度。

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

Height

影响元件的高度。

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

Max-Height

影响元件的最大高度。

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

Timing

影响元件的动画定时。

变化值     : --note-timing
CSS属性    : transition
默认数码   : var(--timing-normal) (>= v1.2.0)

标题Font Size

影响元件标题的字体大小。

变化值     : --note-title-font-size
CSS属性    : font-size
默认数码   : 2.5rem (>= v1.2.0)

标题Font Style

影响元件标题的字体风格。

变化值     : --note-title-font-style
CSS属性    : font-style
默认数码   : normal (>= v1.2.0)

标题Font Weight

影响元件标题的字体厚度。

变化值     : --note-title-font-weight
CSS属性    : font-weight
默认数码   : 500 (>= v1.2.0)

标题Text Transform

影响元件标题的字体变换条件。

变化值     : --note-title-text-transform
CSS属性    : text-transform
默认数码   : titlecase (>= v1.2.0)

标题Text Align

影响元件标题的字体对齐方式。

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

标题Color

影响元件标题的颜色。

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

标题Color（印刷）

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

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

标题指示器Color

影响元件标题指示器的颜色。

变化值     : --note-title-indicator-color
CSS属性    : color
默认数码   : var(--color-contrast-400) (>= v1.2.0)

标题指示器Color（印刷）

影响元件标题指示器在印刷环境里的颜色。

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

标题Background

影响元件标题的背景。

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

标题Background（印刷）

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

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

内容Margin

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

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

内容Padding

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

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

内容Color

影响元件内容的颜色。

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

内容Color（印刷）

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

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

内容Background

影响元件内容的背景。

变化值     : --note-content-background
CSS属性    : background
默认数码   : var(--color-primary-100) (>= v1.2.0)

内容Background（印刷）

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

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

JavaScript

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

ToCSS

渲染呈现CSS的输出数据。

Hugo

用法：

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