Skip to main content Skip to navigation Skip to search

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

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.