3.1
Getting Started
API
Badge
The Bootstrap
badge 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_badge(*args, &block)
bs_badge(*args, &block)Returns a bootstrap badge containing text and/or content specified by a block. Also the badge is customizable with the following options.
Optional options
:variant- Specify a variant for the badge. 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:secondary:rounded- Expectstrueorfalse. By default is set asfalse. Set this parameter to true to apply bootstraps "rounded-pill" class.:text- Expects a string which gets displayed plain inside the badge. If a text and block is given, the text will be rendered before the block content.:visually_hidden- Screen reader only text like bootstrap establishes it, following the badge in another "span" containing the given string. As default no screen reader only "span" and text is rendered.&block- Use a block to create custom content/markup inside a badge. If used together with:textthe text will be displayed before the block.- Html attributes - all w3c confirm html attributes for span's can be set via options and will be added to the surrounding badge span.
Examples
Basic badge
1
bs_badge 'New'
Copied!
Result:
1
<span class="badge bg-secondary"></span>
Copied!
Badge with block content
1
bs_badge variant: :warning do
2
div do
3
paragraph "Custom inner html"
4
end
5
end
Copied!
Result:
1
<span class="badge bg-warning">
2
<div>
3
<p>Custom inner html</p>
4
</div>
5
</span>
Copied!
Rounded success badge
1
bs_badge "Success", variant: :success, rounded: true
Copied!
Result:
1
<span class="badge rounded-pill bg-success">Success</span>
Copied!
Last modified 4mo ago