zoralabBUTTON科技规范 - ZORALab赫斯提亚

主要目的

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

一个启用的按钮 一个禁用的按钮

历史遗录

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

设计师

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

依赖其他元件

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

HTML

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

最小的HTML

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

<a class="button" ...>...</a>

<button>...</button>

禁用按钮的HTML

禁用按钮的HTML代码运用方法如下：

<button disabled>...</button>

CSS界面自选性

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

Display

影响元件的显示模式。

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

Opacity

影响元件的显示透明度。

变化值     : --button-opacity
CSS属性    : opacity
默认数码   : 1 (>= v1.2.0)

Opacity（被禁用）

影响元件在被禁用时的显示透明度。

变化值     : --button-opacity-disabled
CSS属性    : opacity
默认数码   : .3 (>= v1.2.0)

Margin

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

变化值     : --button-margin
CSS属性    : margin
默认数码   : .5rem 1.2rem (>= v1.2.0)

Padding

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

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

Border

影响元件的边界线。

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

Border Radius

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

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

Font Size

影响元件的字体大小。

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

Font Weight

影响元件的字体厚度。

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

Text Align

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

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

Text Decoration

影响元件的字体装饰。

变化值     : --button-text-decoration
CSS属性    : text-decoration
默认数码   : none (>= v1.2.0)

Text Transform

影响元件的字体变形条件。

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

Word Break

影响元件的字体分裂条件。

变化值     : --button-word-break
CSS属性    : word-break
默认数码   : 删除没用了 (>= v1.2.1) normal (== v1.2.0)

Overflow Wrap

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

变化值     : --button-overflow-wrap
CSS属性    : overflow-wrap
默认数码   : break-word (>= v1.2.1) normal (== v1.2.0)

Line Height

影响元件的字体的高度。

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

Color

影响元件的颜色。

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

Color （反转环境）

影响元件在反转环境里的颜色。

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

Color （印刷）

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

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

Background （印刷）

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

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

Box Shadow

影响元件的影子。

变化值     : --button-box-shadow
CSS属性    : box-shadow
默认数码   : 0 .5rem 1rem var(--color-typography-400) (>= v1.2.0)

Transition

影响元件的动画定时。

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

Transform（被关注）

影响元件在被关注时的变换方式。

变化值     : --button-transform-focus
CSS属性    : transform
默认数码   : scale(1.2) (>= v1.2.0)

JavaScript

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

ToCSS

渲染呈现CSS的输出数据。

Hugo

用法：

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