Divider 分割线
用于分隔内容区块的分割线。
水平分割线
默认渲染水平分割线。
上方内容
下方内容
vue
<p>上方内容</p>
<ADivider />
<p>下方内容</p>带文字
在分割线中间插入文字。
内容区域
分隔
另一区域
vue
<p>内容区域</p>
<ADivider> 分隔 </ADivider>
<p>另一区域</p>虚线
设置 dashed 使用虚线样式。
内容
内容
虚线分隔
内容
vue
<ADivider dashed />
<ADivider dashed>虚线分隔</ADivider>垂直分割线
设置 orientation="vertical" 渲染垂直分割线。
首页文章关于
vue
<span>首页</span>
<ADivider orientation="vertical" />
<span>文章</span>渐变风格
设置 variant="fade" 两端渐隐渐细效果。
内容
内容
渐变虚线
内容
首页文章关于
vue
<ADivider variant="fade" />
<ADivider variant="fade" dashed>渐变虚线</ADivider>
<ADivider variant="fade" orientation="vertical" />API
Props
| 名称 | 类型 | 默认值 | 说明 |
|---|---|---|---|
orientation | 'horizontal' | 'vertical' | 'horizontal' | 方向 |
dashed | boolean | false | 是否为虚线 |
plain | boolean | false | 是否为纯分割线 |
variant | 'line' | 'fade' | 'line' | 风格，fade 为两端渐隐 |