Alert(ui_alert)

UiBibz::Ui::Core::Notifications::Alert

Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.

Usage

This component is an extension of component element. A Ui Bibz component consists of 3 arguments:

content[value/block]
html_options[hash]<default: {}>
options[hash]<default: {}>

# by variable
ui_alert content, options, html_options
# or by block
ui_alert options, html_options do |a|
  # by variable
  a.header content, options, html_options
  # or by block
  a.header options, html_options do
    content
  end

  # by variable
  a.body content, options, html_options
  # or by block
  a.body options, html_options do
    content
  end
end

Options

The specific options for this component are:

action[string](use component stimulus-options method)
cache[string](use to cache your component)
closable[boolean]<default: false>
controller[string](use component stimulus-options method)
status[symbol](:primary, :secondary, :success, :danger, :warning, :info, :light, :dark)(use component status method)
target[string](use component stimulus-options method)
timeout[integer]Fade out after timeout
turbo[string](use component turbo method)

Examples

Some examples explain how to use the options present in the component.

Alert

This is a primary alert

This is a secondary alert

This is a success alert

This is a danger alert

This is a warning alert

This is a info alert

This is a light alert

This is a dark alert

Ruby
Html

ui_alert 'This is a primary alert', status: :primary
ui_alert 'This is a secondary alert', status: :secondary
ui_alert 'This is a success alert', status: :success
ui_alert 'This is a danger alert', status: :danger
ui_alert 'This is a warning alert', status: :warning
ui_alert 'This is a info alert', status: :info
ui_alert 'This is a light alert', status: :light
ui_alert 'This is a dark alert', status: :dark

<div class="alert-primary alert alert-dismissible" role="alert">This is a primary alert</div>
<div class="alert-secondary alert alert-dismissible" role="alert">This is a secondary alert</div>
<div class="alert-success alert alert-dismissible" role="alert">This is a success alert</div>
<div class="alert-danger alert alert-dismissible" role="alert">This is a danger alert</div>
<div class="alert-warning alert alert-dismissible" role="alert">This is a warning alert</div>
<div class="alert-info alert alert-dismissible" role="alert">This is a info alert</div>
<div class="alert-light alert alert-dismissible" role="alert">This is a light alert</div>
<div class="alert-dark alert alert-dismissible" role="alert">This is a dark alert</div>

Options

Success

Danger notification with link.

Ruby
Html

ui_alert "Success", { status: :success, closable: true }, { class: "my-alert" }
 
ui_alert({ status: :danger, closable: true }, { class: "my-alert" }) do
  "Danger notification with <a class="alert-link" href="#">link</a>"
end

<div class="alert-success my-alert alert alert-dismissible" role="alert">
  <i class="glyph fa fa-check"></i> Success
  <button type="button" class="close" data-dismiss="alert" aria-label="Close">
    <span aria-hidden="true">×</span><span class="sr-only">Close</span>
  </button>
</div>

<div class="alert-danger my-alert alert alert-dismissible" role="alert">
  <i class="glyph fa fa-ban"></i> Danger notification with
  <a class="alert-link" href="#">link</a>.
  <button type="button" class="close" data-dismiss="alert" aria-label="Close">
    <span aria-hidden="true">×</span><span class="sr-only">Close</span>
  </button>
</div>

Timeout option add 'fade' class after timeout.

Alert with timeout

Ruby
Html

ui_alert "Alert with timeout", timeout: 4000

<div class="alert-secondary alert alert-dismissible" data-timeout="4000" role="alert">
  <i class="glyph fa fa-check"></i> Alert with timeout
</div>

Additional content

Well done!

Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.

Ruby
Html

ui_alert status: :success, glyph: "thumbs-up", closable: true do |a|
  a.header "Well done!"
  a.body do
    "Aww yeah, you successfully read this important alert message.
    This example text is going to run a bit longer so that you can see
    how spacing within an alert works with this kind of content."
  end
end

<div class="alert-success alert alert-dismissible" role="alert">
  <h4 class="alert-header">
    <i class="glyph fa fa-thumbs-up"></i> Well done!
    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
      <span aria-hidden="true">×</span>
      <span class="sr-only">Close</span>
    </button>
  </h4>
  <hr>
  <p class="alert-body mb-0">Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.</p>
</div>