For AI agents: the complete documentation index is available at https://ifhover.github.io/leaf-ui/v/0.6.0/llms.txt, the full documentation bundle is available at https://ifhover.github.io/leaf-ui/v/0.6.0/llms-full.txt, and this page is available as Markdown at https://ifhover.github.io/leaf-ui/v/0.6.0/components/divider.md.
Leaf UI
  • 简体中文

      • Divider 分割线

      分隔内容、段落或一组操作。

      基础用法

      项目信息

      编辑分享归档
      basic.tsx
      import { Divider, Space } from '@ifhover/leaf-ui';

export function DividerBasic() {
  return (
    <Space direction="vertical" align="stretch">
      <p>项目信息</p>
      <Divider>设置</Divider>
      <Divider align="start" dashed>
        更多内容
      </Divider>
      <div>
        编辑
        <Divider type="vertical" />
        分享
        <Divider type="vertical" dashed />
        归档
      </div>
    </Space>
  );
}

      Divider API

      属性类型默认值说明
      type'horizontal' | 'vertical''horizontal'分割方向
      align'start' | 'center' | 'end''center'文字位置
      dashedbooleanfalse虚线样式
      childrenReactNode—水平分割线上的文字

      类型

      定义组件属性或组装列表时可导入相关类型。

      import type { DividerProps } from '@ifhover/leaf-ui';

      使用说明

      垂直分割线适合放在行内内容之间。