Tabs

Tabbed navigation components

Tabs Demo


Routed Tabs Demo


Tabs with Icons Demo


First tab

Tab with Scroller Demo

API

Directive: MdcTabBarDirective

Selector: [mdcTabBar]

Directive for a tab bar. This directive must have mdcTab, or mdcTabRouter children. The tab bar can optionally be embedded inside an mdcTabBarScroller.

PropertyDescription
@Output()
tabChange
EventEmitter<MdcTabChange>

Event emitted when the actived tab changes.

Directive: MdcTabBarScrollerInnerDirective

Selector: [mdcTabBarScrollerInner]

Directive for the icon of the back or forward button of a tab bar scroller. Use this directive on a child element of mdcTabBarScrollerBack, and mdcTabBarScrollerForward.

Directive: MdcTabBarScrollerBackDirective

Selector: [mdcTabBarScrollerBack]

Directive for the 'back' button of a tab bar scroller. Must be the first child of an mdcTabBarScroller. Embed an mdcTabBarScrollerInner inside this directive for the actual icon.

Directive: MdcTabBarScrollerForwardDirective

Selector: [mdcTabBarScrollerForward]

Directive for the 'forward' button of a tab bar scroller. Must be the last child of an mdcTabBarScroller. Embed an mdcTabBarScrollerInner inside this directive for the actual icon.

Directive: MdcTabBarScrollerFrameDirective

Selector: [mdcTabBarScrollerFrame]

Directive for the 'frame' part (containing the tab bar) of a tab bar scroller. Must be the child of an mdcTabBarScroller, and have an mdcTabBar as child.

Directive: MdcTabBarScrollerDirective

Selector: [mdcTabBarScroller]

Directive for a scrollable tab bar. Add mdcTabBarScrollerBack, mdcTabBarScrollerFrame, and mdcTabBarScrollerForward as children for respectively the back button, scrollable tab bar, and forward button.

Directive: MdcTabIconDirective

Selector: [mdcTabIcon]

Directive for an icon when having a tab bar with icons. This directive must be used as a child of an mdcTab, or mdcTabRouter.

Directive: MdcTabIconTextDirective

Selector: [mdcTabIconText]

Directive for the text of tabs, when having a tab bar with icons and text labels. This directive must be used as a child of an mdcTab, and as a sibbling to a preceding mdcTabIcon.

Directive: MdcTabDirective

Selector: [mdcTab]

Directive for a tab. This directive must be used as a child of mdcTabBar.

PropertyDescription
@Output()
activate
EventEmitter<MdcTabChange>

Event called when the tab is activated.

@Input()
active
boolean

Input for activating the tab. Assign a value other than false to activate the tab. Any other value will have no effect: in order to deatcivate the tab, you must activate another tab.

Directive: MdcTabRouterDirective

Selector: [mdcTabRouter]
Exported as: mdcTabRouter

PropertyDescription
@Output()
activate
EventEmitter<MdcTabChange>

Event called when the tab is activated.

Interface: MdcTabChange

The interface for events send by the activate output of an mdcTab or mdcTabRouter directive, or by the tabChange event of an mdcTabBar.

PropertyDescription
tab
AbstractMdcTabDirective

A reference to the tab that sends the event.

tabIndex
number

The index of the tab that sends the event.