Alert
The Bootstrap
alert component, implemented in Ruby. Use it like any other matestack component in your apps, pages and components. It offers customizable options to simply achieve what is possible in bootstrap with this component. See below for more information about the possible options.Returns a bootstrap alert containing text and/or content specified by a block. Also the alert is customizable with the following options.
Optional options
:variant- Specify a variant for the alert. Variant represent bootstraps contextual classes and can have one of the following values::primary, :secondary, :success, :info, :warning, :info, :light, :darkor your custom contextual class. The default is:primary:title- Expects a string specifying the content of the heading.:title_size- Set a different heading size. By default it is set to 4 corresponding to a "h4".:text- Passing content as String for alert. If a text and block is given, the block will be rendered below the text.:dismissible- Expects a boolean value. If set totrue, a close button to dismiss the alert will be displayed.:animated- Expects a boolean value. If set totruethe alert will be animated if dismissed. By default, it is set asfalse.:close_on- Expects an event as string on which the alert will be closed calling bootstrapsclosemethod.:dispose_on- Expects an event as string on which the alert will be disposed calling bootstrapsdisposemethod.&block- Use a block to create custom content/markup inside an alert. If used together with:textthe text will be displayed before the block.- Html attributes - all w3c confirm html attributes for div's can be set via options and will be added to the surrounding alert div.
bs_alert 'Some alert message', color: :success, heading: "Well done!"
returns
<div class="alert alert-success" role="alert">
<h4 class="alert-heading">Well done!</h4>
Some alert message
</div>
bs_alert color: :warning, animate: true, dismissible: true do
strong "Holy guacamole!"
plain "You should check in on some of those fields below."
end
returns
<div class="alert alert-warning alert-dismissible fade show" role="alert">
<strong>Holy guacamole!</strong> You should check in on some of those fields below.
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
bs_alert "Closing Alert test", close_on: 'close-alert'
onclick emit: "close-alert" do
bs_btn "close alert"
end
Not intended by Bootstrap but you can use matestack toggle mechanism to trigger an alert
toggle show_on: "my-event" do
bs_alert "This is an alert", heading: "Alert Heading", animate: true, dismissible: true
end
onclick emit: "my-event" do
bs_btn "Show Alert"
end
Last modified 1yr ago