Angular Components
ClrTabs
Tabs structure content into separate views and allow navigation between.
Selector & Basic Usage
Bindings
Binding | Type | Options | Default | Description |
[clrLayout] | input | horizontal, vertical | horizontal | Change the tab orientation to vertical or horizontal. |
ClrTab
ClrTab associates the ClrTabContent component with the ClrTabLink directive.
Selector & Basic Usage
ClrTabContent
Selector & Basic Usage
Bindings
Binding | Type | Options | Default | Description |
[id] | input | Valid html id attribute value. | clr-tab-content-# (where number is incremented for each ClrTab instance). | Set a specific id instead of the generated id. |
Angular Directives
ClrTabLink
Selector & Basic Usage
Bindings
Binding | Type | Options | Default | Description |
[clrTabLinkInOverflow] | input | true, false | false | Puts the tab button into the overflow container when true. |
[id] | input | Valid html id | clr-tab-content-# (where number is incremented for each ClrTab instance). | Set this to a specific id that is also used for aria-controls/aria-labelledby. |
ClrIfActive
A structural directive that enables lazy-loading the content for an active tab.
Selector & Basic Usage
Bindings
Binding | Type | Options | Default | Description |
[(clrIfActive)] | two-way | true, false | false | Structural directive that enables lazy-loading. |