Drift Angular
Search…
Dropdowns
To use Card, first import SharedModule in your module.
1
import {SharedModule} from '@gaxon/modules';
2
3
@NgModule({
4
...
5
imports: [SharedModule, ...],
6
...
7
})
8
export class YourAppModule {
9
}
Copied!
Preview
HTML
1
<div class="d-flex flex-wrap">
2
<div ngbDropdown class="mr-2 mb-2">
3
<button class="btn btn-outline-primary" ngbDropdownToggle>Toggle dropdown</button>
4
<div ngbDropdownMenu>
5
<button class="dropdown-item">Action - 1</button>
6
<button class="dropdown-item">Another Action</button>
7
<button class="dropdown-item">Something else is here</button>
8
</div>
9
</div>
10
<div ngbDropdown placement="top-right" class="mb-2">
11
<button class="btn btn-outline-primary" ngbDropdownToggle>Toggle dropup</button>
12
<div ngbDropdownMenu>
13
<button class="dropdown-item">Action - 1</button>
14
<button class="dropdown-item">Another Action</button>
15
<button class="dropdown-item">Something else is here</button>
16
</div>
17
</div>
18
</div>
19
Copied!

Various color Dropdowns

Preview
HTML
1
<!-- Dropdown -->
2
<div class="btn-group mr-2 mb-2" ngbDropdown>
3
4
<!-- Dropdown Button -->
5
<button type="button" class="btn btn-primary" ngbDropdownToggle>
6
Primary
7
</button>
8
<!-- /dropdown button -->
9
10
<!-- Dropdown Menu -->
11
<div ngbDropdownMenu>
12
<a class="dropdown-item" href="javascript:void(0)">Action</a>
13
<a class="dropdown-item" href="javascript:void(0)">Another action</a>
14
<a class="dropdown-item" href="javascript:void(0)">Something else here</a>
15
<div class="dropdown-divider"></div>
16
<a class="dropdown-item" href="javascript:void(0)">Separated link</a>
17
</div>
18
<!-- /dropdown menu -->
19
20
</div>
21
<!-- /dropdown -->
22
23
<!-- Dropdown -->
24
<div class="btn-group mr-2 mb-2" ngbDropdown>
25
26
<!-- Dropdown Button -->
27
<button type="button" class="btn btn-secondary" ngbDropdownToggle>
28
Secondary
29
</button>
30
<!-- /dropdown button -->
31
32
<!-- Dropdown Menu -->
33
<div ngbDropdownMenu>
34
<a class="dropdown-item" href="javascript:void(0)">Action</a>
35
<a class="dropdown-item" href="javascript:void(0)">Another action</a>
36
<a class="dropdown-item" href="javascript:void(0)">Something else here</a>
37
<div class="dropdown-divider"></div>
38
<a class="dropdown-item" href="javascript:void(0)">Separated link</a>
39
</div>
40
<!-- /dropdown menu -->
41
42
</div>
43
<!-- /dropdown -->
44
45
<!-- Dropdown -->
46
<div class="btn-group mr-2 mb-2" ngbDropdown>
47
48
<!-- Dropdown Button -->
49
<button type="button" class="btn btn-success" ngbDropdownToggle>
50
Success
51
</button>
52
<!-- /dropdown button -->
53
54
<!-- Dropdown Menu -->
55
<div ngbDropdownMenu>
56
<a class="dropdown-item" href="javascript:void(0)">Action</a>
57
<a class="dropdown-item" href="javascript:void(0)">Another action</a>
58
<a class="dropdown-item" href="javascript:void(0)">Something else here</a>
59
<div class="dropdown-divider"></div>
60
<a class="dropdown-item" href="javascript:void(0)">Separated link</a>
61
</div>
62
<!-- /dropdown menu -->
63
64
</div>
65
<!-- /dropdown -->
Copied!

Button groups and split buttons

Preview
HTML
1
<div class="btn-group mr-3 mb-2">
2
<button type="button" class="btn btn-outline-success">Plain ol' button</button>
3
<div class="btn-group" ngbDropdown role="group" aria-label="Button group with nested dropdown">
4
<button class="btn btn-outline-primary" ngbDropdownToggle>Drop me</button>
5
<div class="dropdown-menu" ngbDropdownMenu>
6
<button class="dropdown-item">One</button>
7
<button class="dropdown-item">Two</button>
8
<button class="dropdown-item">Four!</button>
9
</div>
10
</div>
11
</div>
12
13
<div class="btn-group mr-3 mb-2">
14
<button type="button" class="btn btn-primary">Split me</button>
15
<div class="btn-group" ngbDropdown role="group" aria-label="Button group with nested dropdown">
16
<button class="btn btn-primary dropdown-toggle-split" ngbDropdownToggle></button>
17
<div class="dropdown-menu" ngbDropdownMenu>
18
<button class="dropdown-item">One</button>
19
<button class="dropdown-item">Two</button>
20
<button class="dropdown-item">Four!</button>
21
</div>
22
</div>
23
</div>
24
Copied!
For more information about options, check the Ng-Bootstrap
Last modified 2yr ago