lin-ui icon indicating copy to clipboard operation
lin-ui copied to clipboard

标签页 Tabs 的 l-header-class 及 l-header-line-class 属性无法自定义标签栏样式

Open SpanishOnion opened this issue 4 years ago • 0 comments

设备型号: 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 中的源码来解决这个问题的,希望后续能提供正确的方式来自定义标签栏样式。

相关截图image

SpanishOnion avatar Feb 25 '21 06:02 SpanishOnion