Tabs
Tabbed navigation components
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
|
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 |
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. |