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/space.md.
  • 简体中文
  • Space 间距

    统一一组元素之间的间距。

    基本用法

    basic.tsx
    import { Button, Space } from '@ifhover/leaf-ui';
    
    export function SpaceBasic() {
      return (
        <Space size="md" wrap>
          <Button>保存</Button>
          <Button variant="outline">取消</Button>
          <Button variant="ghost">更多</Button>
        </Space>
      );
    }
    

    更多用法

    待处理已完成
    Leaf UIReact
    advanced.tsx
    import { Space, Tag } from '@ifhover/leaf-ui';
    
    export function SpaceVertical() {
      return (
        <Space direction="vertical" size={12} align="start">
          <Tag>待处理</Tag>
          <Tag color="success">已完成</Tag>
          <Space split={<span>·</span>} size={8}>
            <span>Leaf UI</span>
            <span>React</span>
          </Space>
        </Space>
      );
    }
    

    使用说明

    size 可使用预设、像素值或 [纵向, 横向] 间距。wrap 允许换行,split 在相邻内容之间插入分隔符。

    类型

    组装数据、定义回调和使用 ref 时,可以导入这些类型。

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

    SpaceProps API

    属性类型默认值说明
    direction'horizontal' | 'vertical''horizontal'排列方向或移动方向
    size'sm' | 'md' | 'lg' | number | readonly [number, number]'md'尺寸或间距预设
    align'start' | 'center' | 'end' | 'stretch' | 'baseline''center'对齐方式
    wrapbooleanfalse空间不足时换行
    splitReactNode—相邻元素分隔内容