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

Example Codepen

Material 组件 Web - 标签上方带有图标的选项卡和仅限于内容的指示器

Material Component Web - Tabs with icons above labels and indicators restricted to content

material-components-web