Drift Angular
Search…
Installation and Setup
Stylesheets
Settings
Button Group
To use Button Group, first import
SharedModulein your module.1
import {SharedModule} from '@gaxon/modules';
2
​
3
@NgModule({
4
...
5
imports: [SharedModule, ...],
6
...
7
})
8
export class YourAppModule {
9
}
Copied!
Basic Button Group
Preview
HTML
1
<div class="btn-group mr-2 mb-2" role="group" aria-label="Basic example">
2
<button type="button" class="btn btn-primary">Left</button>
3
<button type="button" class="btn btn-primary">Middle</button>
4
<button type="button" class="btn btn-primary">Right</button>
5
</div>
6
​
7
<div class="btn-group mb-2" role="group" aria-label="Basic example">
8
<button type="button" class="btn btn-outline-primary">Left</button>
9
<button type="button" class="btn btn-outline-primary">Middle</button>
10
<button type="button" class="btn btn-outline-primary">Right</button>
11
</div>
Copied!
Vertical Button Group
Preview
HTML
1
<div class="btn-group-vertical mr-2 mb-2" role="group" aria-label="Basic example">
2
<button type="button" class="btn btn-primary">Top</button>
3
<button type="button" class="btn btn-primary">Middle</button>
4
<button type="button" class="btn btn-primary">Bottom</button>
5
</div>
6
​
7
<div class="btn-group-vertical mb-2" role="group" aria-label="Basic example">
8
<button type="button" class="btn btn-outline-primary">Top</button>
9
<button type="button" class="btn btn-outline-primary">Middle</button>
10
<button type="button" class="btn btn-outline-primary">Bottom</button>
11
</div>
Copied!
Toolbar Button Group
Example 1
HTML
1
<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
2
<div class="btn-group mr-2 mb-2" role="group" aria-label="First group">
3
<button type="button" class="btn btn-primary">1</button>
4
<button type="button" class="btn btn-primary">2</button>
5
<button type="button" class="btn btn-primary">3</button>
6
<button type="button" class="btn btn-primary">4</button>
7
</div>
8
<div class="btn-group mr-2 mb-2" role="group" aria-label="Second group">
9
<button type="button" class="btn btn-primary">5</button>
10
<button type="button" class="btn btn-primary">6</button>
11
<button type="button" class="btn btn-primary">7</button>
12
</div>
13
<div class="btn-group mb-2" role="group" aria-label="Third group">
14
<button type="button" class="btn btn-primary">8</button>
15
</div>
16
</div>
Copied!
Example 2
HTML
1
<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
2
<div class="btn-group mr-2" role="group" aria-label="First group">
3
<button type="button" class="btn btn-outline-primary">1</button>
4
<button type="button" class="btn btn-outline-primary">2</button>
5
<button type="button" class="btn btn-outline-primary">3</button>
6
<button type="button" class="btn btn-outline-primary">4</button>
7
</div>
8
<div class="input-group">
9
<div class="input-group-prepend">
10
<div class="input-group-text" id="btnGroupAddon">@</div>
11
</div>
12
<input type="text" class="form-control" placeholder="Input group example"
13
aria-label="Input group example" aria-describedby="btnGroupAddon">
14
</div>
15
</div>
Copied!
Example 3
HTML
1
<div class="btn-toolbar justify-content-between" role="toolbar">
2
<div class="btn-group" role="group" aria-label="First group">
3
<button type="button" class="btn btn-outline-secondary">1</button>
4
<button type="button" class="btn btn-outline-secondary">2</button>
5
<button type="button" class="btn btn-outline-secondary">3</button>
6
<button type="button" class="btn btn-outline-secondary">4</button>
7
</div>
8
<div class="input-group">
9
<div class="input-group-prepend">
10
<div class="input-group-text" id="btnGroupAddon2">@</div>
11
</div>
12
<input type="text" class="form-control" placeholder="Input group example"
13
aria-label="Input group example"
14
aria-describedby="btnGroupAddon2">
15
</div>
16
</div>
Copied!
Button Group sizing
Preview
HTML
1
<div>
2
<div class="btn-group btn-group-lg mr-2 mb-2" role="group">
3
<button type="button" class="btn btn-primary">Left</button>
4
<button type="button" class="btn btn-primary">Middle</button>
5
<button type="button" class="btn btn-primary">Right</button>
6
</div>
7
</div>
8
​
9
<div>
10
<div class="btn-group mr-2 mb-2" role="group">
11
<button type="button" class="btn btn-primary">Left</button>
12
<button type="button" class="btn btn-primary">Middle</button>
13
<button type="button" class="btn btn-primary">Right</button>
14
</div>
15
</div>
16
​
17
<div>
18
<div class="btn-group btn-group-sm mr-2 mb-2" role="group">
19
<button type="button" class="btn btn-primary">Left</button>
20
<button type="button" class="btn btn-primary">Middle</button>
21
<button type="button" class="btn btn-primary">Right</button>
22
</div>
23
</div>
Copied!
Vertical Button Group sizing
Preview
HTML
1
<div class="btn-group-vertical btn-group-lg mr-2 mb-2" role="group">
2
<button type="button" class="btn btn-outline-primary">Top</button>
3
<button type="button" class="btn btn-outline-primary">Middle</button>
4
<button type="button" class="btn btn-outline-primary">Bottom</button>
5
</div>
6
​
7
<div class="btn-group-vertical mr-2 mb-2" role="group">
8
<button type="button" class="btn btn-outline-primary">Top</button>
9
<button type="button" class="btn btn-outline-primary">Middle</button>
10
<button type="button" class="btn btn-outline-primary">Bottom</button>
11
</div>
12
​
13
<div class="btn-group-vertical btn-group-sm mb-2" role="group">
14
<button type="button" class="btn btn-outline-primary">Top</button>
15
<button type="button" class="btn btn-outline-primary">Middle</button>
16
<button type="button" class="btn btn-outline-primary">Bottom</button>
17
</div>
Copied!
Nesting Button Group
Preview
HTML
1
<div class="btn-group mr-2 mb-2" role="group">
2
<button type="button" class="btn btn-primary">1</button>
3
<button type="button" class="btn btn-primary">2</button>
4
​
5
<div class="btn-group" role="group" ngbDropdown>
6
<button id="btnGroupDrop1" type="button" class="btn btn-primary" ngbDropdownToggle>
7
Dropdown
8
</button>
9
<div ngbDropdownMenu aria-labelledby="btnGroupDrop1">
10
<a class="dropdown-item" href="javascript:void(0)">Dropdown link</a>
11
<a class="dropdown-item" href="javascript:void(0)">Dropdown link</a>
12
</div>
13
</div>
14
</div>
Copied!
Vertical Nesting Button Group
Preview
Second Tab
1
<div class="btn-group-vertical mb-2" role="group">
2
<button type="button" class="btn btn-outline-secondary">Button</button>
3
<button type="button" class="btn btn-outline-secondary">Button</button>
4
​
5
<div class="btn-group" role="group" ngbDropdown>
6
<button id="btnGroupDrop6" type="button" class="btn btn-outline-secondary" ngbDropdownToggle>
7
Dropdown
8
</button>
9
<div ngbDropdownMenu aria-labelledby="btnGroupDrop6">
10
<a class="dropdown-item" href="javascript:void(0)">Dropdown link</a>
11
<a class="dropdown-item" href="javascript:void(0)">Dropdown link</a>
12
</div>
13
</div>
14
<button type="button" class="btn btn-outline-secondary">Button</button>
15
<button type="button" class="btn btn-outline-secondary">Button</button>
16
<div class="btn-group" role="group" ngbDropdown>
17
<button id="btnGroupDrop7" type="button" class="btn btn-outline-secondary" ngbDropdownToggle>
18
Dropdown
19
</button>
20
<div ngbDropdownMenu aria-labelledby="btnGroupDrop7">
21
<a class="dropdown-item" href="javascript:void(0)">Dropdown link</a>
22
<a class="dropdown-item" href="javascript:void(0)">Dropdown link</a>
23
</div>
24
</div>
25
<div class="btn-group" role="group" ngbDropdown>
26
<button id="btnGroupDrop8" type="button" class="btn btn-outline-secondary" ngbDropdownToggle>
27
Dropdown
28
</button>
29
<div ngbDropdownMenu aria-labelledby="btnGroupDrop8">
30
<a class="dropdown-item" href="javascript:void(0)">Dropdown link</a>
31
<a class="dropdown-item" href="javascript:void(0)">Dropdown link</a>
32
</div>
33
</div>
34
</div>
Copied!
Last modified 2yr ago