Divider 分割线

分割线组件，支持水平/垂直布局、虚线样式和自定义内容

分割线组件，支持水平/垂直布局、虚线样式和自定义内容

演示

9:41

代码示例

<!-- 水平分割线 -->
  <re-divider class="demo-default" />

<!-- 带内容 -->
  <re-divider class="demo-content" content="分割线" />

<!-- 对齐方式 -->
  <re-divider class="demo-left" content="左对齐" align="left" />
  <re-divider class="demo-center" content="居中对齐" align="center" />
  <re-divider class="demo-right" content="右对齐" align="right" />

<!-- 虚线样式 -->
  <re-divider class="demo-dashed" :dashed="true" />
  <re-divider class="demo-dashed-content" content="虚线" :dashed="true" />

<!-- 垂直分割线 -->
  <re-divider class="demo-vertical" layout="vertical" />

<!-- 自定义颜色 -->
  <re-divider class="demo-color" content="彩色" lineColor="#0052d9" />

<!-- 自定义样式 -->
  <re-divider class="demo-custom-style" customStyle="margin-top: 20px;" />

<!-- 垂直虚线 -->
  <re-divider class="demo-vertical-dashed" layout="vertical" :dashed="true" />

引入

推荐使用 easycom 模式，配置后无需手动 import 即可直接使用 <re-divider />。

API

Divider Props

名称类型默认值描述必传
contentstring""分割线文字内容N
alignstring"center"文字对齐方式，可选值：left/center/rightN
dashedbooleanfalse是否使用虚线N
layoutstring"horizontal"分割线布局方向，可选值：horizontal/verticalN
lineColorstring""分割线颜色N
customStylestring""自定义样式N

Divider Events

名称参数描述
---

Divider Slots

名称描述
content-
default默认插槽
Button 按钮
按钮组件，支持多种主题、尺寸、形状和变体，参考TDesign设计风格
Fab 悬浮按钮
悬浮动作按钮组件，支持拖拽、图标和文字，固定定位在页面边缘。纯图标时显示圆形，带文字时显示胶囊形。一次只展示一个按钮，点击切换不同用法