ExUI

Divider 分割线 ​

区隔内容的分割线。

基础用法 ​

对不同章节的文本段落进行分割。

Steven Paul Jobs (February 24, 1955 – October 5, 2011) was an American entrepreneur, business magnate, inventor, and industrial designer. He was the chairman, chief executive officer (CEO), and co-founder of Apple Inc.

He was born in San Francisco, California, and put up for adoption. Jobs was adopted by Clara and Paul Jobs, and grew up in Mountain View, California, which was part of the Santa Clara Valley that would later become known as Silicon Valley.

In late 1973, Jobs took a job as a technician at Atari, Inc. in Los Gatos, California. He traveled to India in mid-1974 to visit Neem Karoli Baba at his Kainchi Dham ashram with his Reed friend Dan Kottke, searching for spiritual enlightenment.

vue
<template>
  <div>
    <p>
      Steven Paul Jobs (February 24, 1955 – October 5, 2011) was an American entrepreneur, business
      magnate, inventor, and industrial designer. He was the chairman, chief executive officer
      (CEO), and co-founder of Apple Inc.
    </p>
    <ExDivider />
    <p>
      He was born in San Francisco, California, and put up for adoption. Jobs was adopted by Clara
      and Paul Jobs, and grew up in Mountain View, California, which was part of the Santa Clara
      Valley that would later become known as Silicon Valley.
    </p>
    <ExDivider />
    <p>
      In late 1973, Jobs took a job as a technician at Atari, Inc. in Los Gatos, California. He
      traveled to India in mid-1974 to visit Neem Karoli Baba at his Kainchi Dham ashram with his
      Reed friend Dan Kottke, searching for spiritual enlightenment.
    </p>
  </div>
</template>

带文字的分割线 ​

分割线中带有文字，可以用 orientation 指定文字位置。

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo.

vue
<template>
  <div>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista
      probare, quae sunt a te dicta? Refert tamen, quo modo.
    </p>
    <ExDivider>Text</ExDivider>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista
      probare, quae sunt a te dicta? Refert tamen, quo modo.
    </p>
    <ExDivider orientation="left">Left Text</ExDivider>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista
      probare, quae sunt a te dicta? Refert tamen, quo modo.
    </p>
    <ExDivider orientation="right">Right Text</ExDivider>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista
      probare, quae sunt a te dicta? Refert tamen, quo modo.
    </p>
  </div>
</template>

垂直分割线 ​

使用 type="vertical" 设置为行内的垂直分割线。

TextLinkLink
vue
<template>
  <div>
    Text
    <ExDivider type="vertical" />
    <a href="#">Link</a>
    <ExDivider type="vertical" />
    <a href="#">Link</a>
  </div>
</template>

分割线样式 ​

使用 dashed 可以设置为虚线。

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo.

vue
<template>
  <div>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista
      probare, quae sunt a te dicta? Refert tamen, quo modo.
    </p>
    <ExDivider dashed />
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista
      probare, quae sunt a te dicta? Refert tamen, quo modo.
    </p>
    <ExDivider dashed>With Text</ExDivider>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista
      probare, quae sunt a te dicta? Refert tamen, quo modo.
    </p>
  </div>
</template>

分割线颜色 ​

自定义分割线颜色。

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

vue
<template>
  <div>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <ExDivider color="#7cb305" />
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <ExDivider color="#7cb305">Green Text</ExDivider>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <ExDivider color="#00f0ff">Neon Blue</ExDivider>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <ExDivider color="#ff007f" dashed>Neon Pink Dashed</ExDivider>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  </div>
</template>

分割线尺寸 ​

通过 size 属性设置分割线的粗细。

Default size

Small size

Large size

Custom size

vue
<template>
  <div>
    <p>Default size</p>
    <ExDivider />

    <p>Small size</p>
    <ExDivider size="small" />

    <p>Large size</p>
    <ExDivider size="large" />

    <p>Custom size</p>
    <ExDivider :size="5" />
  </div>
</template>

分割线间距 ​

通过 margin 属性设置分割线的上下间距。

Default margin

Small margin

Large margin

No margin

vue
<template>
  <div>
    <p>Default margin</p>
    <ExDivider />

    <p>Small margin</p>
    <ExDivider margin="8px" />

    <p>Large margin</p>
    <ExDivider margin="32px" />

    <p>No margin</p>
    <ExDivider margin="0" />
  </div>
</template>

API ​

Divider Props ​

参数说明类型默认值
type水平还是垂直类型'horizontal' | 'vertical''horizontal'
orientation分割线标题的位置'left' | 'center' | 'right''center'
orientation-margin标题和最近 left/right 边框之间的距离，去除了分割线，同时 orientation 必须为 left 或 rightstring | number-
dashed是否虚线booleanfalse
size分割线粗细'small' | 'default' | 'large' | number'default'
margin分割线上下间距string | number-
plain文字是否显示为普通正文样式booleanfalse
color分割线颜色string-

Divider Slots ​

名称说明
default嵌套的标题

Divider CSS Variables ​

这些变量由对应 props 自动写入（color / margin / size / orientationMargin），通常无需手动设置；颜色默认取主题 --ex-color-border-primary，而非固定值。

变量名对应 prop说明默认（回退）值
--ex-divider-colorcolor分割线颜色主题 --ex-color-border-primary
--ex-divider-marginmargin主轴间距（水平为上下、垂直为左右）水平 24px 0 / 垂直 0 8px
--ex-divider-sizesize（数值时）分割线粗细1px
--ex-divider-orientation-marginorientationMargin标题侧短线占比/距离（仅 orientation 为 left/right）5%