NAME

Moonshine::Bootstrap::Component::ButtonGroup

SYNOPSIS

$self->button_group(group => [{ }, { }, { }]);

Options

group

Array of Hashes - each hash get sent to **button** unless dropdown => 1 is set, then the args gets sent to dropdown.

sizing

SCALAR that appends btn-group-%s - lg, sm, xs

nested

ArrayRef of Hashes, that can build nested button_groups

  nested => [ 
      {
           index => 3,
          dropdown => 1,
      },
      ...
  ],
 <div class="btn-group" role="group">
  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    <li><a href="#">Dropdown link</a></li>
    <li><a href="#">Dropdown link</a></li>
  </ul>
</div>

vertical

Make a set of buttons appear vertically stacked rather than horizontally.

vertical => 1
<div class="btn-group btn-group-vertical" ...>
    ...
</div>

justified

Make a group of buttons stretch at equal sizes to span the entire width of its parent.

justified => 1
<div class="btn-group btn-group-justified" ...>
     ...
</div>

Sample Output

<div class="btn-group" role="group" aria-label="...">
      <button type="button" class="btn btn-default">Left</button>
      <button type="button" class="btn btn-default">Middle</button>
      <button type="button" class="btn btn-default">Right</button>
</div>