You can now use a Clarity directive *clrIfOpen
to lazy load the content of a
dropdown menu. When you use the directive, the content will only render in the DOM when the dropdown is open and
destroy it when the dropdown is closed.
<clr-dropdown>
...
<clr-dropdown-menu *clrIfOpen>
(content here will lazy load)
</clr-dropdown-menu>
</clr-dropdown>
0.10.0-alpha.2 introduces a breaking change for static HTML alerts in Clarity. Note that there is
no breaking change for users who were implementing their alerts with the
clr-alert
Angular component in Clarity.
.clr-icon-*
utility classes that were deprecated prior to 0.6
.alert-item
in favor of the
clr-alert-item
alert-danger
,
alert-info
, alert-warning
, and
alert-success
for the terser types of danger
,
info
, warning
, and
success
. These types are passed to the
[clrAlertType]
input of the
clr-alert
Angular component. This change does not impact static HTML alerts. The
default is now info
and not
alert-info
The HTML structure of alerts in 0.10.0-alpha adds a new wrapper around
.alert-item
elements and uses a
.alert-icon-wrapper
element inside an .alert-item
.
This icon wrapper should also contain a clr-icon.alert-icon
inside of it.
<div class="alert alert-danger">
<div class="alert-item">
<span class="alert-text">
...
</span>
<div class="alert-actions">
<div class="alert-action dropdown bottom-right">
<button class="dropdown-toggle">
Actions
<clr-icon shape="caret down"></clr-icon>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="...">Shutdown</a>
<a class="dropdown-item" href="...">Suspend</a>
<a class="dropdown-item" href="...">Reboot</a>
</div>
</div>
</div>
</div>
</div>
<div class="alert alert-danger">
<div class="alert-items">
<div class="alert-item static">
<div class="alert-icon-wrapper">
<clr-icon class="alert-icon" shape="exclamation-circle"></clr-icon>
</div>
<span class="alert-text">
...
</span>
<div class="alert-actions">
<div class="alert-action dropdown bottom-right">
<button class="dropdown-toggle">
Actions
<clr-icon shape="caret down"></clr-icon>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="...">Shutdown</a>
<a class="dropdown-item" href="...">Suspend</a>
<a class="dropdown-item" href="...">Reboot</a>
</div>
</div>
</div>
</div>
</div>
</div>
The 0.10.0-alpha alert introduces no breaking changes for the Clarity Angular alert component. The use of the
.alert-item
classname as a component selector is deprecated, however, and will be
removed before Clarity releases 1.0. The intent is to replace div.alert-item
in the
Clarity clr-alert
with a clr-alert-item
subcomponent.
Updating your clr-alert
s will avoid a potential future breaking change.
<clr-alert [clrAlertClosable]="false" [clrAlertType]="'alert-danger'">
<div class="alert-item">
<span class="alert-text">
This alert cannot be dismissed.
</span>
<div class="alert-actions">
<clr-dropdown [clrMenuPosition]="'bottom-right'">
<button class="dropdown-toggle" clrDropdownToggle>
Actions
<clr-icon shape="caret down"></clr-icon>
</button>
<div class="dropdown-menu">
<a href="..." class="dropdown-item" clrDropdownItem>Shutdown</a>
<a href="..." class="dropdown-item" clrDropdownItem>Delete</a>
<a href="..." class="dropdown-item" clrDropdownItem>Reboot</a>
</div>
</clr-dropdown>
</div>
</div>
</clr-alert>
<clr-alert [clrAlertClosable]="false" clrAlertType="danger">
<clr-alert-item>
<span class="alert-text">
This alert cannot be dismissed.
</span>
<div class="alert-actions">
<clr-dropdown [clrMenuPosition]="'bottom-right'">
<button class="dropdown-toggle" clrDropdownToggle>
Actions
<clr-icon shape="caret down"></clr-icon>
</button>
<div class="dropdown-menu">
<a href="..." class="dropdown-item" clrDropdownItem>Shutdown</a>
<a href="..." class="dropdown-item" clrDropdownItem>Delete</a>
<a href="..." class="dropdown-item" clrDropdownItem>Reboot</a>
</div>
</clr-dropdown>
</div>
</clr-alert-item>
</clr-alert>
Because the 0.10 alert now utilizes the Clarity Icons framework, you can use any icon that exists in your
application's Clarity Icons library or any custom icon you have added via the
ClarityIcons.add()
functionality of the Clarity Icons API.
Clarity alerts now have a [clrAlertIcon]
input that accepts a string which
represents the name of the icon in the Clarity Icons library. By default, Clarity will give your alert an icon
based on the type of alert it is but this default can be easily overridden by assigning an icon name to
[clrAlertIcon]
.
<clr-alert [clrAlertIcon]="'notification'" clrAlertType="info" [clrAlertClosable]="false">
<clr-alert-item>
<span class="alert-text">
This alert will have a bell instead of an "i" inside of a circle.
</span>
</clr-alert-item>
</clr-alert>
XXX.umd.js
to
XXX.min.js
, to make room for future UMD bundles that are not self-executing.