Blox Material v1.0.0

Tabs

Tabbed navigation components

Tabs


Tabs with Router


This is Page 2!

Go to page 1

Tabs with Icons


Tab with Scroller

API

Directive: MdcTabBarDirective

Selector: [mdcTabBar]

Directive for a tab bar. This directive must have an mdcTabScroller as only child.

Property Description
@Output()
tabChange
EventEmitter<MdcTabChange>

Event emitted when the active tab changes.

Directive: MdcTabIconDirective

Selector: [mdcTabIcon]

Directive for an optional icon when having a tab bar with icons. This directive must be used as a child of an mdcTabContent, and as a sibbling to a following mdcTabLabel.

Directive: MdcTabLabelDirective

Selector: [mdcTabLabel]

Directive for the text label of a tab. This directive must be used as a child of an mdcTabContent. It can be preceded by an optional mdcTabIcon.

Directive: MdcTabContentDirective

Selector: [mdcTabContent]

Directive for the content (label and optional icon of the tab). This directive must be used as a child of an mdcTab, and can contain an (optional) mdcTabIcon and an mdcTabLabel.

Directive: MdcTabDirective

Selector: [mdcTab]:not([routerLink])
Exported as: mdcTab

Directive for a tab. This directive must be used as a child of mdcTabBar. When using tabs in combination with angular routes, add a routerLink property, so that the MdcTabRouterDirective is selected instead of this directive.

Property Description
@Output()
activate
EventEmitter<MdcTabChange>

Event called when the tab is activated.

@Input()
active
boolean

Input for activating the tab. Assign a truthy value to activate the tab. A falsy value will have no effect. In order to deactivate the tab, you must activate another tab.

Directive: MdcTabIndicatorContentDirective

Selector: [mdcTabIndicatorContent]

Child directive for an mdcTabIndicator. Must be present, and can be assigned the value underline (default), or icon, to set the type of indicator.

Property Description
@Input()
mdcTabIndicatorContent
"underline" | "icon"

By default the indicator is represented as an underline. Set this value to icon to have it represented as an icon. You can use SVG, or font icon libraries to set the content icon.

Directive: MdcTabIndicatorDirective

Selector: [mdcTabIndicator]

Directive for the content (label and optional icon of the tab). This directive must be used as a child of an mdcTab, or mdcTabRouter.

Property Description
@Input()
mdcTabIndicator
"slide" | "fade"

By default the indicator is a sliding indicator: when another tab is activated, the indicator animates a slide to the new tab. Set this property fade to have a fading animation instead.

Directive: MdcTabRouterDirective

Selector: [mdcTab][routerLink] [mdcTabRouter]
Exported as: mdcTab

Directive for a tab that triggers a route change. This directive must be used as a child of mdcTabBar. For a tab that doesn't use the angular routing module, drop the routerLink attribute.

Selector mdcTabRouter is provided for backward compatibility and will be deprecated in the future. Use the selector mdcTab in combination with a routerLink attribute instead.

Property Description
@Output()
activate
EventEmitter<MdcTabChange>

Event called when the tab is activated.

Directive: MdcTabScrollerContentDirective

Selector: [mdcTabScrollerContent]

Directive for a the scroll content of an mdcTabScrollerArea. This directive must wrap the mdcTab directives for each of the tabs.

Directive: MdcTabScrollerAreaDirective

Selector: [mdcTabScrollerArea]

Directive for a the scroll area of an mdcTabScroller. This directive should have exactly one mdcTabScrollerContent child directive.

Directive: MdcTabScrollerDirective

Selector: [mdcTabScroller]

Directive for a scrollable tab bar. This directive should have exactly one mdcTabScrollerArea child directive.

Interface: MdcTabChange

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

Property Description
tab
AbstractMdcTabDirective

A reference to the tab that sends the event.

tabIndex
number

The index of the tab that sends the event.