uivButtonGroup
Group a series of buttons together on a single line with the button group.
WARNING
When using tooltips or popovers on elements within a btn-group, make sure they're appended to body.
Example
Wrap a series of <btn> in <btn-group>.
<template>
<BtnGroup>
<Btn>Left</Btn>
<Btn>Middle</Btn>
<Btn>Right</Btn>
</BtnGroup>
</template>
<script setup>
import { Btn, BtnGroup } from 'uiv';
</script>Button toolbar
Combine sets of <btn-group> into a <btn-toolbar> for more complex components.
<template>
<BtnToolbar>
<BtnGroup>
<Btn>1</Btn>
<Btn>2</Btn>
<Btn>3</Btn>
<Btn>4</Btn>
</BtnGroup>
<BtnGroup>
<Btn>5</Btn>
<Btn>6</Btn>
<Btn>7</Btn>
</BtnGroup>
<BtnGroup>
<Btn>8</Btn>
</BtnGroup>
</BtnToolbar>
</template>
<script setup>
import { Btn, BtnGroup, BtnToolbar } from 'uiv';
</script>Sizing
Instead of applying button sizing classes to every button in a group, just add size to each <btn-group>, including when nesting multiple groups.
<template>
<p>
<BtnGroup size="lg">
<Btn>Left</Btn>
<Btn>Middle</Btn>
<Btn>Right</Btn>
</BtnGroup>
</p>
<p>
<BtnGroup>
<Btn>Left</Btn>
<Btn>Middle</Btn>
<Btn>Right</Btn>
</BtnGroup>
</p>
<p>
<BtnGroup size="sm">
<Btn>Left</Btn>
<Btn>Middle</Btn>
<Btn>Right</Btn>
</BtnGroup>
</p>
<p>
<BtnGroup size="xs">
<Btn>Left</Btn>
<Btn>Middle</Btn>
<Btn>Right</Btn>
</BtnGroup>
</p>
</template>
<script setup>
import { Btn, BtnGroup } from 'uiv';
</script>Nesting
btn-group class will be automatically added to <dropdown> when you want dropdown menus mixed with a series of buttons.
<template>
<BtnGroup>
<Btn>Left</Btn>
<Btn>Middle</Btn>
<Dropdown>
<Btn class="dropdown-toggle">Dropdown <span class="caret"></span></Btn>
<template #dropdown>
<li><a role="button">Action</a></li>
<li><a role="button">Another action</a></li>
<li><a role="button">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a role="button">Separated link</a></li>
</template>
</Dropdown>
<Btn>Right</Btn>
</BtnGroup>
</template>
<script setup>
import { Btn, BtnGroup, Dropdown } from 'uiv';
</script>Vertical
Make a set of buttons appear vertically stacked rather than horizontally by adding vertical.
WARNING
Split button dropdowns are not supported here.
<template>
<BtnGroup vertical>
<Btn>Top</Btn>
<Btn>Center</Btn>
<Dropdown>
<Btn class="dropdown-toggle">Dropdown <span class="caret"></span></Btn>
<template #dropdown>
<li><a role="button">Action</a></li>
<li><a role="button">Another action</a></li>
<li><a role="button">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a role="button">Separated link</a></li>
</template>
</Dropdown>
<Btn>Bottom</Btn>
</BtnGroup>
</template>
<script setup>
import { Btn, BtnGroup, Dropdown } from 'uiv';
</script>Justified
Make a group of buttons stretch at equal sizes to span the entire width of its parent by adding justified. Also works with button dropdowns within the button group.
WARNING
Due to Bootstrap limitation, justified prop on <btn> is needed while it is render as button.
<template>
<BtnGroup justified>
<Btn href="javascript:;">Left</Btn>
<Btn href="javascript:;">Middle</Btn>
<Btn href="javascript:;">Right</Btn>
</BtnGroup>
<br />
<BtnGroup justified>
<Btn justified>Left</Btn>
<Btn justified>Middle</Btn>
<Dropdown>
<Btn class="dropdown-toggle">Dropdown <span class="caret"></span></Btn>
<template #dropdown>
<li><a role="button">Action</a></li>
<li><a role="button">Another action</a></li>
<li><a role="button">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a role="button">Separated link</a></li>
</template>
</Dropdown>
</BtnGroup>
</template>
<script setup>
import { Btn, BtnGroup, Dropdown } from 'uiv';
</script>API Reference
BtnGroup
Props
| Name | Type | Default | Required | Description |
|---|---|---|---|---|
size | String | Optional button sizes. Supported: lg, sm, xs. | ||
vertical | Boolean | false | Apply vertical style. | |
justified | Boolean | false | Apply justified style. |
Slots
| Name | Description |
|---|---|
default | The button group body. |
BtnToolbar
This component has no props.