sidebarDepth: 2

装饰

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

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

<dv-decoration-1 :color="['red', 'green']" />

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

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

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

<dv-decoration-1 style="width:200px;height:50px;" />

<dv-decoration-2 style="width:200px;height:5px;" />

<dv-decoration-2 :reverse="true" style="width:5px;height:150px;" />

<dv-decoration-3 style="width:250px;height:30px;" />

<dv-decoration-4 style="width:5px;height:150px;" />

<dv-decoration-4 :reverse="true" style="width:250px;height:5px;" />

<dv-decoration-5 style="width:300px;height:40px;" />

<dv-decoration-6 style="width:300px;height:30px;" />

Decoration

<dv-decoration-7 style="width:150px;height:30px;">Decoration</dv-decoration-7>

<dv-decoration-8 style="width:300px;height:50px;" />

<dv-decoration-8 :reverse="true" style="width:300px;height:50px;" />

66%

<dv-decoration-9 style="width:150px;height:150px;">66%</dv-decoration-9>

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

<dv-decoration-10 style="width:90%;height:5px;" />

<dv-decoration-11 style="width:200px;height:60px;">dv-decoration-11</dv-decoration-11>