elementUI中在Tabs标签页的标题文字后面添加elementUI自带图标和自定义图标
2021/4/28 18:28:27
本文主要是介绍elementUI中在Tabs标签页的标题文字后面添加elementUI自带图标和自定义图标,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
1.添加自带图标:下箭头
<el-tab-pane name="first"> <span slot="label"> <span class="span-box"> <span>最新发布</span> <span class="el-icon-arrow-down"></span> </span> </span> </el-tab-pane>
2.添加自定义图标
html
<el-tab-pane name="first"> <span slot="label"> <span class="span-box"> <span>预警</span> <el-tooltip class="item" effect="dark" content="2" placement="bottom-start" > <span class="btn-bell-badge"> <span class="num">2</span> </span> </el-tooltip> </span> </span> </el-tab-pane>
css
<style lang="stylus" scoped> .span-box { display: flex; justify-content: flex-start; align-items: center; .btn-bell-badge { width: 26px; height: 18px; margin-left 5px; line-height 18px border-radius: 15px; background: #f56c6c; .num { display: block; width: 100%; text-align: center; font-size: 12px; color: #fff; } } } </style>
这篇关于elementUI中在Tabs标签页的标题文字后面添加elementUI自带图标和自定义图标的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-07-04TiDB 资源管控的对撞测试以及最佳实践架构
- 2024-07-03万字长文聊聊Web3的组成架构
- 2024-07-02springboot项目无法注册到nacos-icode9专业技术文章分享
- 2024-06-26结对编程到底难不难?答案在这里
- 2024-06-19《2023版Java工程师》课程升级公告
- 2024-06-15matplotlib作图不显示3D图,怎么办?
- 2024-06-1503-Loki 日志监控
- 2024-06-1504-让LLM理解知识 -Prompt
- 2024-06-05做软件测试需要懂代码吗?
- 2024-06-0514-ShardingSphere的分布式主键实现