uniapp中uview组件库丰富的tab标签

目录

[Tag 标签](#Tag 标签)

基本使用

#自定义主题

#圆形标签

#镂空标签

#镂空带背景色

#自定义尺寸

#可关闭标签

#带图片和图标

[#单选标签 和 多选标签](#单选标签 和 多选标签)


Tag 标签

tag组件一般用于标记和选择,我们提供了更加丰富的表现形式,能够较全面的涵盖您的使用场景

基本使用

  • 通过type参数设置主题类型,默认为primary

  • 属性text设置标签内容

#自定义主题

复制代码
<u-tag text="标签"></u-tag>
<u-tag text="标签" type="warning"></u-tag>
<u-tag text="标签"type="success"></u-tag>
<u-tag text="标签" type="error"></u-tag>

#圆形标签

  • 类似胶囊形状


#镂空标签

复制代码
<u-tag text="标签" plain > </u-tag>
<u-tag text="标签" type="warning" plain></u-tag>
<u-tag text="标签" type="success" plain></u-tag>
<u-tag text="标签" type="error" plain></u-tag>

#镂空带背景色

  • 添加plainFill属性镂空带背景色




#自定义尺寸

  • size属性为您提供了三种规格的标签大小,默认中等。



#可关闭标签

  • tag在右上角提供了删除标签的样式

    <u-tag text="标签" size="mini" closable :show="close1" @close="close1 = false">
    <u-tag text="标签" type="warning" closable :show="close2" @close="close2 = false">
    <u-tag text="标签" type="success" plain size="large"
    closable :show="close3" @close="close3 = false">

#带图片和图标

复制代码
<u-tag text="标签" size="mini" icon="map" plain></u-tag>
<u-tag text="标签" type="warning" icon="tags-fill"></u-tag>
<u-tag text="标签" type="success" plain size="large"
icon="https://cdn.uviewui.com/uview/example/tag.png"></u-tag>

#单选标签 和 多选标签

  • 我们为您提供了单选和多选的事件,您可以在事件中获取参数列表

相关推荐
Dumbness14 小时前
订阅消息弹窗必须在用户点击里调:联调实验室里 timing 和 Mock 支付通知踩的坑
javascript·uni-app
码间留白2 天前
uni-app 鸿蒙离线打包:一个改动从源码到真机要穿过几条链
uni-app·鸿蒙·deveco·离线打包·uts插件
多客:duokelijie2 天前
代练订单系统选型思路:跨品类游戏接入、订单分层管理、自动结算逻辑拆解!
数据库·mysql·微信小程序·前端框架·uni-app·php·持续部署
码间留白3 天前
鸿蒙端对接 BLE 血压计:从一次握手到读数入库(二)设备篇
物联网·uni-app·鸿蒙·蓝牙ble·血压计
华玥作者4 天前
Vue 3 + TypeScript + uni-app 组件库推荐:hy-app(华玥组件库)
vue.js·typescript·uni-app
FinelyYang4 天前
uniapp使用kkfileview在线预览ppt,excel,word,pdf类型文件
pdf·uni-app·powerpoint
2501_916008894 天前
iPhone 设备信息查看,用 KeyMob 看型号、序列号、电池健康和 UDID
android·ios·小程序·https·uni-app·iphone·webview
ModyQyW4 天前
vite-plugin-uni-manifest 0.7:在 uni-app 读取之前生成
前端·uni-app
lyz2468594 天前
uniapp vue3 小程序开发注意事项
uni-app
雪芽蓝域zzs5 天前
WebStorm Uniapp Support + Uniapp Tool + Uniappx Language Service讲解
vue.js·uni-app·webstorm