FQTag 标签

介绍

用于标记和分类的标签。

用法

基本引入

import { FQTag } from '@fq/fq-weapp-ui';

组件依赖的样式文件（仅按需引用时需要）

import '@fq/fq-weapp-ui/dist/styles/components/tag.scss';

基础用法

<FQTag size='large'>标签内容</FQTag>
<FQTag>标签内容</FQTag>
<FQTag size='small'>标签内容</FQTag>

边框模式

<FQTag bordered>标签内容</FQTag>
<FQTag bordered round>标签内容</FQTag>

圆角模式&自定义圆角

<FQTag size='large' round>标签内容</FQTag>
<FQTag round>标签内容</FQTag>
<FQTag size='small' round>标签内容</FQTag>
<FQTag size='large' round={16}>标签内容</FQTag>

自定义图标

<FQTag icon={<Image className='tag-custom-icon' src='https://ifengqun-applet-code.oss-cn-shenzhen.aliyuncs.com/fq-weapp-ui/base/image/success-icon.png' />}>标签内容</FQTag>

多彩标签

<FQTag presetColor='green'>green</FQTag>
<FQTag presetColor='red'>red</FQTag>
<FQTag presetColor='orange'>orange</FQTag>
<FQTag presetColor='green' bordered>green</FQTag>
<FQTag presetColor='red' bordered>red</FQTag>
<FQTag presetColor='orange' bordered>orange</FQTag>
<FQTag color='#fff' backgroundColor='#00B68F'>自定义颜色</FQTag>

图片模式

<FQTag type='image' url='https://applet.ifengqun.com/fq-mall/prod/sort/globalbuy-icon.png' size='large' />
<FQTag type='image' url='https://applet.ifengqun.com/fq-mall/prod/sort/globalbuy-icon.png' />
<FQTag type='image' url='https://applet.ifengqun.com/fq-mall/prod/sort/globalbuy-icon.png' size='small' />

API

基础属性

参数	说明	类型	默认值	版本
size	设置标签大小	large / middle / small	middle
type	设置标签类型，text 为文本标签，image 为图片标签	text / image	text
onClick	点击事件	(event: ITouchEvent) => void	-

type='text'属性

参数	说明	类型	默认值	版本
backgroundColor	设置背景颜色	string	-
borderColor	设置边框颜色	string	-
bordered	是否显示边框	boolean	false
color	设置文字颜色	string	-
icon	设置图标	ReactNode	-
presetColor	预设颜色	green / red / orange	green
round	是否为圆角或自定义圆角	boolean / number	false

type='image'属性

参数	说明	类型	默认值	版本
url	设置图片地址	string	-