Divider 分割线

区隔内容的分割线

区隔内容的分割线。

何时使用

  • 对不同章节的文本段落进行分割。
  • 对行内文字或链接进行分割，例如表格的操作列。
  • 当需要表达「分隔」语义时，避免滥用 border 直接实现。

代码演示

基础用法

上方内容
下方内容

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

<template>
  <div>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <Divider />
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <Divider dashed />
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  </div>
</template>

带文字的分割线

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

<template>
  <div>
    <p>Lorem ipsum dolor sit amet.</p>
    <Divider>Text</Divider>
    <p>Lorem ipsum dolor sit amet.</p>
    <Divider title-placement="start">Left Text</Divider>
    <p>Lorem ipsum dolor sit amet.</p>
    <Divider title-placement="end">Right Text</Divider>
    <p>Lorem ipsum dolor sit amet.</p>
  </div>
</template>

设置间距大小

通过 size 设置分割线的间距大小。

<template>
  <div>
    <p>Lorem ipsum dolor sit amet.</p>
    <Divider size="small" />
    <p>Lorem ipsum dolor sit amet.</p>
    <Divider size="medium" />
    <p>Lorem ipsum dolor sit amet.</p>
    <Divider size="large" />
    <p>Lorem ipsum dolor sit amet.</p>
  </div>
</template>

分割文字使用正文样式

使用 plain 可以设置为更轻量的分割文字样式。

<template>
  <div>
    <p>Lorem ipsum dolor sit amet.</p>
    <Divider plain>Text</Divider>
    <p>Lorem ipsum dolor sit amet.</p>
    <Divider title-placement="start" plain>Left Text</Divider>
    <p>Lorem ipsum dolor sit amet.</p>
    <Divider title-placement="end" plain>Right Text</Divider>
  </div>
</template>

垂直分割线

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

<template>
  <div class="flex items-center">
    <span>Text</span>
    <Divider vertical />
    <a href="#">Link</a>
    <Divider vertical />
    <a href="#">Link</a>
  </div>
</template>

变体

分隔线默认为 solid（实线）变体。可以更改为 dashed（虚线）或 dotted（点线）。

<template>
  <div>
    <p>Lorem ipsum dolor sit amet.</p>
    <Divider variant="solid">Solid</Divider>
    <p>Lorem ipsum dolor sit amet.</p>
    <Divider variant="dotted">Dotted</Divider>
    <p>Lorem ipsum dolor sit amet.</p>
    <Divider variant="dashed">Dashed</Divider>
  </div>
</template>

自定义颜色

通过 class 属性自定义分割线颜色。

<template>
  <Divider class="border-green-500" />
  <Divider class="border-blue-500" variant="dashed" />
</template>

导入

import { Divider } from "@reglow/reui";

API

Props

参数说明类型默认值
orientation水平或垂直类型horizontal | verticalhorizontal
vertical是否垂直（和 orientation 同时配置以 orientation 优先）booleanfalse
dashed是否虚线（等同于 variant="dashed"）booleanfalse
variant分割线样式变体solid | dashed | dottedsolid
titlePlacement分割线标题的位置start | center | endcenter
plain文字是否显示为普通正文样式booleanfalse
size间距大小，仅对水平布局有效small | medium | largemedium
class附加类名string-
Button 按钮
按钮用于开始一个即时操作，标记（或封装）一组操作命令，响应用户点击行为，触发相应的业务逻辑。
Label 标签
基于 reka-ui Label，用于表单字段标题，支持 for 关联与无障碍。