• 简体中文
  • Divider 分割线

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

    基础用法

    交互预览基础用法

    项目信息

    编辑分享归档
    basic.tsx
    import { Divider } from '@sudden3/leaf-ui';
    
    export function DividerBasic() {
      return (
        <div className="leaf-demo-stack leaf-demo-stack--wide">
          <p>项目信息</p>
          <Divider>设置</Divider>
          <Divider align="start" dashed>
            更多内容
          </Divider>
          <div>
            编辑
            <Divider type="vertical" />
            分享
            <Divider type="vertical" dashed />
            归档
          </div>
        </div>
      );
    }
    

    Divider API

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

    类型

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

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

    使用说明

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