【uview】将tabs组件的标签从文字修改为图标
先看效果:原组件标题是文字:最终效果:标题为图标:先从阿里矢图库里选择自己需要的图标,添加到项目中,然后下载项目文件。具体参考:https://www.uviewui.com/guide/customIcon.html在uniapp项目的根目录创建一个common文件夹,在里面创建css文件夹,将下载好的图标项目文件解压后拷贝到css文件夹下,如图:打开iconfont.css,修改路径:然后将这
·
先看效果:
原组件标题是文字:
最终效果:
标题为图标:
先从阿里矢图库里选择自己需要的图标,添加到项目中,然后下载项目文件。
具体参考:
https://www.uviewui.com/guide/customIcon.html
在uniapp项目的根目录创建一个common文件夹,在里面创建css文件夹,将下载好的图标项目文件解压后拷贝到css文件夹下,如图:
打开iconfont.css,修改路径:
然后将这个css文件引入到APP.vue中。
接着打开uview-ui/components/u-tabs目录下的u-tabs.vue文件,将第十二行的代码注释掉,添加以下代码:
<uni-icons :type="item[name] || item['name']" size="26" customPrefix="custom-icon"></uni-icons>
注意:customPrefix属性表示添加的图标是自定义图标。值为阿里矢量图标项目的Font Family
,根据自己的命名修改即可。
最后在页面使用tabs组件时,list数组中的元素name值为图标项目的font-class:
到此效果就出来了。
成品图:
更多推荐
已为社区贡献2条内容
所有评论(0)