# label-value-render LLMs.txt

> 供 LLM 快速理解 `@flatbiz/antd/label-value-render` 的使用方式。

## 模块定位

label+value 列表布局

## 导入方式

```ts
import { LabelValueRender } from '@flatbiz/antd/label-value-render';
// 也可以从主入口导入：import { ... } from '@flatbiz/antd';
```

## 公开导出

- `* from ./label-value.jsx`
- `LabelValueRender` - label+value 列表布局
- `LabelValueRenderProps`
- `TLabelValueItem`
- `TLabelValueRenderItem`
- `getRenderGrid`

## Props / 配置要点

### LabelValueRenderProps

- `className`（可选）：: string
- `style`（可选）：: CSSProperties
- `forceColumn`（可选）：: 1 | 2 | 3 | 4 | 6；强制定义一行显示几列，不考虑响应式
- `options`（必填）：: TLabelValueItem[]；数据源配置
- `ellipsis`（可选）：: boolean；超过宽度将自动省略，默认值：true
- `border`（可选）：: boolean；是否添加边框 @deprecated 已过期，请使用 bordered
- `bordered`（可选）：: boolean；是否添加边框
- `labelAlign`（可选）：: 'left' | 'right' | 'center'；label对齐方式
- `labelWidth`（可选）：: number | 'auto'；label 宽度，默认值：100
- `width`（可选）：: number
- `labelStyle`（可选）：: CSSProperties；label 样式
- `valueStyle`（可选）：: CSSProperties；value 样式
- `size`（可选）：: 'default' | 'small'
- `direction`（可选）：: 'vertical' | 'horizontal' | 'auto'；label&value 方向布局
- `gutter`（可选）：: [number, number]；网格布局间距，默认值：[10, 0]
- `hiddenValueHover`（可选）：: boolean；隐藏 value hover效果

### TLabelValueItem

- `label`（必填）：: string | ReactElement
- `value`（可选）：: string | number | ReactElement
- `span`（可选）：: 1 | 2 | 3 | 4 | 6 | 12；根据LabelValueRender.column配置，当前item占几列
- `hidden`（可选）：: boolean；是否隐藏
- `ellipsis`（可选）：: boolean；超出宽度是否隐藏
- `required`（可选）：: boolean；是否添加必填标识
- `tips`（可选）：: string；添加说明标签
- `onClick`（可选）：: (e) => void；value 点击事件
- `hideTip`（可选）：: boolean；关闭tooltip功能
- `valueNoWrapper`（可选）：: boolean；value 渲染不使用 TextOverflow 包裹
- `labelStyle`（可选）：: CSSProperties
- `valueStyle`（可选）：: CSSProperties
- `style`（可选）：: CSSProperties

### TLabelValueRenderItem

- `grid`（必填）：: number
- `isLast`（可选）：: boolean

## 使用规则与行为

- 定义一行显示几列, 默认值：4
- 强制定义一行显示几列，不考虑响应式
- 数据源配置
- 超过宽度将自动省略，默认值：true
- 是否添加边框 @deprecated 已过期，请使用 bordered
- 是否添加边框
- label对齐方式
- label 宽度，默认值：100
- label 样式
- value 样式

## 默认值线索

- `bordered => bordered`

## 基础示例

```tsx
import { LabelValueRender, type LabelValueRenderProps } from '@flatbiz/antd/label-value-render';

const props: LabelValueRenderProps = {
  // 按业务传入必要参数
};

<LabelValueRender {...props} />;
```

## 源码索引

- `src/label-value-render/index.ts`
- `src/label-value-render/label-value.tsx`
- `src/label-value-render/types.ts`
- `src/label-value-render/utils.ts`

## 给 LLM 的注意事项

- 优先使用 `@flatbiz/antd/label-value-render` 或主入口 `@flatbiz/antd` 的公开导出，不要引用内部实现文件。
- 当 Props 与 antd 原组件同名能力冲突时，以本模块导出的 Props 类型为准。
- 若文档未覆盖某个边缘参数，请读取上方源码索引中的类型定义和 JSDoc。