动态设置文本宽度

Question

我创建了一个选项卡组件，我无法实现的一个部分是，我只需要设置文本宽度，而不是 TabIndicator 来完全占用选项卡容器的长度。

由于每个文本都有不同的宽度，所以我使用 js 来计算它，但不是获取宽度，而是获取容器宽度。

如何使活动的 TabIndicator 行仅从文本开头扩展到文本结尾。

我能够实现容器宽度。为其添加沙盒链接。

Sandbox

Answer 1

这很简单。在计算指标的开始和宽度时，您需要减去额外的填充。
.tab 有 6px 水平边距
.tab-default-container 在桌面上有 1rem 填充，它是 16px
。 所以更改代码如下：

if (tabMeta && tabsMeta) {
 startValue = tabMeta.left - tabsMeta.left + tabsMeta.scrollLeft + 22; //16+6=22
}

//22 from both sides = 44px tor remove.
const newIndicatorStyle = {
   left: startValue,
   width: tabMeta ? tabMeta.width - 44 : 0
};

更新了sandbox。
注意：您使用了相对单位rem，它可能在不同的设置和设备上评估不同，它可能不是 1rem=16px。

rem（代表“root em”）是文档根元素的字体大小。

考虑到这一点，计算也是如此。