# 装饰

你可以使用装饰去点缀你的页面,以增强视觉效果,与边框组件相同,他们也是用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>
点击复制