@flatbiz/antd/dist/label-value-render/index.d.ts

import { CSSProperties, ReactElement } from 'react';

export type TLabelValueItem = {
	label: string | ReactElement;
	value?: string | number | ReactElement;
	/** 根据LabelValueRender.column配置，当前item占几列  */
	span?: 1 | 2 | 3 | 4 | 6;
	/** 是否隐藏 */
	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 },
	 *  };
	 * ```
	 */
	column?: 1 | 2 | 3 | 4 | 6;
	/**
	 * 强制定义一行显示几列，不考虑响应式
	 * ```
	 * 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 {};