ExUI

Appearance

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" 设置为行内的垂直分割线。 Text

LinkLink

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 ​

变量名说明默认值
--ex-divider-color分割线颜色rgba(5, 5, 5, 0.06)
--ex-divider-text-color文字颜色rgba(0, 0, 0, 0.88)
--ex-divider-font-size文字大小16px
--ex-divider-margin上下间距24px 0
--ex-divider-vertical-margin垂直分割线左右间距0 8px
--ex-divider-text-padding文字内边距0 1em
--ex-divider-orientation-margin标题边距5%