shieldsBADGE科技规范 - ZORALab赫斯提亚

主要目的

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

历史遗录

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

设计师

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

依赖其他元件

这个元件是没有依赖其他元件。

HTML

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

最小的HTML

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

<div class='badge'>
	<p>...第一个是标题...</p>
	<p>...最后一个是数据价值...</p>
</div>

改变徽章颜色HTML

要改变徽章颜色HTML代码运用方法如下：

<div class='badge' style='--badge-background: #f00;'>
	...
</div>

CSS界面自选性

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

Margin

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

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

Border

影响元件的边界线。

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

Border Radius

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

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

照光Width

影响元件照光线的厚度。

变化值     : --badge-width-shine
CSS属性    : width
默认数码   : .6rem (>= v1.2.0)

Font Size

影响元件的字形的大小。

变化值     : --badge-font-size
CSS属性    : font-size
默认数码   : 18px (>= v1.2.0)

Color

影响元件的颜色。

变化值     : --badge-color
CSS属性    : color
默认数码   : #fafafa (>= v1.2.0)

照光Color

影响元件照光的颜色。

变化值     : --badge-color-shine
CSS属性    : color
默认数码   : #ffff27 (>= v1.2.0)

Color（印刷）

影响元件在印刷中的颜色。

变化值     : --badge-color-print
CSS属性    : color
默认数码   : #101010 (>= v1.2.0)

Background

影响元件的背景。

变化值     : --badge-background
CSS属性    : background
默认数码   : #0000d1 (>= v1.2.0)

Background（印刷）

影响元件在印刷中的背景。

变化值     : --badge-background-print
CSS属性    : background
默认数码   : #fff (>= v1.2.0)

Transition

影响元件的动画定时。

变化值     : --badge-transition
CSS属性    : transition
默认数码   : 1.3s (>= v1.2.0)

标题Color

影响元件标题的颜色。

变化值     : --badge-title-color
CSS属性    : color
默认数码   : #fafafa (>= v1.2.0)

标题Background

影响元件标题的背景。

变化值     : --badge-title-background
CSS属性    : background
默认数码   : #585858 (>= v1.2.0)

数据值Font Weight

影响元件数据值的字体系列。

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

JavaScript

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

ToCSS

渲染呈现CSS的输出数据。

Hugo

用法：

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