14.0.0 • Published 4 months ago

@material/tab-indicator v14.0.0

Weekly downloads
37,720
License
MIT
Repository
github
Last release
4 months ago

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

@import "@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--underline class
  • Icon, indicated by the mdc-tab-indicator__content--icon class

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

Sliding Underline Indicator

<span class="mdc-tab-indicator">
  <span class="mdc-tab-indicator__content mdc-tab-indicator__content--underline"></span>
</span>

Fading Icon Indicator

You can use Material Icons from Google Fonts within your Fading Icon Indicator, or you can use your own icons.

<span class="mdc-tab-indicator mdc-tab-indicator--fade">
  <span class="mdc-tab-indicator__content mdc-tab-indicator__content--icon material-icons">star</span>
</span>

Sliding Icon Indicator

<span class="mdc-tab-indicator">
  <span class="mdc-tab-indicator__content mdc-tab-indicator__content--icon material-icons">star</span>
</span>

Style Customization

CSS Classes

CSS ClassDescription
mdc-tab-indicatorMandatory. Contains the tab indicator content.
mdc-tab-indicator__contentMandatory. Denotes the tab indicator content.
mdc-tab-indicator--activeOptional. Visually activates the indicator.
mdc-tab-indicator--fadeOptional. Sets up the tab indicator to fade in on activation and fade out on deactivation.
mdc-tab-indicator__content--underlineOptional. Denotes an underline tab indicator.
mdc-tab-indicator__content--iconOptional. Denotes an icon tab indicator.

NOTE: Exactly one of the --underline or --icon content modifier classes should be present.

Sass Mixins

To customize the tab indicator, use the following mixins.

MixinDescription
mdc-tab-indicator-surfaceMandatory. Must be applied to the parent element of the mdc-tab-indicator.
mdc-tab-indicator-underline-color($color)Customizes the color of the underline.
mdc-tab-indicator-icon-color($color)Customizes the color of the icon subelement.
mdc-tab-indicator-underline-height($height)Customizes the height of the underline.
mdc-tab-indicator-icon-height($height)Customizes the height of the icon subelement.
mdc-tab-indicator-underline-top-corner-radius($radius)Customizes the top left and top right border radius of the underline child element.

MDCTabIndicator Methods

Method SignatureDescription
activate(previousIndicatorClientRect: ClientRect) => voidActivates the tab indicator.
deactivate() => voidDeactivates the tab indicator.
computeContentClientRect() => ClientRectReturns 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 SignatureDescription
addClass(className: string) => voidAdds a class to the root element.
removeClass(className: string) => voidRemoves a class from the root element.
setContentStyleProp(property: string, value: string) => voidSets the style property of the content element.
computeContentClientRect() => ClientRectReturns the content element's bounding client rect.

MDCTabIndicatorFoundation

Method SignatureDescription
handleTransitionEnd(evt: Event) => voidHandles the logic for the "transitionend" event on the root element.
activate(previousIndicatorClientRect: ClientRect) => voidActivates the tab indicator.
deactivate() => voidDeactivates the tab indicator.
computeContentClientRect() => ClientRectReturns the content element's bounding client rect.
14.0.0

2 years ago

13.0.0

3 years ago

12.0.0

3 years ago

11.0.0

3 years ago

10.0.0

3 years ago

9.0.0

3 years ago

8.0.0

3 years ago

7.0.0

4 years ago

6.0.0

4 years ago

5.1.0

4 years ago

5.0.0

4 years ago

4.0.0

4 years ago

4.0.0-canary.1

5 years ago

4.0.0-canary.0

5 years ago

4.0.0-alpha.0

5 years ago

3.1.0

5 years ago

3.1.0-alpha.0

5 years ago

3.0.0

5 years ago

3.0.0-alpha.1

5 years ago

3.0.0-alpha.0

5 years ago

2.3.0

5 years ago

2.1.0

5 years ago

1.1.0

5 years ago

1.0.0

5 years ago

1.0.0-1

5 years ago

1.0.0-0

5 years ago

0.43.0

5 years ago

0.41.0

5 years ago

0.40.1

5 years ago

0.40.0

6 years ago

0.39.3

6 years ago

0.39.2

6 years ago

0.39.1

6 years ago

0.39.0

6 years ago

0.39.0-0

6 years ago

0.38.0

6 years ago