Angular Components

ClrTabs

Tabs structure content into separate views and allow navigation between.

Selector & Basic Usage

<clr-tabs>
  <!-- one or more clr-tab components -->
</clr-tabs>

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

<clr-tabs>
  <clr-tab>
    <!-- tab link button -->
    <!-- tab content component -->
  </clr-tab>
  <clr-tab>
    <!-- tab link button -->
    <!-- tab content component -->
  </clr-tab>
</clr-tabs>

ClrTabContent

Selector & Basic Usage

<clr-tabs>
  <clr-tab>
    <!-- tab link button -->
    <clr-tab-content>Tab content</clr-tab-content>
  </clr-tab>
  <!-- more sibling clr-tab components -->
</clr-tabs>

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

<clr-tabs>
  <clr-tab>
    <button clrTabLink>Tab 1</button>
    <!--clr-tab-content -->
  </clr-tab>
  <!-- more sibling clr-tab components -->
</clr-tabs>

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

<clr-tabs>
  <clr-tab>
    <!-- tab link button -->
    <clr-tab-content *clrIfActive>Tab content</clr-tab-content>
  </clr-tab>
  <!-- more sibling clr-tab components -->
</clr-tabs>

Bindings

Binding	Type	Options	Default	Description
[(clrIfActive)]	two-way	true, false	false	Structural directive that enables lazy-loading.