bh v0.0.16 Bh.Bh4.Alert View Source

Twitter Bootstrap 4 alert helpers for Phoenix.

Examples

Real live examples can be found on the site of the Project.

Link to this section Summary

Functions

Generates alert HTML markup.

Link to this section Functions

Link to this function

bh_alert(text, opts \\ [])

View Source

Generates alert HTML markup.

Options

  • :context - context of the alert. Allowed values are :info, :success, :warning, :danger. Default context is :info.

  • :id - id of the alert.

  • :class - extra class, appended to the alert classes. Option :class can take string of space-separated class names or symbol.

  • :dismissible - boolean field. Will result in alert block with close button. Requires alert.js plugin.

Examples

<%= bh_alert "Alert text" %>
<div class="alert alert-info" role="alert">Alert text</div>

Multiple options:

<%= bh_alert "Alert text", id: :one, class: "extra", context: :danger %>
<div class="alert alert-danger extra" id="one" role="alert">Alert text</div>

Instead of a simple alert text message you can pass a complex markup as a block:

<%= bh_alert context: :success, id: :one, class: :extra do %>
  <span><b>Alert</b> is <u>very important</u></span>
<% end %>
<div class="alert alert-success extra" id="one" role="alert">
  <span><b>Alert</b> is <u>very important</u></span>
</div>

Dismissible alert example:

<%= bh_alert context: :success, id: :one, class: :extra, dismissible: true do %>
  <span><b>Dismissible alert</b> is <u>very important</u></span>
<% end %>

Dismissible alert HTML result:

<div class="alert alert-success extra alert-dismissible fade in" id="one" role="alert">
  <button aria-label="Close" class="close" data-dismiss="alert" type="button">
    <span aria-hidden="true">×</span>
  </button>
  <span><b>Dismissible alert</b> is <u>very important</u></span>
</div>