November 27, 2017

UIkit Alert

❮❮ Previous
Next ❯❯

UIkit Alert– UIkit uk-alert component is used to create alert messages such as success, warning and error. It is very simple to use this component. Here in this article we are going to explain how to use alert component in UIkit.

UIkit Alert Component Example

There are following Types of Alert boxes available in UIkit-

  1. Primary
  2. Success
  3. Warning
  4. Danger

Add uk-alert attribute to block element to create alert messages.-

UIkit Alert Component Example:

<div uk-alert>Your order has been received.</div>

Try it »

If you run the above example it will produce the output something like this-

UIkit Alert Component Example

Close Button

Add class uk-alert-close and attribute uk-close to create close button.

<div uk-alert>
    <a class="uk-alert-close" uk-close></a>
</div>

Primary Alert

Add class uk-alert-primary along with attribute uk-alert.

Primary Alert Example:

<div class="uk-alert-primary" uk-alert>
    <a class="uk-alert-close" uk-close></a>
    <p>Primary Alert Example.</p>
</div>

Try it »

If You run the above example it will produce the output something like this-

UIkit Alert Component Example

Success Alert

Add class uk-alert-success along with attribute uk-alert.

Primary Alert Example:

<div class="uk-alert-success" uk-alert>
    <a class="uk-alert-close" uk-close></a>
    <p>Success Alert Example.</p>
</div>

Try it »

Output of above example will be-

UIKit Success Alert

Warning Alert

Add class uk-alert-warning along with attribute uk-alert.

Warning Alert Example:

<div class="uk-alert-success" uk-alert>
    <a class="uk-alert-close" uk-close></a>
    <p>Warning Alert Example.</p>
</div>

Try it »

Output of above example will be-

Warning Alert

Danger Alert

Add class uk-alert-danger along with attribute uk-alert.

Danger Alert Example:

<div class="uk-alert-success" uk-alert>
    <a class="uk-alert-close" uk-close></a>
    <p>Danger Alert Example.</p>
</div>

Try it »

Output of above example will be-

Danger Alert Example

Component Options

Option Value Default Description
animation Boolean, String true Fade out.
duration Number 150 Animation duration in milliseconds.
sel-close CSS selector .uk-alert-close The close trigger element.

JavaScript

Initialization

UIkit.alert(element, options);

Events

  • beforehide– This event fires before hide.
  • hide– Fires when an item is hidden.

Methods

Following methods are available-

Close

UIkit.alert(element).close();

Advertisements

Add Comment

📖 Read More


❮❮ Previous
Next ❯❯