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.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, :dark
or your custom contextual class. The default is:secondary
:rounded
- Expectstrue
orfalse
. 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:text
the 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.
bs_badge 'New'
Result:
<span class="badge bg-secondary"></span>
bs_badge variant: :warning do
div do
paragraph "Custom inner html"
end
end
Result:
<span class="badge bg-warning">
<div>
<p>Custom inner html</p>
</div>
</span>
bs_badge "Success", variant: :success, rounded: true
Result:
<span class="badge rounded-pill bg-success">Success</span>
Last modified 1yr ago