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/descriptions.md.
  • 简体中文
  • Descriptions 描述列表

    按名称和值展示对象详情。

    基本用法

    项目信息

    项目
    Leaf UI
    负责人
    Alex
    状态
    进行中
    说明
    统一团队的产品界面。
    basic.tsx
    import { Descriptions, Tag } from '@ifhover/leaf-ui';
    
    export function DescriptionsBasic() {
      return (
        <Descriptions
          title="项目信息"
          columns={{ xs: 1, md: 2 }}
          items={[
            { key: 'name', label: '项目', children: 'Leaf UI' },
            { key: 'owner', label: '负责人', children: 'Alex' },
            { key: 'status', label: '状态', children: <Tag color="success">进行中</Tag> },
            { key: 'note', label: '说明', children: '统一团队的产品界面。', span: 2 },
          ]}
        />
      );
    }
    

    更多用法

    套餐
    Pro
    席位
    12
    续费时间
    2026-12-01
    advanced.tsx
    import { Descriptions } from '@ifhover/leaf-ui';
    
    export function DescriptionsVertical() {
      return (
        <Descriptions
          layout="vertical"
          bordered
          columns={{ xs: 1, md: 3 }}
          items={[
            { key: 'plan', label: '套餐', children: 'Pro' },
            { key: 'seats', label: '席位', children: 12 },
            { key: 'renew', label: '续费时间', children: '2026-12-01' },
          ]}
        />
      );
    }
    

    使用说明

    items 提供字段名称与内容,span 指定字段跨列数。columns 可按屏幕宽度配置列数,layout 可切换水平或垂直排列。

    类型

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

    import type { DescriptionItem, DescriptionsProps } from '@ifhover/leaf-ui';

    DescriptionItem API

    属性类型默认值说明
    keystring必填唯一且稳定的标识
    labelReactNode必填显示内容
    childrenReactNode必填内容或下级项目
    spannumber—跨列数,Col 的 0 表示隐藏

    DescriptionsProps API

    属性类型默认值说明
    itemsreadonly DescriptionItem[]必填数据项目,保持 key 唯一且稳定
    titleReactNode—标题内容
    extraReactNode—补充内容或操作
    columnsnumber | Partial<Record<'xs' | 'sm' | 'md' | 'lg' | 'xl', number>>—列数;较大断点继承较小断点
    layout'horizontal' | 'vertical''horizontal'标签与内容排列方式
    borderedbooleanfalse显示容器外框
    size'sm' | 'md' | 'lg''md'尺寸或间距预设