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.