Value Display

Value Display 组件用于格式化显示各种类型的值，包括字符串、数字、布尔值、数组、对象等。

不同类型的值

字符串:Hello World

数字:42

布尔值:true

数组:

[
  1,
  2,
  3,
  "test"
]

对象:

{
  "name": "张三",
  "age": 25,
  "active": true
}

空值:null

未定义:undefined

长字符串:这是一个很长的字符串，用来测试组件如何处理长文本内容的显示效果

自定义样式

自定义背景色自定义边框

安装

使用方法

import { ValueDisplay } from "@/components/pivot/value-display";

<ValueDisplay value="Hello World" type="string" />

示例

基本类型

<div className="space-y-3">
  <div className="flex items-center gap-3">
    <span className="w-20 text-sm">字符串:</span>
    <ValueDisplay value="Hello World" type="string" />
  </div>
 
  <div className="flex items-center gap-3">
    <span className="w-20 text-sm">数字:</span>
    <ValueDisplay value={42} type="number" />
  </div>
 
  <div className="flex items-center gap-3">
    <span className="w-20 text-sm">布尔值:</span>
    <ValueDisplay value={true} type="boolean" />
  </div>
 
  <div className="flex items-center gap-3">
    <span className="w-20 text-sm">空值:</span>
    <ValueDisplay value={null} type="null" />
  </div>
</div>

在 API 文档中使用

<div className="space-y-3">
  <div className="flex items-center gap-3 p-3 border rounded">
    <code className="font-mono">name</code>
    <TypeIndicator type="string" />
    <ValueDisplay value="John Doe" type="string" />
    <span className="text-sm text-muted-foreground">默认值</span>
  </div>
 
  <div className="flex items-center gap-3 p-3 border rounded">
    <code className="font-mono">age</code>
    <TypeIndicator type="number" />
    <ValueDisplay value={25} type="number" />
    <span className="text-sm text-muted-foreground">示例值</span>
  </div>
</div>

API 参考

Props

属性	类型	默认值	描述
`value`	`any`	-	要显示的值
`type`	`"string" \| "number" \| "boolean" \| "null" \| "array"`	-	值的类型
`className`	`string`	-	额外的 CSS 类名