zoralabARROW科技规范 - ZORALab赫斯提亚

主要目的

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

这是一段文字。

这是一段文字。

历史遗录

这个软件包首次在ZORALab赫斯提亚v1.2.0版本出产。

设计师

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

依赖其他元件

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

HTML

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

HTML

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

<div class='arrow' style='--arrow-angle="[ROTATION_ANGLE]"; --arrow-size="[SIZE]px";'></div>

CSS界面自选性

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

大小

影响元件的大小。

变化值     : --arrow-size
CSS属性    : width; height
默认数码   : 60px (>= v1.2.0)

旋转角度

影响元件的旋转角度。

变化值     : --arrow-angle
CSS属性    : transform (rotate)
默认数码   : 0deg (>= v1.2.0)

Margin

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

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

Border

影响元件的边界线。

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

Border Radius

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

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

Color

影响元件的颜色。

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

Color（反转环境）

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

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

Color（印刷）

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

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

Transition

影响元件的动画定时。

变化值     : --arrow-timing
CSS属性    : animation-duration
默认数码   : 1.7s (>= v1.2.0)

移动系数

影响元件消失性箭头的移动距离。

变化值     : --arrow-translate-factor
CSS属性    : top
默认数码   : 80% (>= v1.2.0)

大小（内容）

影响元件箭头内容的大小。

变化值     : --arrow-content-size
CSS属性    : width; height
默认数码   : 35% (>= v1.2.0)

Border（内容）

影响元件箭头内容的边界线。

变化值     : --arrow-content-border
CSS属性    : border
默认数码   : 2px currentColor solid (>= v1.2.0)

JavaScript

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

ToCSS

渲染呈现CSS的输出数据。

Hugo

用法：

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