Alerts

Full

The alert component is used to provide action-based feedback messages or to convey informational and/or critical messages.

= ui.nfg :alert, heading: 'Alert heading!', body: 'This is an alert.', icon: 'rocket'
<div class="alert alert-primary alert-dismissible fade show" role="alert"><button class="close" data-dismiss="alert" type="button">&times;</button>
  <div class="media">
    <div class="mr-2"><i aria-hidden="true" class="fa fa-rocket"></i></div>
    <div class="media-body">
      <h5 class="alert-heading">Alert heading!</h5>
      This is an alert.</div>
  </div>
</div>
Variants
Tip

The tip alert is used when some contextual help is needed for a section whether it be in a form or not. Typically, there is a knowledge base article link within the body. By default, the tip alert includes our tip icon, adds the alert-info theme, and makes the alert not dismissible by default.

= ui.nfg :alert, :tip, body: 'Tip alert!'
<div class="alert alert-info" role="alert">
  <div class="media">
    <div class="mr-2"><i aria-hidden="true" class="fa fa-question-circle-o"></i></div>
    <div class="media-body">Tip alert!</div>
  </div>
</div>
Success

Success alerts are used when an action is successfully processed.

= ui.nfg :alert, :success, body: 'Success alert!'
<div class="alert alert-success alert-dismissible fade show" role="alert"><button class="close" data-dismiss="alert" type="button">&times;</button>Success alert!</div>
Warning

Warning alerts are used when needing to bring a message to the user's attention for upcoming action.

= ui.nfg :alert, :warning, body: 'Warning alert!'
<div class="alert alert-warning alert-dismissible fade show" role="alert"><button class="close" data-dismiss="alert" type="button">&times;</button>Warning alert!</div>
Danger

Danger alerts are used to indicate an action's process failed completely.

= ui.nfg :alert, :danger, body: 'Danger alert!'
<div class="alert alert-danger alert-dismissible fade show" role="alert"><button class="close" data-dismiss="alert" type="button">&times;</button>Danger alert!</div>
Miscellaneous
Dismissible

By default, all alerts are dismissible. Add this trait to remove the ability to dismiss the alert.

= ui.nfg :alert, body: "This alert isn't dismissible.", dismissible: false
<div class="alert alert-primary" role="alert">This alert isn&#39;t dismissible.</div>
Absolute Positiioned

Alerts can be placed absolutely at the top and center of the parent container. This is currently used on some of the acknowledgement build pagese in DMS.

= ui.nfg :alert, :dark, data: { position_absolute: true }, body: 'Absolute positioning alert!'
<div class="alert alert-dark alert-dismissible fade show" data-position-absolute="true" role="alert"><button class="close" data-dismiss="alert" type="button">&times;</button>Absolute positioning alert!</div>
Traits

The alert component has these avaiable traits.

Trait
Options
Example
id:

Adds an ID to the alert.

id: 'my_id'
= ui.nfg :alert, id: 'my_id'
class:

Adds a class to the alert.

class: 'my-class'
= ui.nfg :alert, class: 'my-class'
describe:

For addding a data-describe to any alert.

describe: 'test-data-describe'
= ui.nfg :alert, describe: 'test-data-describe'
heading:

Heading for alert.

heading: 'Heading text'
= ui.nfg :alert, heading: 'Heading text'
body:

Text for alert.

body: 'Body text'
= ui.nfg :alert, body: 'Body text'
icon:

Places an icon to the left of all text.

icon: 'rocket'
= ui.nfg :alert, icon: 'rocket'
tip:

Adds our tip icon, adds alert-info theme, and makes it not dismissible by default.

tip: true
= ui.nfg :alert, :tip
dismissible:

Alerts are dismissible by default. Add false to remove the ability to dismiss.

dismissible: false
= ui.nfg :alert, dismissible: false
theme:

Determines the theme of the alert.

:primary
:secondary
:success
:warning
:danger
:info
:light
:dark
= ui.nfg :alert, :success
render_if:

Condition to determine if the alert shows or not.

render_if: (1==1)
= ui.nfg :alert, render_if: (1==1)
render_unless:

Condition to determine if the alert shows or not.

render_unless: (1==1)
= ui.nfg :alert, render_unless: (1==1)