@flatbiz/antd
Version:
50 lines (47 loc) • 1.57 kB
TypeScript
import { FC } from 'react';
export type TagListRenderValue = string | number | boolean;
export type TagListRenderDataItem = {
label: string;
value: TagListRenderValue;
color?: string;
};
export type TagListRenderProps = {
dataList: TagListRenderDataItem[];
/** 颜色配置数据,例如:{ 1:'red', 2: 'blue'} key值与 dataList中value相同 */
colorMap?: Record<string | number, string>;
value?: TagListRenderValue | TagListRenderValue[];
/** 是否强制匹配,默认值false */
forceMatch?: boolean;
/** 最大显示Tag数量,超出折叠隐藏 */
maxShowCount?: number;
/** 触发maxShowCount后,被折叠的内容是否显示完整tag,默认值:false */
foldShowAllTag?: boolean;
/** 所有tag背景匹配此颜色,在colorMap为空、dataList中未配置color的情况下有效果 */
tagColor?: string;
};
/**
* 在列表数据dataList中通过value匹配数据,以Tag形式展示
* ```
* 1. forceMatch: 是否强制匹配(默认值false)
* - false: 匹配不到显示value值,
* - true:匹配不到不显示
* 2. value 与 dataList中label、value任一相等,都可匹配
*
* 用法1:
* <TagListRender
* dataList=[{ label: '启用', value: 1 }]
* colorMap={{ 1:'red', 2: 'blue'}}
* value={1} />
* =>
* <Tag color={'red'}>启用</Tag>
*
* 用法2
* <TagListRender
* dataList=[{ label: '启用', value: 1. color: 'red' }]
* value="启用" />
* =>
* <Tag color={'red'}>启用</Tag>
* ```
*/
export declare const TagListRender: FC<TagListRenderProps>;
export {};