0

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.

Zheyuan Li
  • 71,365
  • 17
  • 180
  • 248
toprawa
  • 43
  • 4

1 Answers1

0

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

Ken Franqueiro
  • 10,559
  • 2
  • 23
  • 40