diff options
Diffstat (limited to 'docs/components/button-group.md')
| -rw-r--r-- | docs/components/button-group.md | 200 |
1 files changed, 0 insertions, 200 deletions
diff --git a/docs/components/button-group.md b/docs/components/button-group.md deleted file mode 100644 index 59a18e262..000000000 --- a/docs/components/button-group.md +++ /dev/null @@ -1,200 +0,0 @@ ---- -layout: docs -title: Button group -description: Group a series of buttons together on a single line with the button group, and super-power them with JavaScript. -group: components ---- - -Group a series of buttons together on a single line with the button group. Add on optional JavaScript radio and checkbox style behavior with [our buttons plugin]({{ site.baseurl }}/components/buttons/#button-plugin). - -## Contents - -* Will be replaced with the ToC, excluding the "Contents" header -{:toc} - -## Basic example - -Wrap a series of buttons with `.btn` in `.btn-group`. - -{% example html %} -<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> -{% endexample %} - -## Button toolbar - -Combine sets of button groups into button toolbars for more complex components. Use utility classes as needed to space out groups, buttons, and more. - -{% example html %} -<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups"> - <div class="btn-group mr-2" 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> - <button type="button" class="btn btn-secondary">4</button> - </div> - <div class="btn-group mr-2" 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 class="btn-group" role="group" aria-label="Third group"> - <button type="button" class="btn btn-secondary">8</button> - </div> -</div> -{% endexample %} - -Feel free to mix input groups with button groups in your toolbars. Similar to the example above, you'll likely need some utilities though to space things properly. - -{% example html %} -<div class="btn-toolbar mb-3" role="toolbar" aria-label="Toolbar with button groups"> - <div class="btn-group mr-2" 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> - <button type="button" class="btn btn-secondary">4</button> - </div> - <div class="input-group"> - <span class="input-group-addon" id="btnGroupAddon">@</span> - <input type="text" class="form-control" placeholder="Input group example" aria-describedby="btnGroupAddon"> - </div> -</div> - -<div class="btn-toolbar justify-content-between" 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> - <button type="button" class="btn btn-secondary">4</button> - </div> - <div class="input-group"> - <span class="input-group-addon" id="btnGroupAddon2">@</span> - <input type="text" class="form-control" placeholder="Input group example" aria-describedby="btnGroupAddon2"> - </div> -</div> -{% endexample %} - -## Sizing - -Instead of applying button sizing classes to every button in a group, just add `.btn-group-*` to each `.btn-group`, including each one when nesting multiple groups. - -<div class="bd-example"> - <div class="btn-group btn-group-lg" role="group" aria-label="Large button group"> - <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> - <br> - <div class="btn-group" role="group" aria-label="Default button group"> - <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> - <br> - <div class="btn-group btn-group-sm" role="group" aria-label="Small button group"> - <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> -</div> - -{% highlight html %} -<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> -{% endhighlight %} - -## Nesting - -Place a `.btn-group` within another `.btn-group` when you want dropdown menus mixed with a series of buttons. - -{% example html %} -<div class="btn-group" role="group" aria-label="Button group with nested dropdown"> - <button type="button" class="btn btn-secondary">1</button> - <button type="button" class="btn btn-secondary">2</button> - - <div class="btn-group" role="group"> - <button id="btnGroupDrop1" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> - Dropdown - </button> - <div class="dropdown-menu" aria-labelledby="btnGroupDrop1"> - <a class="dropdown-item" href="#">Dropdown link</a> - <a class="dropdown-item" href="#">Dropdown link</a> - </div> - </div> -</div> -{% endexample %} - -## Vertical variation - -Make a set of buttons appear vertically stacked rather than horizontally. **Split button dropdowns are not supported here.** - -<div class="bd-example"> - <div class="btn-group-vertical" role="group" aria-label="Vertical button group"> - <button type="button" class="btn btn-secondary">Button</button> - <button type="button" class="btn btn-secondary">Button</button> - <button type="button" class="btn btn-secondary">Button</button> - <button type="button" class="btn btn-secondary">Button</button> - <button type="button" class="btn btn-secondary">Button</button> - <button type="button" class="btn btn-secondary">Button</button> - </div> -</div> - - -<div class="bd-example"> - <div class="btn-group-vertical" role="group" aria-label="Vertical button group"> - <button type="button" class="btn btn-secondary">Button</button> - <button type="button" class="btn btn-secondary">Button</button> - <div class="btn-group" role="group"> - <button id="btnGroupVerticalDrop1" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> - Dropdown - </button> - <div class="dropdown-menu" aria-labelledby="btnGroupVerticalDrop1"> - <a class="dropdown-item" href="#">Dropdown link</a> - <a class="dropdown-item" href="#">Dropdown link</a> - </div> - </div> - <button type="button" class="btn btn-secondary">Button</button> - <button type="button" class="btn btn-secondary">Button</button> - <div class="btn-group" role="group"> - <button id="btnGroupVerticalDrop2" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> - Dropdown - </button> - <div class="dropdown-menu" aria-labelledby="btnGroupVerticalDrop2"> - <a class="dropdown-item" href="#">Dropdown link</a> - <a class="dropdown-item" href="#">Dropdown link</a> - </div> - </div> - <div class="btn-group" role="group"> - <button id="btnGroupVerticalDrop3" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> - Dropdown - </button> - <div class="dropdown-menu" aria-labelledby="btnGroupVerticalDrop3"> - <a class="dropdown-item" href="#">Dropdown link</a> - <a class="dropdown-item" href="#">Dropdown link</a> - </div> - </div> - <div class="btn-group" role="group"> - <button id="btnGroupVerticalDrop4" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> - Dropdown - </button> - <div class="dropdown-menu" aria-labelledby="btnGroupVerticalDrop4"> - <a class="dropdown-item" href="#">Dropdown link</a> - <a class="dropdown-item" href="#">Dropdown link</a> - </div> - </div> - </div> -</div> - -{% highlight html %} -<div class="btn-group-vertical"> - ... -</div> -{% endhighlight %} - -## Tooltips and popovers - -Due to the specific implementation (and some other components), a bit of special casing is required for tooltips and popovers within button groups. **You'll have to specify the option `container: 'body'`** to avoid unwanted side effects (such as the element growing wider and/or losing its rounded corners when the tooltip or popover is triggered). |