lin-ui
lin-ui copied to clipboard
标签页 Tabs 的 l-header-class 及 l-header-line-class 属性无法自定义标签栏样式
设备型号: iphone6
LinUI 版本: 0.9.4
微信小程序基础库版本: 2.14.0
问题描述及重现步骤:
使用标签页组件 <l-tabs></l-tabs>
时,如果按照文档设置 l-header-class
以及 l-header-line-class
属性,自定义标签栏的样式,圆角、背景色、高度、边框线等样式是无法生效的,查找原因后发现,是由于 tabs
组件的 index.wxss
中设置了以下样式所导致的:
.l-tabs{display:flex;border-radius:8rpx;box-sizing:border-box;overflow:hidden;flex-direction:column;height:100%}
.l-tabs .l-tabs-header{display:flex;width:100%;flex-direction:row;background:#fff;align-items:center}
.l-placement-bottom .l-tabs-header,.l-placement-top .l-tabs-header{height:80rpx}
.l-placement-top .l-tabs-header-line{border-bottom:1px solid #f3f3f3}
如果需要自定义标签栏的圆角、背景色、高度、边框线,则需要覆盖以上样式:
.l-tabs{border-radius: 0}
.l-tabs .l-tabs-header{ background:black }
.l-placement-bottom .l-tabs-header, .l-placement-top .l-tabs-header{ height:100rpx }
.l-placement-top .l-tabs-header-line{ border:0 }
由于 tabs
组件提供的两个属性优先级很低,所以即使设置了自定义样式也会被组件自身的样式覆盖,所以目前是通过直接修改 miniprogram_npm
中的源码来解决这个问题的,希望后续能提供正确的方式来自定义标签栏样式。
相关截图: