Divider 分隔线

示例

基础用法

我们爬到楼顶去看夕阳

再唱起从前的时光

<p>我们爬到楼顶去看夕阳</p>
<amber-divider></amber-divider>
<p>再唱起从前的时光</p>
<amber-divider dashed></amber-divider>

显示代码 复制代码 复制代码

垂直分隔

熏悟空 居八戒 沙悟净

<div style="display: flex">
  <span>熏悟空</span>
  <amber-divider type="vertical"></amber-divider>
  <span>居八戒</span>
  <amber-divider type="vertical" dashed></amber-divider>
  <span>沙悟净</span>
</div>

显示代码 复制代码 复制代码

分隔文字内容用法

With Text 你健康 Dashed Text 我健康 Right Text 大家一块健康 Left Text

<amber-divider>With Text</amber-divider>
你健康 
<amber-divider dashed>Dashed Text</amber-divider>
我健康
<amber-divider orientation="right">Right Text</amber-divider>
大家一块健康
<amber-divider orientation="left" dashed>Left Text</amber-divider>

显示代码 复制代码 复制代码

API

参数	说明	类型	可选值	默认值
type	水平或垂直类型	string	horizontal/vertical	horizontal
dashed	是否虚线	boolean	boolean	false
orientation	分割线文字的位置	string	left/right	center