装饰

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

自定义颜色

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

<Decoration1 color={['red', 'green']} />

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

TIP

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

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

Decoration1

<Decoration1 style={{width: '200px', height: '50px'}} />

点击复制

Decoration2

<Decoration2 style={{width: '200px', height: '5px'}} />

点击复制

Decoration2(reverse)

<Decoration2 reverse={true} style={{width: '5px', height: '150px'}}/>

点击复制

Decoration3

<Decoration3 style={{width: '250px', height: '30px'}],} />

点击复制

Decoration4

<Decoration4 style={{width: '5px', height: '150px'}} />

点击复制

Decoration4(reverse)

<Decoration4 reverse={true} style={{width: '250px', height: '5px'}} />

点击复制

Decoration5

<Decoration5 style={{width: '300px', height: '40px'}} />

点击复制

Decoration6

<Decoration6 style={{width: '300px', height: '30px'}} />

点击复制

Decoration7

<Decoration7 style={{width: '150px', height: '30px'}}>Decoration</Decoration7>

点击复制

Decoration8

<Decoration8 style={{width: '300px', height: '50px'}} />

点击复制

Decoration8(reverse)

<Decoration8 reverse={true} style={{width: '300px', height: '50px'}} />

点击复制

Decoration9

<Decoration9 style={{width: '150px', height: '150px'}}>66%</Decoration9>

点击复制

特殊配置

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

Decoration10

<Decoration10 style={{width: '90%', height: '5px'}} />

点击复制

Decoration11

<Decoration11 style={{width: '200px', height: '60px'}} >Decoration11</Decoration11>

点击复制