14.0.0 • Published 5 months ago

@material/tab-bar v14.0.0

Weekly downloads
35,769
License
MIT
Repository
github
Last release
5 months ago

Tab Bar

Tabs organize and allow navigation between groups of content that are related and at the same level of hierarchy. The Tab Bar contains the Tab Scroller and Tab components.

Design & API Documentation

Installation

npm install @material/tab-bar

Basic Usage

HTML Structure

<div class="mdc-tab-bar" role="tablist">
  <div class="mdc-tab-scroller">
    <div class="mdc-tab-scroller__scroll-area">
      <div class="mdc-tab-scroller__scroll-content">
        <button class="mdc-tab mdc-tab--active" role="tab" aria-selected="true" tabindex="0">
          <span class="mdc-tab__content">
            <span class="mdc-tab__icon">heart</span>
            <span class="mdc-tab__text-label">Favorites</span>
          </span>
          <span class="mdc-tab-indicator mdc-tab-indicator--active">
            <span class="mdc-tab-indicator__content mdc-tab-indicator__content--underline"></span>
          </span>
          <span class="mdc-tab__ripple"></span>
        </button>
      </div>
    </div>
  </div>
</div>

Styles

@import "@material/tab-bar/mdc-tab-bar";
@import "@material/tab-scroller/mdc-tab-scroller";
@import "@material/tab-indicator/mdc-tab-indicator";
@import "@material/tab/mdc-tab";

JavaScript Instantiation

import {MDCTabBar} from '@material/tab-bar';

const tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));

See Importing the JS component for more information on how to import JavaScript.

Style Customization

CSS Classes

CSS ClassDescription
mdc-tab-barMandatory.

Sass Mixins

To customize the width of the tab bar, use the following mixin.

MixinDescription
mdc-tab-bar-width($width)Customizes the width of the tab bar.

MDCTabBar Properties and Methods

Method SignatureDescription
activateTab(index: number) => voidActivates the tab at the given index.
scrollIntoView(index: number) => voidScrolls the tab at the given index into view.
Event NameEvent Data StructureDescription
MDCTabBar:activated{"detail": {"index": number}}Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.

Usage within Web Frameworks

If you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar 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.

MDCTabBarAdapter

Method SignatureDescription
scrollTo(scrollX: number) => voidScrolls the Tab Scroller to the given position.
incrementScroll(scrollXIncrement: number) => voidIncrements the Tab Scroller by the given value.
getScrollPosition() => numberReturns the scroll position of the Tab Scroller.
getScrollContentWidth() => numberReturns the width of the Tab Scroller's scroll content element.
getOffsetWidth() => numberReturns the offsetWidth of the root element.
isRTL() => booleanReturns if the text direction is RTL.
activateTabAtIndex(index: number, clientRect: ClientRect) => voidActivates the Tab at the given index with the given clientRect.
deactivateTabAtIndex(index) => voidDeactivates the Tab at the given index.
focusTabAtIndex(index: number) => voidFocuses the Tab at the given index.
getTabIndicatorClientRectAtIndex(index: number) => ClientRectReturns the client rect of the Tab at the given index.
getTabDimensionsAtIndex(index) => MDCTabDimensionsReturns the dimensions of the Tab at the given index.
getTabListLength() => numberReturns the number of child Tab components.
getActiveTabIndex() => numberReturns the index of the active Tab.
getFocusedTabIndex() => numberReturns the index of the focused Tab.
getIndexOfTab(tab: MDCTab) => numberReturns the index of the given Tab instance.
notifyTabActivated(index: number) => voidEmits the MDCTabBar:activated event.

MDCTabBarFoundation

Method SignatureDescription
activateTab(index: number) => voidActivates the Tab at the given index.
handleKeyDown(evt: Event) => voidHandles the logic for the "keydown" event.
handleTabInteraction(evt: Event) => voidHandles the logic for the "MDCTab:interacted" event.
scrollIntoView(index: number) => voidScrolls the Tab at the given index into view.
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

3.2.0

5 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.2.0

5 years ago

2.1.1

5 years ago

2.1.0

5 years ago

2.0.0

5 years ago

1.1.1

5 years ago

1.1.0

5 years ago

1.0.1

5 years ago

1.0.0

5 years ago

1.0.0-1

5 years ago

1.0.0-0

5 years ago

0.44.1

5 years ago

0.44.0

5 years ago

0.43.1

5 years ago

0.43.0

5 years ago

0.42.0

5 years ago

0.41.0

5 years ago

0.40.1

6 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.1

6 years ago

0.38.0

6 years ago