MDescriptions 组件文档

组件概述

MDescriptions 是一个增强型详情描述列表组件，基于 Ant Design 的 Descriptions 组件封装，用于展示对象的详细信息（如用户信息、产品详情等）。组件支持主题定制和丰富的布局配置选项。

组件属性 (Props)

IMDescriptionProps

属性名	类型	默认值	描述
data	IMDescriptionItem[]	-	描述列表数据数组（必填）
title	React.ReactNode	-	列表标题
column	1 \| 2 \| 3 \| 4	3	显示的列数
lineHeight	number	-	行高（像素）
align	'left' \| 'center' \| 'right'	'left'	标签对齐方式
itemLayout	{ label?: number; value?: number }	-	标签和值的宽度配置（像素）
colon	boolean	true	是否显示冒号
bordered	boolean	false	是否显示边框
style	React.CSSProperties	-	容器自定义样式
className	string	-	容器自定义类名
labelStyle	React.CSSProperties	-	标签自定义样式
contentStyle	React.CSSProperties	-	内容自定义样式

IMDescriptionItem (数据项配置)

属性名	类型	描述
label	React.ReactNode	项标签内容（必填）
value	React.ReactNode	项值内容（必填）
span	number	该项跨越的列数（可选）

使用示例

基本用法

<MDescriptions
    title='用户信息'
    data={[
        { label: '用户名', value: '张三' },
        { label: '手机号', value: '13800138000' },
        { label: '邮箱', value: 'zhangsan@example.com' },
    ]}
/>

多列布局

<MDescriptions
    column={4}
    data={[
        { label: '订单号', value: '20230001', span: 2 },
        { label: '创建时间', value: '2023-05-20' },
        { label: '状态', value: '已完成' },
    ]}
/>

自定义样式

<MDescriptions
  bordered
  lineHeight={32}
  align="right"
  labelStyle={{ fontWeight: 'bold' }}
  contentStyle={{ color: '#1890ff' }}
  data={[...]}
/>

控制标签和内容宽度

<MDescriptions
    itemLayout={{ label: 120, value: 300 }}
    data={[{ label: '详细地址', value: '北京市海淀区中关村大街1号' }]}
/>