3.1
Getting Started
API
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.bs_alert(*args, &block)
bs_alert(*args, &block)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.
Examples
Basic alert with title and text
1
bs_alert 'Some alert message', color: :success, heading: "Well done!"
Copied!
returns
1
<div class="alert alert-success" role="alert">
2
<h4 class="alert-heading">Well done!</h4>
3
Some alert message
4
</div>
Copied!
Animated, dismissible alert with content specified in a block
1
bs_alert color: :warning, animate: true, dismissible: true do
2
strong "Holy guacamole!"
3
plain "You should check in on some of those fields below."
4
end
Copied!
returns
1
<div class="alert alert-warning alert-dismissible fade show" role="alert">
2
<strong>Holy guacamole!</strong> You should check in on some of those fields below.
3
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
4
<span aria-hidden="true">×</span>
5
</button>
6
</div>
Copied!
Alert closing on event triggered by button click
1
bs_alert "Closing Alert test", close_on: 'close-alert'
2
onclick emit: "close-alert" do
3
bs_btn "close alert"
4
end
Copied!
Showing an alert after an event is triggered
Not intended by Bootstrap but you can use matestack toggle mechanism to trigger an alert
1
toggle show_on: "my-event" do
2
bs_alert "This is an alert", heading: "Alert Heading", animate: true, dismissible: true
3
end
4
onclick emit: "my-event" do
5
bs_btn "Show Alert"
6
end
Copied!
Last modified 4mo ago