NG-ZORRODivider分割线
区隔内容的分割线。
何时使用#
- 对不同章节的文本段落进行分割。
- 对行内文字/链接进行分割，例如表格的操作列。
import { NzDividerModule } from 'ng-zorro-antd/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.
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.
默认为水平分割线，可在中间加入文字。
加载中
使用 nzType="vertical" 设置为行内的垂直分割线。
加载中
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.
分隔线默认为 solid（实线）变体。您可以将其更改为 dashed（虚线）或 dotted（点线）。
加载中
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.
修改分割线标题的位置。
加载中
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.
使用 nzPlain 可以设置为更轻量的分割文字样式。
加载中
API#
nz-divider#
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
[nzDashed] | 是否虚线 | boolean | false |
[nzType] | 水平还是垂直类型 | 'horizontal' | 'vertical' | 'horizontal' |
[nzText] | 中间文字 | string | TemplateRef<void> | - |
[nzPlain] | 文字是否显示为普通正文样式 | boolean | false |
[nzOrientation] | 中间文字方向 | 'center' | 'left' | 'right' | 'center' |
[nzVariant] | 分割线是虚线、点线还是实线 | 'dashed' | 'dotted' | 'solid' | 'solid' |