|
2 | 2 |
|
3 | 3 | > Group a series of buttons together on a single line with `<b-button group>`. |
4 | 4 |
|
5 | | -**Example 1:** Default, Small, and Large button groups |
| 5 | +**Example 1:** Default button group and button group using contextual variants |
6 | 6 | ```html |
7 | 7 | <div> |
8 | 8 | <b-button-group> |
9 | 9 | <b-button>Button 1</b-button> |
10 | 10 | <b-button>Button 2</b-button> |
11 | 11 | <b-button>Button 3</b-button> |
| 12 | + <b-button>Button 4</b-button> |
| 13 | + <b-button>Button 5</b-button> |
12 | 14 | </b-button-group> |
13 | | - <br> |
14 | | - <br> |
| 15 | + <br><br> |
| 16 | + <b-button-group> |
| 17 | + <b-button variant="success">Success</b-button> |
| 18 | + <b-button variant="info">Info</b-button> |
| 19 | + <b-button variant="warning">Warning</b-button> |
| 20 | + <b-button variant="primary">Primary</b-button> |
| 21 | + <b-button variant="danger">Danger</b-button> |
| 22 | + <b-button variant="link">Link</b-button> |
| 23 | + </b-button-group> |
| 24 | +</div> |
| 25 | + |
| 26 | +<!-- button-group-1.vue --> |
| 27 | +``` |
| 28 | + |
| 29 | +### Sizing |
| 30 | +Set the size prop to `lg` or `sm` to render larger or smaller, respectively, buttons. |
| 31 | +There is no need to specify the size on the individual buttons. |
| 32 | + |
| 33 | +**Example 2:** Default, Small, and Large button groups |
| 34 | +```html |
| 35 | +<div> |
| 36 | + <b-button-group> |
| 37 | + <b-button>Button 1</b-button> |
| 38 | + <b-button>Button 2</b-button> |
| 39 | + <b-button>Button 3</b-button> |
| 40 | + </b-button-group> |
| 41 | + <br><br> |
15 | 42 | <b-button-group size="sm"> |
16 | 43 | <b-button>Left</b-button> |
17 | 44 | <b-button>Middle</b-button> |
18 | 45 | <b-button>Right</b-button> |
19 | 46 | </b-button-group> |
20 | | - <br> |
21 | | - <br> |
| 47 | + <br><br> |
22 | 48 | <b-button-group size="lg"> |
23 | 49 | <b-button>Left</b-button> |
24 | 50 | <b-button>Middle</b-button> |
25 | 51 | <b-button>Right</b-button> |
26 | 52 | </b-button-group> |
27 | 53 | </div> |
28 | 54 |
|
29 | | -<!-- button-group-1.vue --> |
| 55 | +<!-- button-group-2.vue --> |
30 | 56 | ``` |
31 | 57 |
|
32 | | -**Example 2:** Default button group with contextual variants |
| 58 | +### Vertical variation |
| 59 | +Make a set of buttons appear vertically stacked rather than horizontally by setting |
| 60 | +the `vertical` prop. Split button dropdowns are not supported here. |
| 61 | + |
| 62 | +**Example 3:** Vertical button group |
33 | 63 | ```html |
34 | 64 | <div> |
35 | | - <b-button-group> |
36 | | - <b-button variant="success">Success</b-button> |
37 | | - <b-button variant="info">Info</b-button> |
38 | | - <b-button variant="warning">Warning</b-button> |
39 | | - <b-button variant="primary">Primary</b-button> |
40 | | - <b-button variant="danger">Danger</b-button> |
41 | | - <b-button variant="link">Link</b-button> |
| 65 | + <b-button-group vertical> |
| 66 | + <b-button>Top</b-button> |
| 67 | + <b-button>Middle</b-button> |
| 68 | + <b-button>Bottom</b-button> |
42 | 69 | </b-button-group> |
43 | 70 | </div> |
44 | 71 |
|
45 | | -<!-- button-group-2.vue --> |
| 72 | +<!-- button-group-3.vue --> |
46 | 73 | ``` |
47 | 74 |
|
48 | | -**Example 3:** button group with dropdown menus |
| 75 | +### Dropdown menu support |
| 76 | +Add [`<b-dropdown>`](./dropdown) menus directly inside your `<b-button-group>`. Note |
| 77 | +that split dropdown menus are not supported when prop `vertical` is set. |
| 78 | + |
| 79 | +**Example 4:** button group with dropdown menus |
49 | 80 | ```html |
50 | 81 | <div> |
51 | 82 | <b-button-group> |
|
67 | 98 | </b-button-group> |
68 | 99 | </div> |
69 | 100 |
|
70 | | -<!-- button-group-3.vue --> |
71 | | -``` |
72 | | - |
73 | | -**Example 4:** Vertical button group |
74 | | -```html |
75 | | -<div> |
76 | | - <b-button-group vertical> |
77 | | - <b-button>Top</b-button> |
78 | | - <b-button>Middle</b-button> |
79 | | - <b-button>Bottom</b-button> |
80 | | - </b-button-group> |
81 | | -</div> |
82 | | - |
83 | 101 | <!-- button-group-4.vue --> |
84 | 102 | ``` |
85 | 103 |
|
86 | | -### Sizing |
87 | | -Set the size prop to `lg` or `sm` to render larger or smaller, respectively, buttons. |
88 | | -There is no need to specify the size on the individual buttons. |
89 | | - |
90 | | -### Vertical variation |
91 | | -Make a set of buttons appear vertically stacked rather than horizontally by setting |
92 | | -the `vertical` prop. Split button dropdowns are not supported here. |
93 | | - |
94 | | -### Dropdown menu support |
95 | | -Add [`<b-dropdown>`](./dropdown) menus directly inside your `<b-button-group>`. Note |
96 | | -that split dropdown menus are not supported when prop `vertical` is set. |
97 | | - |
98 | 104 | ### Alias |
99 | 105 | `<b-button-group>` can also be used by its shorter alias `<b-btn-group>`. |
100 | 106 |
|
|
0 commit comments