ElyriDivider
分割线：横 / 纵两个方向、solid / dashed / dotted / gradient 四种线型，横向可带居中文字并控制对齐与留白。
安装
添加组件
pnpm dlx @elyri/cli@latest add divider示例
基础用法
默认横向实线，铺满父容器宽度。
import { Divider } from './components/elyri/Divider';
export function Example() {
return <Divider />;
}线型
solid / dashed / dotted / gradient 四种外观，gradient 两端自然淡出。
solid
dashed
dotted
gradient
import { Divider } from './components/elyri/Divider';
const variants = ['solid', 'dashed', 'dotted', 'gradient'] as const;
export function Example() {
return (
<div style={{ display: 'flex', flexDirection: 'column', width: 'min(520px, 100%)' }}>
{variants.map((variant) => (
<Divider key={variant} variant={variant} label={variant} />
))}
</div>
);
}带文字
在分割线中嵌入文字；align 控制文字靠 start / center / end。
Center
Start
End
import { Divider } from './components/elyri/Divider';
export function Example() {
return (
<div style={{ display: 'flex', flexDirection: 'column', width: 'min(520px, 100%)' }}>
<Divider label="Center" variant="gradient" />
<Divider label="Start" align="start" variant="gradient" />
<Divider label="End" align="end" variant="gradient" />
</div>
);
}纵向
纵向分割线随父级高度拉伸，适合分隔行内元素。
Draft
Review
Done
import { Divider } from './components/elyri/Divider';
import { Tag } from './components/elyri/Tag';
export function Example() {
return (
<div style={{ display: 'flex', alignItems: 'stretch', gap: 4 }}>
<Tag>Draft</Tag>
<Divider orientation="vertical" />
<Tag variant="accent">Review</Tag>
<Divider orientation="vertical" variant="dashed" />
<Tag variant="success">Done</Tag>
</div>
);
}间距
spacing 控制横向的上下留白（纵向为左右留白）：none / sm / md / lg。
Danger zone
import { Button } from './components/elyri/Button';
import { Divider } from './components/elyri/Divider';
export function Example() {
return (
<div style={{ width: 'min(520px, 100%)' }}>
<Button size="sm" variant="ghost">Delete account</Button>
<Divider spacing="sm" />
<Button size="sm" variant="ghost">Export data</Button>
<Divider spacing="lg" label="Danger zone" />
<Button size="sm" variant="danger">Remove workspace</Button>
</div>
);
}属性
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
orientation | 'horizontal' | 'vertical' | 'horizontal' | 方向：horizontal / vertical |
variant | 'solid' | 'dashed' | 'dotted' | 'gradient' | 'solid' | 线型：solid / dashed / dotted / gradient |
spacing | 'none' | 'sm' | 'md' | 'lg' | 'md' | 留白：none / sm / md / lg，默认 md |
label | ReactNode | — | 居中文字，仅横向生效 |
align | 'start' | 'center' | 'end' | 'center' | 文字对齐：start / center / end，默认 center |
...rest | HTMLAttributes | — | 其余属性透传给原生 div |