material-components-web - Material Component Web - 标签上方带有图标的选项卡和仅限于内容的指示符

Question

从 0.38.0 版开始，不推荐使用 mdc-tabs。现在，标签上方带有图标的选项卡和指示符仅限于内容。

当我使用带有标签上方图标的选项卡时，如何将指示器下划线的宽度调整到所选选项卡。

谢谢。

Answer 1

通过调整其在 DOM 结构中的位置，可以轻松地将选项卡指示器更改为跨越整个选项卡或仅选项卡内容。

这是一个标签的标记，其指示器跨越整个标签：

<button class="mdc-tab mdc-tab--stacked" role="tab" aria-selected="false" tabindex="-1">
  <span class="mdc-tab__content">
    <span class="mdc-tab__icon material-icons">access_time</span>
    <span class="mdc-tab__text-label">Recents</span>
  </span>
  <span class="mdc-tab-indicator">
    <span class="mdc-tab-indicator__content mdc-tab-indicator__content--underline"></span>
  </span>
  <span class="mdc-tab__ripple"></span>
</button>

这是相同的标记，经过调整后，指示器仅涵盖内容：

<button class="mdc-tab mdc-tab--stacked" role="tab" aria-selected="false" tabindex="-1">
  <span class="mdc-tab__content">
    <span class="mdc-tab__icon material-icons">access_time</span>
    <span class="mdc-tab__text-label">Recents</span>
    <span class="mdc-tab-indicator">
      <span class="mdc-tab-indicator__content mdc-tab-indicator__content--underline"></span>
    </span>
  </span>
  <span class="mdc-tab__ripple"></span>
</button>

主要区别在于标签指示符 DOM 在mdc-tab__content元素内移动。

示例代码笔