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:

bs_btn_group label: "Basic example" do
  bs_btn "Left", variant: :secondary
  bs_btn "Middle", variant: :secondary
  bs_btn "Right", variant: :secondary
end

returns

<div class="btn-group" role="group" aria-label="Basic example">
  <button type="button" class="btn btn-secondary">Left</button>
  <button type="button" class="btn btn-secondary">Middle</button>
  <button type="button" class="btn btn-secondary">Right</button>
</div>

Example 2: Using size

bs_btn_group size: :lg, label: "..." do ... end
bs_btn_group label: "..." do ... end
bs_btn_group size: :sm, label: "..." do ... end

returns

<div class="btn-group btn-group-lg" role="group" aria-label="...">...</div>
<div class="btn-group" role="group" aria-label="...">...</div>
<div class="btn-group btn-group-sm" role="group" aria-label="...">...</div>

Example 3: Button Toolbar

bs_btn_group toolbar: true, label: "Toolbar with button groups" do
  bs_btn_group label: "First group" do
    bs_btn "1", variant: :secondary
    bs_btn "2", variant: :secondary
    bs_btn "3", variant: :secondary
  end
  bs_btn_group label: "Second group" do
    bs_btn "1", variant: :secondary
    bs_btn "2", variant: :secondary
    bs_btn "3", variant: :secondary
  end
end

returns

<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
  <div class="btn-group" role="group" aria-label="First group">
    <button type="button" class="btn btn-secondary">1</button>
    <button type="button" class="btn btn-secondary">2</button>
    <button type="button" class="btn btn-secondary">3</button>
  </div>
  <div class="btn-group" role="group" aria-label="Second group">
    <button type="button" class="btn btn-secondary">5</button>
    <button type="button" class="btn btn-secondary">6</button>
    <button type="button" class="btn btn-secondary">7</button>
  </div>
</div>