Dropdown, Tooltip and Signpost now have similar APIs to reduce the amount of learning needed before using them. The patterns and naming conventions are the same for all three. Here's how we recommend using them now:
<clr-dropdown>
<button clrDropdownTrigger class="btn">Dropdown</button>
<clr-dropdown-menu *clrIfOpen clrPosition="bottom-right">
<a clrDropdownItem href="...">Action 1</a>
<a clrDropdownItem href="...">Action 2</a>
</clr-dropdown-menu>
</clr-dropdown>
<clr-tooltip>
<clr-icon clrTooltipTrigger shape="info-standard"></clr-icon>
<clr-tooltip-content *clrIfOpen clrPosition="top-right" clrSize="xs">
Tooltip
</clr-tooltip-content>
</clr-tooltip>
<clr-signpost>
<!-- Optional custom trigger, the default is the info icon -->
<button clrSignpostTrigger class="signpost-action btn btn-small btn-link">
<clr-icon shape="warning"></clr-icon>
</button>
<clr-signpost-content *clrIfOpen clrPosition="left-top">
Signpost
</clr-signpost-content>
</clr-signpost>
All three support the *clrIfOpen
structural directive, which we heavily recommend
using. In particular, it lets you lazy-load the content of much more easily than before. For specific use cases
where you do not want the hidden content to be removed from the DOM (for instance, inline reading of tooltips by
screenreaders rather than actionable elements to read the tooltip) you can omit the
*clrIfOpen
directive, all three components make it optional, and will hide the
content with CSS only.
This unification introduces two breaking changes:
<clr-tooltip clrTooltipDirection="top-right" clrTooltipSize="xs">
<clr-icon clrTooltipTrigger shape="info-standard"></clr-icon>
<clr-tooltip-content>
Tooltip
</clr-tooltip-content>
</clr-tooltip>
needs to be rewritten to:
<clr-tooltip>
<clr-icon clrTooltipTrigger shape="info-standard"></clr-icon>
<clr-tooltip-content clrPosition="top-right" clrSize="xs">
Tooltip
</clr-tooltip-content>
</clr-tooltip>
The same applies to Dropdowns and Signposts.
[(clrDropdownMenuOpen)]
two-way binding is now handled by the
*clrIfOpen
structural directive. For instance, to pre-open a dropdown, the old API
was:
<clr-dropdown [clrDropdownMenuOpen]="true">
<button clrDropdownTrigger class="btn">...</button>
<clr-dropdown-menu>...</clr-dropdown-menu>
</clr-dropdown>
To do the same with the new API, simply write:
<clr-dropdown>
<button clrDropdownTrigger class="btn">...</button>
<clr-dropdown-menu *clrIfOpen="true">...</clr-dropdown-menu>
</clr-dropdown>
Two-way binding on structural directives does not have a shorthand syntax, though, so you will need to write
explicitly the <ng-template>
rather than use the simple "star" syntactic
sugar. So if you used to dynamically control the opening and closing of a dropdown like so:
<clr-dropdown [(clrDropdownMenuOpen)]="open">
<button clrDropdownTrigger class="btn">...</button>
<clr-dropdown-menu>...</clr-dropdown-menu>
</clr-dropdown>
You will need to change it to this syntax:
<clr-dropdown>
<button clrDropdownTrigger class="btn">...</button>
<ng-template [(clrIfOpen)]="open">
<clr-dropdown-menu>...</clr-dropdown-menu>
</ng-template>
</clr-dropdown>
Note that Tooltip now offers the exact same API to control the show/hide behavior, and that Signpost already
supported this from the beginning.
With the 0.10.0 release, Clarity has been updated to Angular 4.3.