装饰

你可以使用装饰去点缀你的页面，以增强视觉效果，与边框组件相同，他们也是用SVG元素绘制的。（React版）

自定义颜色

所有装饰均支持自定义颜色，配置项及示例如下。

<Decoration1 :color="['red', 'green']" />

属性	说明	类型	可选值	默认值
color	自定义颜色	string[]	-	-

TIP

color属性支持配置两个颜色，一主一副。

颜色类型可以为颜色关键字、十六进制色、RGB 及 RGBA。

Decoration1

<Decoration1 style="width:200px; height:50px;" />

点击复制复制成功

Decoration2

Normal

<Decoration2 style="width:200px; height:5px;" />

点击复制复制成功

Reverse

<Decoration2 :reverse="true" style="width:5px; height:150px;" />

点击复制复制成功

配置

属性	说明	类型	可选值	默认值
duration	单次动画时长(秒)	number	-	6
reverse	反转渲染	boolean	-	false

Decoration3

<Decoration3 style="width:250px; height:30px;" />

点击复制复制成功

Decoration4

Normal

<Decoration4 style="width:5px; height:150px;" />

点击复制复制成功

Reverse

<Decoration4 :reverse="true" style="width:250px; height:5px;" />

点击复制复制成功

配置

属性	说明	类型	可选值	默认值
duration	单次动画时长(秒)	number	-	3
reverse	反转渲染	boolean	-	false

Decoration5

<Decoration5 style="width:300px; height:40px;" />

点击复制复制成功

配置

属性	说明	类型	可选值	默认值
duration	单次动画时长(秒)	number	-	1.2

Decoration6

<Decoration6 style="width:300px; height:30px;" />

点击复制复制成功

Decoration7

<Decoration7 style="width:150px; height:30px;">Decoration</Decoration7>

点击复制复制成功

Decoration8

Normal

<Decoration8 style="width:300px; height:50px;" />

Reverse

<Decoration8 :reverse="true" style="width:300px; height:50px;" />

点击复制复制成功

配置

属性	说明	类型	可选值	默认值
reverse	反转渲染	boolean	-	false

点击复制复制成功

Decoration9

<Decoration9 style="width:150px; height:150px;">66%</Decoration9>

点击复制复制成功

配置

属性	说明	类型	可选值	默认值
duration	单次动画时长(秒)	number	-	3

Decoration10

<Decoration10 style="width:90%; height:5px;" />

点击复制复制成功

Decoration11

<Decoration11 style="width:200px; height:60px;">Decoration11</Decoration11>

点击复制复制成功

Decoration12

<Decoration12 style="width:150px; height:150px;" />

点击复制复制成功

配置

属性	说明	类型	可选值	默认值
scanDuration	扫描动画时长(秒)	number	-	3
haloDuration	光晕动画时长(秒)	number	-	2