@material/tab-indicator
Advanced tools
A Tab Indicator is a visual guide that shows which Tab is active.
npm install @material/tab-indicator
<span class="mdc-tab-indicator">
<span class="mdc-tab-indicator__content"></span>
</span>
@use "@material/tab-indicator/mdc-tab-indicator";
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.
Add the mdc-tab-indicator--active class to the mdc-tab-indicator element to make the Tab Indicator active.
The Tab Indicator may be represented in one of two ways:
mdc-tab-indicator__content--underline classmdc-tab-indicator__content--icon classNOTE: One of these classes must be applied to the Tab Indicator's content element.
The Tab Indicator may transition in one of two ways:
mdc-tab-indicator--fade class<span class="mdc-tab-indicator">
<span class="mdc-tab-indicator__content mdc-tab-indicator__content--underline"></span>
</span>
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.
<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>
<span class="mdc-tab-indicator">
<span class="mdc-tab-indicator__content mdc-tab-indicator__content--icon material-icons" aria-hidden="true">star</span>
</span>
| 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.
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. |
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. |
react-tabs is a package for creating accessible and customizable tab components in React. It provides a simple API for creating tabbed interfaces and includes features like keyboard navigation and ARIA attributes. Compared to @material/tab-indicator, react-tabs is more focused on accessibility and React integration.
Bootstrap is a popular front-end framework that includes a wide range of components, including tabs. Bootstrap's tab component provides a simple way to create tabbed interfaces with various styles and animations. While @material/tab-indicator is specifically for Material Design, Bootstrap offers a more general-purpose solution with a different design aesthetic.
semantic-ui-react is the official React integration for Semantic UI, a UI framework that provides a variety of components, including tabs. The tab component in semantic-ui-react is highly customizable and integrates well with React applications. Compared to @material/tab-indicator, semantic-ui-react offers a broader range of UI components and a different design philosophy.
FAQs
The Material Components for the web tab indicator component
The npm package @material/tab-indicator receives a total of 323,388 weekly downloads. As such, @material/tab-indicator popularity was classified as popular.
We found that @material/tab-indicator demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 15 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
/Security News
Socket found a malicious Intercom PHP package on Packagist using Composer plugin execution to steal credentials and spread across ecosystems.
Research
/Security News
Compromised intercom-client@7.0.4 npm package is tied to the ongoing Mini Shai-Hulud worm attack targeting developer and CI/CD secrets.
Research
Socket detected a malicious supply chain attack on PyPI package lightning versions 2.6.2 and 2.6.3, which execute credential-stealing malware on import.