表述 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' },
  ]}
/>

---

📚 多列布局

示例

用户名

张三

邮箱

test@example.com

电话

12345678

地址

北京市海淀区

源码

<Descriptions
  columns={3}
  items={[
    { label: '用户名', children: '张三' },
    { label: '邮箱', children: 'test@example.com' },
    { label: '电话', children: '12345678' },
    { label: '地址', children: '北京市海淀区', span: 2 },
  ]}
/>

---

📚 Label 对齐方式

示例

姓名

王五

年龄

28

源码

<Descriptions
  labelAlign="center"
  items={[
    { label: '姓名', children: '王五' },
    { label: '年龄', children: '28' },
  ]}
/>

---

📚 自定义背景色

示例

工号

A2001

职位

设计师

源码

<Descriptions
  labelBg="bg-gray-500"
  contentBg="bg-gray-800"
  items={[
    { label: '工号', children: 'A2001' },
    { label: '职位', children: '设计师' },
  ]}
/>

---

📚 自定义 Label 宽度

示例

标题

自定义宽度 Label

内容

右侧内容区域

源码

<Descriptions
  labelWidth={100}
  items={[
    { label: '标题', children: '自定义宽度 Label' },
    { label: '内容', children: '右侧内容区域' },
  ]}
/>

---

🧩 Props

参数	类型	默认值	描述
items	DescriptionItem[]	[]	描述项数组，每个元素包含 label、children、span
bordered	boolean	false	是否显示边框
itemClassName	string	-	自定义 item 容器样式类名
labelBg	string	bg-section	Label 区域背景色
contentBg	string	-	内容区域背景色
labelAlign	'left' | 'center' | 'right'	'left'	Label 对齐方式
columns	number	1	每行显示的最大列数
labelWidth	string | number	-	Label 宽度（如 100px 或 120）
className	string	-	外层容器样式类名

---

🧱 类型定义

interface DescriptionItem {
  label: React.ReactNode;
  children: React.ReactNode;
  span?: number; // 占几列
}

export interface DescriptionsProps extends React.HTMLAttributes<HTMLDivElement> {
  items: DescriptionItem[];
  bordered?: boolean;
  itemClassName?: string;
  labelBg?: string;
  contentBg?: string;
  labelAlign?: 'left' | 'center' | 'right';
  columns?: number;
  labelWidth?: string | number;
}

---

✨ 特性

• 灵活的 分行/跨列 控制（span）
• 支持 边框模式
• 可自定义 label 背景 和 内容背景
• label 对齐 和 固定宽度 支持

---

💅 样式说明

• 默认 label 背景：bg-section
• 默认内容背景：透明
• label 内边距：px-4 py-2
• 内容内边距：px-4 py-2
• 支持文字过长自动换行