Descriptions 描述列表

    配置化的描述列表组件，通过 items 配置自动渲染数据。

    安装

    npm
    yarn
    pnpm
    bun
    deno
    npx shadcn@latest add https://codebase.anyask.dev/r/descriptions.json

    基础用法

    自定义渲染

    支持自定义渲染函数、枚举映射、日期格式化、单位等功能。

    Features

    • 自定义渲染: 通过 render 函数自定义内容
    • 枚举映射: 通过 enum 将值映射为 ReactNode
    • 日期格式化: 通过 format 格式化日期
    • 数字单位: 通过 unit 和 precision 处理数字
    • 可点击文本: 通过 onClick 处理点击事件
    • tooltip: 通过 tooltip 或 tooltip: true 启用省略号 tooltip
    • 条件显示: 通过 visible 函数控制是否显示

    API

    Descriptions

    配置化的描述列表组件

    属性说明类型默认值
    data*数据源Record<string, any>-
    items*配置项列表 DescriptionItem[]DescriptionItem<T>[]-
    className自定义类名string-

    DescriptionItem

    属性说明类型默认值
    key唯一标识符，用于 React key，不提供则使用 dataIndexstringdataIndex
    dataIndex字段路径，支持嵌套路径，有类型提示Paths<T>-
    label显示的标签ReactNode-
    render自定义渲染函数(value, record) => ReactNode-
    tooltip省略号 tooltipboolean | TooltipProps-
    className自定义类名string-
    visible条件渲染，返回 false 时不显示(record: T) => boolean-
    defaultValue默认值，当值为 undefined 时使用any-
    enum枚举值映射Record<string | number, ReactNode>-
    format日期时间格式string-
    onClick点击事件处理函数(value, record) => void-
    unit单位符号，如 "元"string-
    precision数字小数位数number2
    imageGroup图片组渲染boolean | ImageGroupProps-
    fileList文件列表boolean-