Divider 分割线

Divider 分割线

区隔内容的分割线。

何时使用

对不同章节的文本段落进行分割。
对行内文字/链接进行分割，例如表格的操作列。

代码演示

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

水平分割线

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

<template>
  <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>
  <a-divider />
  <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>
  <a-divider>With Text</a-divider>
  <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>
  <a-divider 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>
</template>

垂直分割线

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

<template>
  <div>
    Text
    <a-divider type="vertical" />
    <a href="#">Link</a>
    <a-divider type="vertical" />
    <a href="#">Link</a>
  </div>
</template>

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

带文字的分割线

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

<template>
  <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>
  <a-divider>Text</a-divider>
  <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>
  <a-divider orientation="left">Left Text</a-divider>
  <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>
  <a-divider orientation="right">Right Text</a-divider>
  <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>
</template>

样式自定义

测试一些 style 修改样式的行为。

<template>
  <a-divider style="height: 2px; background-color: #7cb305" />
  <a-divider style="border-color: #7cb305" dashed />
  <a-divider type="vertical" style="height: 60px; background-color: #7cb305" />
  <a-divider type="vertical" style="height: 60px; border-color: #7cb305" dashed />
</template>

API

参数	说明	类型	默认值
dashed	是否虚线	Boolean	false
orientation	分割线标题的位置	enum: `left` `right`	`center`
type	水平还是垂直类型	enum: `horizontal` `vertical`	`horizontal`

Divider分割线

Divider 分割线

何时使用

代码演示

API