表述 Descriptions

一个用于展示数据项列表的响应式描述组件，支持列数控制、边框样式以及内容合并。

---

📦 引入方式

import { Descriptions } from '@npmqg/react-ui-descriptions';

---

🧩 使用示例

📚 基础用法

示例

姓名

张三

年龄

28

性别

男

住址

北京市

源码

<Descriptions
  items={[
    { label: '姓名', children: '张三' },
    { label: '年龄', children: '28' },
    { label: '性别', children: '男' },
    { label: '住址', children: '北京市', span: 2 },
  ]}
/>

📚 带边框 + 自定义列参数

示例

项目

ChatGPT UI

版本

1.0.0

作者

OpenAI

源码

<Descriptions
  bordered
  itemClassName="grid-cols-2"
  items={[
    { label: '项目', children: 'ChatGPT UI' },
    { label: '版本', children: '1.0.0' },
    { label: '作者', children: 'OpenAI' },
  ]}
/>

---

🧩 Props

参数	说明	类型	默认值
items	描述项数组，每项包含 label 和内容	DescriptionItem[]	-
column	每行显示的描述项数（每项一行两列）	number	3
bordered	是否显示边框	boolean	false
className	额外的 CSS class	string	-
...props	其他传给最外层 div 的属性	React.HTMLAttributes<HTMLDivElement>	-

---

💅 样式说明

• 使用 CSS Grid 自动布局。
• 每个描述项默认占 2 列（label 1 + content 1），可通过 span 合并内容列。
• 支持可选边框风格（bordered）。