DataV

# 装饰

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

# 自定义颜色

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

<dv-decoration-1 :color="['red', 'green']" />
属性 说明 类型 可选值 默认值
color 自定义颜色 string[] - -

TIP

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

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

# dv-decoration-1

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

# dv-decoration-2

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

# 配置

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

# dv-decoration-2(reverse)

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

# dv-decoration-3

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

# dv-decoration-4

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

# 配置

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

# dv-decoration-4(reverse)

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

# dv-decoration-5

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

# 配置

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

# dv-decoration-6

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

# dv-decoration-7

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

# dv-decoration-8

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

# dv-decoration-8(reverse)

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

# dv-decoration-9

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

# 配置

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

# dv-decoration-10

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

# dv-decoration-11

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

# dv-decoration-12

<dv-decoration-12 style="width:150px;height:150px;" />
点击复制

# 配置

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

← 图表 →