antd tabs固定宽度居中

1,621 阅读1分钟

antd tabs修改下方横线的位置 (antdv同理)

默认样式

image.png

1.通过div.ant-tabs-ink-bar 这个class的元素来控制下面的横线
2.线的样式

.ant-tabs-ink-bar {
    position: absolute;
    bottom: 0;
    left: xxx;
}
// 然后根据点击的标签位置更新他的left: xxx
// left是总宽度的left值,并且标签数量不同,这个值是需要修改的

效果:

image.png 3.宽度默认是选中标签的宽度(width+padding) 4.如何保持横线固定宽度居中: 前提:必须保证每个tab的宽度是一样的,这样才能让每个tab居中

    .ant-tabs-ink-bar{
      left: 15%;
      width: 32px;
      background-color: @blue-1;
    }

其他问题:

tab-pane的内容为什么不展示