物料组件网站-标签上方带有标签的图标和仅限内容的指示器

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元素内移动。

Example Codepen