Chi-UI

Appearance

Divider 分割线 ​

代码示例 ​

水平分割线 ​

默认为水平分割线，可在中间加入文字。

一段文字一段文字一段文字一段文字一段文字

一段文字一段文字一段文字一段文字一段文字

一段文字一段文字一段文字一段文字一段文字

一段文字一段文字一段文字一段文字一段文字

<template>
  <p>一段文字一段文字一段文字一段文字一段文字</p>
  <chi-divider></chi-divider>
  <p>一段文字一段文字一段文字一段文字一段文字</p>
  <chi-divider primary>插入文字</chi-divider>
  <p>一段文字一段文字一段文字一段文字一段文字</p>
  <chi-divider dashed>插入文字</chi-divider>
  <p>一段文字一段文字一段文字一段文字一段文字</p>
</template>

文字位置 ​

通过 text-position 改变文字所在的位置。

一段文字一段文字一段文字一段文字一段文字

一段文字一段文字一段文字一段文字一段文字

一段文字一段文字一段文字一段文字一段文字

一段文字一段文字一段文字一段文字一段文字

<template>
  <p>一段文字一段文字一段文字一段文字一段文字</p>
  <chi-divider>分割线</chi-divider>
  <p>一段文字一段文字一段文字一段文字一段文字</p>
  <chi-divider text-position="left">我在左侧</chi-divider>
  <p>一段文字一段文字一段文字一段文字一段文字</p>
  <chi-divider text-position="right" margin="40px">我在右侧</chi-divider>
  <p>一段文字一段文字一段文字一段文字一段文字</p>
</template>

纵向分割线 ​

添加 vertical 可以变成纵向分割线。

一段文字

一段文字 一段文字 

<template>
  <p>
    一段文字
    <chi-divider vertical></chi-divider>
    一段文字
    <chi-divider vertical :margin="20"></chi-divider>
    一段文字
  </p>
</template>

API ​

Divider 属性 ​

名称类型说明默认值
dashedboolean设置分割线是否为虚线false
margin'string' |'number'当 vertical 为 true 时设置横向外边距，否则设置纵向外边距null
primaryboolean设置嵌入文字为更显眼的状态false
text-position'left' | 'center' | 'right'设置嵌入的文字位置'center'
verticalboolean设置分割线是否为纵向false