分割线 Divider
划分内容区域,对模块做分隔。
安装
npm install @arco-design/web-react@2.66.18
在入口引入 @arco-design/web-react/dist/css/arco.css,用 ConfigProvider 设置语言。React 19 项目还需在入口最先引入 @arco-design/web-react/es/_util/react-19-adapter,否则 Message、Modal 等命令式 API 无法渲染。
示例
- 基本用法:对不同章节的文本段落进行分割,默认为水平分割线,可在中间加入文字。
- 带有文字的分割线:通过
orientation指定分割线文字的位置。 - 竖直分割线:指定
type为vertical即可使用竖直分割线。竖直分割线不能带文字。
示例来自 Arco Design 官方仓库(MIT),固定在 npm 2.66.18 对应的提交;部分示例使用在线图片或上传地址,预览中网络请求被禁用。
API
Divider
| 参数名 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| orientation | 分割线文字的位置 | 'left' | 'right' | 'center' | center |
| type | 分割线的类型,是水平还是竖直,分别对应 horizontal 和 vertical | 'horizontal' | 'vertical' | horizontal |
| className | 节点类名 | string | string[] | - |
| style | 节点样式 | CSSProperties | - |