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.