@flatbiz/antd
Version:
118 lines (115 loc) • 3.24 kB
TypeScript
import { CSSProperties, ReactElement } from 'react';
export type TLabelValueItem = {
label: string | ReactElement;
value?: string | number | ReactElement;
/** 根据LabelValueRender.column配置，当前item占几列 */
span?: 1 | 2 | 3 | 4 | 6 | 12;
/** 是否隐藏 */
hidden?: boolean;
/** 超出宽度是否隐藏 */
ellipsis?: boolean;
/** 是否添加必填标识 */
required?: boolean;
/** 添加说明标签 */
tips?: string;
/** value 点击事件 */
onClick?: (e: any) => void;
/** 关闭tooltip功能 */
hideTip?: boolean;
/** value 渲染不使用 TextOverflow 包裹 */
valueNoWrapper?: boolean;
labelStyle?: CSSProperties;
valueStyle?: CSSProperties;
};
export type LabelValueRenderProps = {
className?: string;
style?: CSSProperties;
/**
* 定义一行显示几列, 默认值：4
* ```
* 1. label+value 一组为一列
* 2. 当外层宽度尺寸大于 992px（lg） 时，一行显示几列
* 3. 当外层宽度尺寸小于992px（lg），为xs、sm、md情况下不受column值影响，响应式布局
* 4. 宽度尺寸定义
* xs: 宽度 < 576px
* sm: 宽度 ≥ 576px
* md: 宽度 ≥ 768px
* lg: 宽度 ≥ 992px
* xl: 宽度 ≥ 1200px
* xxl: 宽度 ≥ 1600px
* 5. 列数尺寸定义
* {
* 1: { xs: 24, sm: 24, md: 24, lg: 24, xl: 24, xxl: 24 },
* 2: { xs: 24, sm: 12, md: 12, lg: 12, xl: 12, xxl: 12 },
* 3: { xs: 24, sm: 12, md: 12, lg: 8, xl: 8, xxl: 8 },
* 4: { xs: 24, sm: 12, md: 12, lg: 6, xl: 6, xxl: 6 },
* 6: { xs: 24, sm: 12, md: 8, lg: 6, xl: 4, xxl: 4 },
* 12: { xs: 24, sm: 12, md: 12, lg: 4, xl: 2, xxl: 2 },
* };
* ```
*/
column?: 1 | 2 | 3 | 4 | 6 | 12;
/**
* 强制定义一行显示几列，不考虑响应式
* ```
* 1. 优先级大于column
* 2. 建议优先使用column配置
* ```
*/
forceColumn?: 1 | 2 | 3 | 4 | 6;
/** 数据源配置 */
options: TLabelValueItem[];
/**
* 超过宽度将自动省略，默认值：true
* ```
* 1. 当 direction = vertical时，强制为true
* ```
*/
ellipsis?: boolean;
/**
* 是否添加边框
* @deprecated 已过期，请使用 bordered
*/
border?: boolean;
/** 是否添加边框 */
bordered?: boolean;
/** label对齐方式 */
labelAlign?: "left" | "right" | "center";
/** label 宽度，默认值：100 */
labelWidth?: number | "auto";
width?: number;
/** label 样式 */
labelStyle?: CSSProperties;
/** value 样式 */
valueStyle?: CSSProperties;
size?: "default" | "small";
/**
* label&value 方向布局
* ```
* 1. auto表示当响应式为xs（小屏幕）时为vertical，其他情况为horizontal
* ```
*/
direction?: "vertical" | "horizontal" | "auto";
/**
* 网格布局间距，默认值：[10, 0]
* ```
* 1. border = true 无效
* ```
*/
gutter?: [
number,
number
];
/** 隐藏 value hover效果 */
hiddenValueHover?: boolean;
};
/**
* label+value 列表布局
* ```
* 1. 可设置超出隐藏、必填标识、设置隐藏、添加说明标签等功能
* 2. 可自定义设置占用网格列数
* 3. 内置响应式布局
* ```
*/
export declare const LabelValueRender: (props: LabelValueRenderProps) => import("react").JSX.Element;
export {};