Result 结果

展示操作结果、空数据或需要关注的状态。

操作结果

项目已创建

一切准备就绪，可以开始你的下一个好想法。

basic.tsx

import { Button, Result, Space } from '@ifhover/leaf-ui';

export function ResultBasic() {
  return (
    <Result
      status="success"
      title="项目已创建"
      description="一切准备就绪，可以开始你的下一个好想法。"
      extra={
        <Space>
          <Button variant="outline">返回列表</Button>
          <Button>进入项目</Button>
        </Space>
      }
    />
  );
}

空数据与其他状态

还没有项目

创建你的第一个项目，开始整理灵感。

存储空间即将用完

清理不需要的内容，或调整空间配额。

发布未完成

请检查连接后重试。

审核正在进行

完成后将在项目页面更新。

states.tsx

import { Button, Result, Space } from '@ifhover/leaf-ui';

export function ResultStates() {
  return (
    <Space direction="vertical" align="stretch">
      <Result
        status="empty"
        size="sm"
        title="还没有项目"
        description="创建你的第一个项目，开始整理灵感。"
        extra={<Button variant="outline">创建项目</Button>}
      />
      <Result
        status="warning"
        size="sm"
        title="存储空间即将用完"
        description="清理不需要的内容，或调整空间配额。"
      />
      <Result
        status="error"
        size="sm"
        title="发布未完成"
        description="请检查连接后重试。"
        extra={<Button variant="outline">重试</Button>}
      />
      <Result status="info" size="sm" title="审核正在进行" description="完成后将在项目页面更新。" />
    </Space>
  );
}

自定义内容

让灵感继续生长

图标、内容和操作区都可以替换。

这里可以放置后续步骤、问题说明或其他补充内容。

custom.tsx

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

import { Leaf } from 'lucide-react';

export function ResultCustom() {
  return (
    <Result title="让灵感继续生长" description="图标、内容和操作区都可以替换。" icon={<Leaf />}>
      <p>这里可以放置后续步骤、问题说明或其他补充内容。</p>
    </Result>
  );
}

Result API

属性	类型	默认值	说明
`status`	`'empty' \| 'success' \| 'warning' \| 'error' \| 'info'`	`'empty'`	结果状态
`title / description`	`ReactNode`	语言默认标题 / —	标题 / 说明，null 隐藏
`icon`	`ReactNode`	状态图标	自定义图标；null 隐藏
`extra`	`ReactNode`	—	底部按钮或链接
`children`	`ReactNode`	—	补充信息
`size`	`'sm' \| 'md'`	`'md'`	内容间距和图标大小

类型

可导入以下类型定义属性、组装数据或处理回调。

import type { EmptyProps, ResultProps } from '@ifhover/leaf-ui';

使用说明

空数据使用 status="empty"，成功、警告、错误与信息状态有对应图标和颜色。传入 icon、title、description 和 extra 可自定义内容。

原来的 Empty 仍保留兼容入口，建议迁移为 Result：image 改为 icon，description 改为 title，原本的操作按钮移到 extra。

Empty API

兼容组件，新增用法请使用 Result。EmptyProps 同时支持原生 div 属性。

属性	类型	默认值	说明
`image`	`ReactNode`	空数据图标	自定义图标；`null` 隐藏。
`description`	`ReactNode`	语言默认标题	空数据说明；`null` 隐藏。
`size`	`'sm' \| 'md'`	`'md'`	内容间距和图标大小。
`children`	`ReactNode`	—	底部操作内容。

#Result 结果

#操作结果

#空数据与其他状态

#自定义内容

#Result API

#类型

#使用说明

#Empty API