Divider 分隔线

分隔线（Divider）用于在内容之间建立轻量层级。Rue 使用当前视觉风格，并补充了更完整的文本位置、线型和垂直分隔能力。

# Divider

基础分隔线，保持当前默认用法。

content

# Divider horizontal

使用 Rue 基础 direction 用法，在横向布局中展示纵向分隔。

content

# Divider with no text

没有文字时，Divider 仍可作为纯分隔元素使用。

content

# Responsive Divider

支持通过 className 结合响应式类切换方向。

content

# Divider with colors

当前颜色能力保持，同时推荐新写法使用 color。

Default

Neutral

Primary

Secondary

Accent

Success

Warning

Info

Error

Primary by color

# Divider in different positions

展示基础 placement 用法，也可改用 titlePlacement。

Start

Default

End

# Divider in different positions (horizontal)

在横向布局中，文本位置仍可配合基础 direction 使用。

Start

Default

End

# Line Variants

支持实线、虚线、点线三种线型，并支持 dashed 快捷写法。

Solid

Dashed by variant

Dashed by boolean

Dotted

# Plain Text

plain 可以让分隔文字从强调标题过渡为更轻的正文说明。

默认文字

作为正文说明的分隔文案

Rue keeps it subtle

# Vertical Orientation API

orientation / vertical API 适合行内分隔，不展示 children。

Profile

Team

Billing

Logs

# Title Placement And Margin

titlePlacement 与 orientationMargin 可更精细地控制文字和边缘的距离。

Start 24px

Center

End 40px

# Custom Style

style / contentStyle / contentClassName 便于保持 Rue 基础视觉下的局部定制。

Project Status

DEPLOYMENT READY

API

当前 Divider 同时支持 Rue 基础写法与更语义化的新 API，便于按需接入。

属性	说明	类型	默认值
`children`	分隔线中展示的内容；使用 orientation="vertical" 或 vertical 时不显示。	`any`	`-`
`color`	推荐写法，设置 Rue 语义色。	`'neutral' \| 'primary' \| 'secondary' \| 'accent' \| 'success' \| 'warning' \| 'info' \| 'error'`	`-`
`variant`	支持颜色写法，同时支持 solid / dashed / dotted 线型。	`tone \| 'solid' \| 'dashed' \| 'dotted'`	`solid`
`lineVariant`	显式设置线型，优先级高于 dashed。	`'solid' \| 'dashed' \| 'dotted'`	`solid`
`dashed`	快捷开启虚线。	`boolean`	`false`
`plain`	让分隔文字更接近正文样式，适合说明性内容。	`boolean`	`false`
`titlePlacement`	推荐写法，控制文本位于起始、居中或结束位置。	`'start' \| 'center' \| 'end'`	`center`
`placement`	支持基础 start / end 文本位置。	`'start' \| 'end'`	`-`
`orientationMargin`	仅在 titlePlacement 为 start / end 时生效，控制文本和最近边缘的距离。	`string \| number`	`-`
`orientation`	推荐写法，控制横向或纵向分隔；vertical 模式更适合行内分隔。	`'horizontal' \| 'vertical'`	`horizontal`
`vertical / type`	vertical 是 orientation="vertical" 的快捷写法；type 作为同义别名保持。	`boolean \| 'horizontal' \| 'vertical'`	`-`
`direction`	支持 Rue 基础写法；在横向布局中常用 direction="horizontal" 切换为纵向视觉。	`'vertical' \| 'horizontal'`	`-`