Tab Indicator
A Tab Indicator is a visual guide that shows which Tab is active.
Design & API Documentation
Installation
npm install @material/tab-indicator
Basic Usage
HTML Structure
<span class="mdc-tab-indicator">
<span class="mdc-tab-indicator__content"></span>
</span>Styles
@use "@material/tab-indicator/mdc-tab-indicator";JavaScript Instantiation
import {MDCTabIndicator} from '@material/tab-indicator';
const tabIndicator = new MDCTabIndicator(document.querySelector('.mdc-tab-indicator'));See Importing the JS component for more information on how to import JavaScript.
Variants
Active Indicator
Add the mdc-tab-indicator--active class to the mdc-tab-indicator element to make the Tab Indicator active.
Indicator Types and Transitions
The Tab Indicator may be represented in one of two ways:
- Underline, indicated by the
mdc-tab-indicator__content--underlineclass - Icon, indicated by the
mdc-tab-indicator__content--iconclass
NOTE: One of these classes must be applied to the Tab Indicator's content element.
The Tab Indicator may transition in one of two ways:
- Slide, the default behavior
- Fade, indicated by the
mdc-tab-indicator--fadeclass
Sliding Underline Indicator
<span class="mdc-tab-indicator">
<span class="mdc-tab-indicator__content mdc-tab-indicator__content--underline"></span>
</span>Icon Indicators
We recommend using Material Icons from Google Fonts:
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>However, you can also use SVG, Font Awesome, or any other icon library you wish.
Remember to include aria-hidden="true", since the active indicator is already signified via the
aria-selected attribute on the tab.
Fading Icon Indicator
<span class="mdc-tab-indicator mdc-tab-indicator--fade">
<span class="mdc-tab-indicator__content mdc-tab-indicator__content--icon material-icons" aria-hidden="true">star</span>
</span>Sliding Icon Indicator
<span class="mdc-tab-indicator">
<span class="mdc-tab-indicator__content mdc-tab-indicator__content--icon material-icons" aria-hidden="true">star</span>
</span>Style Customization
CSS Classes
| CSS Class | Description |
|---|---|
mdc-tab-indicator |
Mandatory. Contains the tab indicator content. |
mdc-tab-indicator__content |
Mandatory. Denotes the tab indicator content. |
mdc-tab-indicator--active |
Optional. Visually activates the indicator. |
mdc-tab-indicator--fade |
Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation. |
mdc-tab-indicator__content--underline |
Optional. Denotes an underline tab indicator. |
mdc-tab-indicator__content--icon |
Optional. Denotes an icon tab indicator. |
NOTE: Exactly one of the
--underlineor--iconcontent modifier classes should be present.
Sass Mixins
To customize the tab indicator, use the following mixins.
| Mixin | Description |
|---|---|
surface |
Mandatory. Must be applied to the parent element of the mdc-tab-indicator. |
underline-color($color) |
Customizes the color of the underline. |
icon-color($color) |
Customizes the color of the icon subelement. |
underline-height($height) |
Customizes the height of the underline. |
icon-height($height) |
Customizes the height of the icon subelement. |
underline-top-corner-radius($radius) |
Customizes the top left and top right border radius of the underline child element. |
MDCTabIndicator Methods
| Method Signature | Description |
|---|---|
activate(previousIndicatorClientRect?: ClientRect) => void |
Activates the tab indicator. |
deactivate() => void |
Deactivates the tab indicator. |
computeContentClientRect() => ClientRect |
Returns the content element bounding client rect. |
Usage within Web Frameworks
If you are using a JavaScript framework, such as React or Angular, you can create a Tab Indicator for your framework. Depending on your needs, you can use the Simple Approach: Wrapping MDC Web Vanilla Components, or the Advanced Approach: Using Foundations and Adapters. Please follow the instructions here.
MDCTabIndicatorAdapter
| Method Signature | Description |
|---|---|
addClass(className: string) => void |
Adds a class to the root element. |
removeClass(className: string) => void |
Removes a class from the root element. |
setContentStyleProperty(property: string, value: string) => void |
Sets the style property of the content element. |
computeContentClientRect() => ClientRect |
Returns the content element's bounding client rect. |
MDCTabIndicatorFoundation
| Method Signature | Description |
|---|---|
handleTransitionEnd(evt: Event) => void |
Handles the logic for the "transitionend" event on the root element. |
activate(previousIndicatorClientRect?: ClientRect) => void |
Activates the tab indicator. |
deactivate() => void |
Deactivates the tab indicator. |
computeContentClientRect() => ClientRect |
Returns the content element's bounding client rect. |