You can now use a Clarity directive *clrIfActive
to lazy load the content of an
active tab. When you use the directive, the content will only render in the DOM when the tab is active
and destroy it when the tab becomes inactive. In addition, the tabs have been refactored with a slight change
in markup. Read the section below for more details.
<clr-tabs>
<clr-tab>
<button clrTabLink>Tab1</button>
<clr-tab-content *clrIfActive>
(content here will load by default unless another tab is specified as active)
</clr-tab-content>
<clr-tab>
<clr-tab>
<button clrTabLink>Tab2</button>
<clr-tab-content *clrIfActive>
(content here will load when this tab is active)
</clr-tab-content>
<clr-tab>
</clr-tabs>
0.10.0 introduces a breaking change for tabs component in Clarity. Note that there is no breaking change for users using the static (HTML) version of tabs. This change enables lazy loading of tab contents.
The 0.10.0 version deprecates the clr-tab-link
markup. Now
you can use use the clrTabLink
directive on a DOM
element for links as shown below. The use of button is recommended unless the tab is meant to reroute
the user to another page.
This version also introduces another wrapper element
clr-tab
around each tab link and content pair.
The new tabs use the *clrIfActive
structural directive to lazy load
the content of an active tab. For simple cases, using the microsyntax would suffice. We recommend
that you use the de-sugared syntax of the structural directive so you can bind to its input/output.
<clr-tabs>
<clr-tab-link>Tab1</clr-tab-link>
<clr-tab-link clrTabLinkActive="true">Tab2</clr-tab-link>
<clr-tab-content>
...
</clr-tab-content>
<clr-tab-content clrTabContentActive="true">
...
</clr-tab-content>
</clr-tabs>
<clr-tabs>
<clr-tab>
<button clrTabLink>Tab1</button>
<ng-template [(clrIfActive)]="tab1Active">
<clr-tab-content>
...
</clr-tab-content>
</ng-template>
<clr-tab>
<clr-tab>
<button clrTabLink>Tab2</button>
<ng-template [(clrIfActive)]="tab2Active">
<clr-tab-content>
...
</clr-tab-content>
</ng-template>
<clr-tab>
</clr-tabs>
<clr-tabs>
<clr-tab>
<button clrTabLink>Tab1</button>
<clr-tab-content *clrIfActive>
...
</clr-tab-content>
<clr-tab>
<clr-tab>
<button clrTabLink>Tab2</button>
<clr-tab-content *clrIfActive="true">
...
</clr-tab-content>
<clr-tab>
</clr-tabs>
Input/Output | Alternative |
---|---|
[(clrTabsCurrentTabIndex)] |
Not needed anymore. Use Input/Output on the clrIfActive
directive to set or determine which tab is active.
|
[clrTabContentActive] |
Set Input value on the clrIfActive
directive.
|
[clrTabLinkActive] |
Set Input value on the clrIfActive
directive.
|
(clrTabsCurrentTabContentChanged) |
Use Output on the clrIfActive
directive to determine when a tab's active status has changed.
|
(clrTabsCurrentTabLinkChanged) |
Use Output on the clrIfActive
directive to determine when a tab's active status has changed.
|
Another Clarity directive you can now use is clrFocusTrap
. This directive is used for trapping the user tabbing to the focusable elements within the container.
Expression has changed after it was checked
errors in the Datagrid. Obviously, we cannot fix the ones that are due to external application code, but most of these errors people are experiencing should be gone.