> Leaf UI 0.8.1 · Package: @ifhover/leaf-ui · Source: 435bab23cad7d343653d9b63b049c0b0601eeefb
> Browser documentation: https://ifhover.github.io/leaf-ui/components/descriptions.html

> For AI agents: the complete documentation index is available at https://ifhover.github.io/leaf-ui/llms.txt, the full documentation bundle is available at https://ifhover.github.io/leaf-ui/llms-full.txt.

# Descriptions 描述列表

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

## 基本用法


### 项目信息

项目Leaf UI负责人Alex状态进行中说明统一团队的产品界面。

basic.tsx

复制代码

```tsx lineNumbers file="../../src/examples/descriptions/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

复制代码

```tsx lineNumbers file="../../src/examples/descriptions/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 时，可以导入这些类型。

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

## DescriptionItem API

| 属性         | 类型          | 默认值 | 说明               |
| ---------- | ----------- | --- | ---------------- |
| `key`      | `string`    | 必填  | 唯一且稳定的标识         |
| `label`    | `ReactNode` | 必填  | 显示内容             |
| `children` | `ReactNode` | 必填  | 内容或下级项目          |
| `span`     | `number`    | —   | 跨列数，Col 的 0 表示隐藏 |

## DescriptionsProps API

| 属性         | 类型                                                                        | 默认值            | 说明                |
| ---------- | ------------------------------------------------------------------------- | -------------- | ----------------- |
| `items`    | [`readonly DescriptionItem[]`](#descriptionitem-api)                      | 必填             | 数据项目，保持 key 唯一且稳定 |
| `title`    | `ReactNode`                                                               | —              | 标题内容              |
| `extra`    | `ReactNode`                                                               | —              | 补充内容或操作           |
| `columns`  | `number \| Partial<Record<'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl', number>>` | —              | 列数；较大断点继承较小断点     |
| `layout`   | `'horizontal' \| 'vertical'`                                              | `'horizontal'` | 标签与内容排列方式         |
| `bordered` | `boolean`                                                                 | `false`        | 显示容器外框            |
| `size`     | `'sm' \| 'md' \| 'lg'`                                                    | `'md'`         | 尺寸或间距预设           |