Bedrock + Material Design

Tabs

The MDC Tabs component contains components which are used to create spec-aligned tabbed navigation components adhering to the Material Design tabs guidelines. These components are:

  • mdc-tab: The individual tab elements
  • mdc-tab-bar: The main component which is composed of mdc-tab elements
  • mdc-tab-bar-scroller: The component which controls the horizontal scrolling behavior of an mdc-tab-bar that overflows its container

Default tab

#

A default tab.

Basic Tab Bar with custom label color

#

A tab with a custom label.

Tabs scroller

#

Icon Tab Labels

#

A tab with icon labels.

Custom Icon Tab Labels

#

A custom tab with icon labels.

Icon Tab Labels And Title

#

A tab with icon labels and text labels as titles.

Custom Icon Tab Labels And Title

#

A custom tab with icon labels and text labels as titles.

Custom Indicator colors

#

A tab with custom indicator colors.

Tabs Within Toolbar

#

A toolbar with tabs.

Prototype navigation

Press Ctrl + M to toggle this navigation or click here.