Tabs的underline如何自定义宽度且能居中修改样式后的文字下面

[ZhangMingZhao1]

• I have searched the issues of this repository and believe that this is not a duplicate.

What problem does this feature solve?

更好的扩展tabs

What does the proposed API look like?

当修改了tabbar的宽度后，文字由原来的各占一半变成偏向居中一点，但是underline的线还是一半的宽度，改了underline的线宽度也不能跟在文字的正下方。

[ZhangMingZhao1]

比如想要下面这个样式：

我修改覆盖样式后只能这样：

am-tabs-default-bar-underline 是绝对定位的，要修改好这个感觉还要修改js事件？

[ilvliu]

我有一个解决方案：

1. 先计算出你需要偏移的量 m （m可以达到居中）
2. 查看每次 antd 自动偏移的量 n
3. onChange 后 手动更新 left为 n * index + m
4. 需要注意回到index = 0 时 需要手动指定 left 为 m

<Tabs tabs={tabs} onChange={(tab, index) => { this.changeTabs(tab, index); }} tabBarUnderlineStyle={{ borderBottomWidth: 0.7, borderBottomColor: 'rgba(255, 64, 2, 1)', width: '0.3rem', textAlign: 'center', left: '10%' }} />}>

  changeTabs(tab, index) {
    if(index === 0) {
      document.getElementsByClassName('am-tabs-default-bar-underline')[0].style.left = '10%';
    }
    document.getElementsByClassName('am-tabs-default-bar-underline')[0].style.left = 25 * index + 10 + '%';
  }

[xilianxiaoli]

建议官方能支持设置，这是刚需呀

[syhsghr1993]

tabBarUnderlineStyle={{ transform: 'scaleX(0.x)' }}

[LuckyFBB]

tabBarUnderlineStyle={{ transform: 'scaleX(0.x)' }}

good

[hustcer]

tabBarUnderlineStyle={{ transform: 'scaleX(0.x)' }}

Thanks a lot.

[wyh-skr]

设置伪元素就可以了，完美解决
.am-tabs-default-bar-underline {
border: 0;
display: flex;
justify-content: center;
&::after {
content: '';
width: 20%;
height: 4px;
display: block;
background: @primary-color;
}
}

[Xiaocaiji2333]

厄特

[awmleer]

v2 已停止维护了，可以考虑升级一下

[Jennifer249]

.ant-tabs .ant-tabs-ink-bar {
transform: translateX(6px);
}

相对位移