ButtonGroup
The Bootstrap button group 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_btn_group(*args, &block)

Returns a bootstrap button-group containing content specified by a block. Also the button_group is customizable with the following options.
Optional options
  • size - Use :sm (small), :md (medium), :lg (large) to change size of the button group. The default is nil.
  • toolbar - Set true for using button toolbar instead of button group
  • label - Expects a String. Adding label to attributes aria-label
  • vertical - Expects true or false. By default is set as true. This parameter determines whether the button group should align vertically
  • Html attributes - all w3c confirm html attributes for div's can be set via options and will be added to the surrounding button group div.

Examples

Example 1:

1
bs_btn_group label: "Basic example" do
2
bs_btn "Left", variant: :secondary
3
bs_btn "Middle", variant: :secondary
4
bs_btn "Right", variant: :secondary
5
end
Copied!
returns
1
<div class="btn-group" role="group" aria-label="Basic example">
2
<button type="button" class="btn btn-secondary">Left</button>
3
<button type="button" class="btn btn-secondary">Middle</button>
4
<button type="button" class="btn btn-secondary">Right</button>
5
</div>
Copied!

Example 2: Using size

1
bs_btn_group size: :lg, label: "..." do ... end
2
bs_btn_group label: "..." do ... end
3
bs_btn_group size: :sm, label: "..." do ... end
Copied!
returns
1
<div class="btn-group btn-group-lg" role="group" aria-label="...">...</div>
2
<div class="btn-group" role="group" aria-label="...">...</div>
3
<div class="btn-group btn-group-sm" role="group" aria-label="...">...</div>
Copied!

Example 3: Button Toolbar

1
bs_btn_group toolbar: true, label: "Toolbar with button groups" do
2
bs_btn_group label: "First group" do
3
bs_btn "1", variant: :secondary
4
bs_btn "2", variant: :secondary
5
bs_btn "3", variant: :secondary
6
end
7
bs_btn_group label: "Second group" do
8
bs_btn "1", variant: :secondary
9
bs_btn "2", variant: :secondary
10
bs_btn "3", variant: :secondary
11
end
12
end
Copied!
returns
1
<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
2
<div class="btn-group" role="group" aria-label="First group">
3
<button type="button" class="btn btn-secondary">1</button>
4
<button type="button" class="btn btn-secondary">2</button>
5
<button type="button" class="btn btn-secondary">3</button>
6
</div>
7
<div class="btn-group" role="group" aria-label="Second group">
8
<button type="button" class="btn btn-secondary">5</button>
9
<button type="button" class="btn btn-secondary">6</button>
10
<button type="button" class="btn btn-secondary">7</button>
11
</div>
12
</div>
Copied!
Last modified 4mo ago