Search code examples
material-components-web

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

As of version 0.38.0 mdc-tabs is deprecated. Now the tabs with icons above labels and indicators restricted to content.

How can I adjust the width of the indicator underline to the selected tab when i use tabs with icons above labels.

Thanks.

Solution

  • The Tab Indicator can easily be changed to span either the entire tab or just the tab content by adjusting its placement in the DOM structure.

    Here's the markup of a tab with the indicator spanning the entire tab:

    <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>

    Here's the same markup, adjusted so the indicator spans only the content:

    <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>

    The key difference is that the tab indicator DOM was moved within the mdc-tab__content element.

    Example Codepen