Leaf UI
  • 简体中文

      • Empty 空状态

      在没有内容时提示原因并提供下一步操作。

      基础用法

      交互预览基础用法
      还没有项目
      暂无数据
      暂时没有搜索结果
      basic.tsx
      import { Button, Empty } from '@sudden3/leaf-ui';

export function EmptyBasic() {
  return (
    <div className="leaf-demo-stack leaf-demo-stack--wide">
      <Empty description="还没有项目">
        <Button>创建项目</Button>
      </Empty>
      <Empty size="sm" />
      <Empty image={null} description="暂时没有搜索结果" />
    </div>
  );
}

      Empty API

      属性类型默认值说明
      imageReactNodeInbox 图标自定义图像，null 隐藏
      descriptionReactNode暂无数据提示内容，null 隐藏
      childrenReactNode—下一步操作
      size'sm' | 'md''md'展示尺寸

      类型

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

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

      使用说明

      描述应说明没有内容的原因，需要时通过 children 提供操作按钮。