cgreact-layui/types/cgreact-type-icon.ts

CGReact基于Layui样式的组件库

/** IconState并无复杂数据结构*/
type CGReactIconType = string | "icon-loading-circle" | "icon-loading-point" | "icon-face-smile" | "icon-heart-fill" | "icon-heart" | "icon-add-circle-fine";
type NamedColor = | "aliceblue" | "antiquewhite" | "aqua" | "aquamarine" | "azure" | "beige" | "bisque" | "black" | "blanchedalmond" | "blue" | "blueviolet" | "brown" | "burlywood" | "cadetblue" | "chartreuse" | "chocolate" | "coral" | "cornflowerblue" | "cornsilk" | "crimson" | "cyan" | "darkblue" | "darkcyan" | "darkgoldenrod" | "darkgray" | "darkgreen" | "darkgrey" | "darkkhaki" | "darkmagenta" | "darkolivegreen" | "darkorange" | "darkorchid" | "darkred" | "darksalmon" | "darkseagreen" | "darkslateblue" | "darkslategray" | "darkslategrey" | "darkturquoise" | "darkviolet" | "deeppink" | "deepskyblue" | "dimgray" | "dimgrey" | "dodgerblue" | "firebrick" | "floralwhite" | "forestgreen" | "fuchsia" | "gainsboro" | "ghostwhite" | "gold" | "goldenrod" | "gray" | "green" | "greenyellow" | "grey" | "honeydew" | "hotpink" | "indianred" | "indigo" | "ivory" | "khaki" | "lavender" | "lavenderblush" | "lawngreen" | "lemonchiffon" | "lightblue" | "lightcoral" | "lightcyan" | "lightgoldenrodyellow" | "lightgray" | "lightgreen" | "lightgrey" | "lightpink" | "lightsalmon" | "lightseagreen" | "lightskyblue" | "lightslategray" | "lightslategrey" | "lightsteelblue" | "lightyellow" | "lime" | "limegreen" | "linen" | "magenta" | "maroon" | "mediumaquamarine" | "mediumblue" | "mediumorchid" | "mediumpurple" | "mediumseagreen" | "mediumslateblue" | "mediumspringgreen" | "mediumturquoise" | "mediumvioletred" | "midnightblue" | "mintcream" | "mistyrose" | "moccasin" | "navajowhite" | "navy" | "oldlace" | "olive" | "olivedrab" | "orange" | "orangered" | "orchid" | "palegoldenrod" | "palegreen" | "paleturquoise" | "palevioletred" | "papayawhip" | "peachpuff" | "peru" | "pink" | "plum" | "powderblue" | "purple" | "rebeccapurple" | "red" | "rosybrown" | "royalblue" | "saddlebrown" | "salmon" | "sandybrown" | "seagreen" | "seashell" | "sienna" | "silver" | "skyblue" | "slateblue" | "slategray" | "slategrey" | "snow" | "springgreen" | "steelblue" | "tan" | "teal" | "thistle" | "tomato" | "transparent" | "turquoise" | "violet" | "wheat" | "white" | "whitesmoke" | "yellow" | "yellowgreen";
type CGReactIconState = {
	icon?: CGReactIconType | string, //icon的类型，也可以配置图片路径
	size?: "small" | "middle" | "large" | number, //icon的大小
	color?: "default" | "simple" | "normal" | "warm" | "danger" | "black" | NamedColor | string,//icon的颜色
	theme?: "light" | "dark", //背景主题
	labelLeft?: string, //左侧文字
	labelRight?: string, //右侧文字
	labelTop?: string,//顶部文字
	labelBottom?: string,//底部文字
}; //默认icon样式类型
interface IconState extends CGReactIconState {}

/** ButtonProps在CGReactCompProp的基础上增加button配置*/
type CGReactIconProp = {
	data?: CGReactIconState //使用Button数据类型,
	layout?: CGReactIconLayout //布局数据类型
};//参数类型
type CGReactIconLayout = {
	layoutDebug?: "debug-off" | "only-layout" | "with-content", //用于调试时显示布局的框子默认false不显示
	layoutName?: string, //布局的名称属性，渲染为item-name
	layoutWidth?: number | CGReactLength | CGReactGrid | MediaResponse,//布局宽度，水平方向支持删格系统，只有宽度才需要响应式布局
	align?: CGReactAlign //布局相对于父布局的对其方式，其优先级高于父布局的gravity配置
}//meun可以配置的布局参数
interface IconProps extends CGReactIconProp, CGReactIconLayout {}

/**回调函数数据类型*/
interface IconConfig
{
	type: "img" | "icon" ,//图标生成元素的类型可能时<img>或者<i>
	style: "small" | "middle" | "large",//样式类型
	icon: string, //unicode编码，如果时icon则标识layui的类名，如果时img则这里是url
	size: number, //大小统一为数字，单位px
	font: number,//字体大小
	color: string,//颜色统一为字符串，十六进制字符串如#ffeeff,
	background: string,//背景颜色
	height: number,//logo的高度动态计算
	labelL: string, //左侧文字
	labelR: string,//右侧文字
	labelT: string,//顶部文字
	labelB: string,//底部文字
}