# 边框

边框均由SVG元素绘制,体积轻量不失真,它们的使用极为方便。React版

TIP

边框组件默认宽高均为100%,组件内容将被slot插槽分发至边框组件下class为border-box-content的容器内,如有布局需要,请针对该容器布局,以免产生样式冲突,导致边框显示异常。

# 自定义颜色

所有边框均支持自定义颜色,配置项及示例如下。

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

TIP

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

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

# dv-border-Box-1

dv-border-box-1
<dv-border-box-1>dv-border-box-1</dv-border-box-1>
点击复制

# dv-border-box-2

dv-border-box-2
<dv-border-box-2>dv-border-box-2</dv-border-box-2>
点击复制

# dv-border-box-3

dv-border-box-3
<dv-border-box-3>dv-border-box-3</dv-border-box-3>
点击复制

# dv-border-box-4

dv-border-box-4
<dv-border-box-4>dv-border-box-4</dv-border-box-4>
点击复制

# dv-border-box-4(reverse)

dv-border-box-4
<dv-border-box-4 :reverse="true">dv-border-box-4</dv-border-box-4>

与上边的边框组件略有不同的是,该组件具有翻转形态,你只需要设置reverse属性为true即可

点击复制

# dv-border-box-5

dv-border-box-5
<dv-border-box-5>dv-border-box-5</dv-border-box-5>
点击复制

# dv-border-box-5(reverse)

dv-border-box-5
<dv-border-box-5 :reverse="true">dv-border-box-5</dv-border-box-5>
点击复制

# dv-border-box-6

dv-border-box-6
<dv-border-box-6>dv-border-box-6</dv-border-box-6>
点击复制

# dv-border-box-7

dv-border-box-7
<dv-border-box-7>dv-border-box-7</dv-border-box-7>
点击复制

# dv-border-box-8

dv-border-box-8
<dv-border-box-8>dv-border-box-8</dv-border-box-8>
点击复制

# 特殊配置

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

# dv-border-box-9

dv-border-box-9
<dv-border-box-9>dv-border-box-9</dv-border-box-9>
点击复制

# dv-border-box-10

dv-border-box-10
<dv-border-box-10>dv-border-box-10</dv-border-box-10>
点击复制

# dv-border-box-11

dv-border-box-11
dv-border-box-11
<dv-border-box-11 title="dv-border-box-11">dv-border-box-11</dv-border-box-11>
点击复制

# 特殊配置

属性 说明 类型 可选值 默认值
title 边框标题 String - ''
titleWidth 标题宽度 Number - 250

# dv-border-box-12

dv-border-box-12
<dv-border-box-12>dv-border-box-12</dv-border-box-12>
点击复制

# dv-border-box-13

dv-border-box-13
<dv-border-box-13>dv-border-box-13</dv-border-box-13>
点击复制