Dropdowns

To use Card, first import SharedModule in your module.

import {SharedModule} from '@gaxon/modules';
@NgModule({
...
imports: [SharedModule, ...],
...
})
export class YourAppModule {
}
Preview
HTML
Preview
HTML
<div class="d-flex flex-wrap">
<div ngbDropdown class="mr-2 mb-2">
<button class="btn btn-outline-primary" ngbDropdownToggle>Toggle dropdown</button>
<div ngbDropdownMenu>
<button class="dropdown-item">Action - 1</button>
<button class="dropdown-item">Another Action</button>
<button class="dropdown-item">Something else is here</button>
</div>
</div>
<div ngbDropdown placement="top-right" class="mb-2">
<button class="btn btn-outline-primary" ngbDropdownToggle>Toggle dropup</button>
<div ngbDropdownMenu>
<button class="dropdown-item">Action - 1</button>
<button class="dropdown-item">Another Action</button>
<button class="dropdown-item">Something else is here</button>
</div>
</div>
</div>

Various color Dropdowns

Preview
HTML
Preview
HTML
<!-- Dropdown -->
<div class="btn-group mr-2 mb-2" ngbDropdown>
<!-- Dropdown Button -->
<button type="button" class="btn btn-primary" ngbDropdownToggle>
Primary
</button>
<!-- /dropdown button -->
<!-- Dropdown Menu -->
<div ngbDropdownMenu>
<a class="dropdown-item" href="javascript:void(0)">Action</a>
<a class="dropdown-item" href="javascript:void(0)">Another action</a>
<a class="dropdown-item" href="javascript:void(0)">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="javascript:void(0)">Separated link</a>
</div>
<!-- /dropdown menu -->
</div>
<!-- /dropdown -->
<!-- Dropdown -->
<div class="btn-group mr-2 mb-2" ngbDropdown>
<!-- Dropdown Button -->
<button type="button" class="btn btn-secondary" ngbDropdownToggle>
Secondary
</button>
<!-- /dropdown button -->
<!-- Dropdown Menu -->
<div ngbDropdownMenu>
<a class="dropdown-item" href="javascript:void(0)">Action</a>
<a class="dropdown-item" href="javascript:void(0)">Another action</a>
<a class="dropdown-item" href="javascript:void(0)">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="javascript:void(0)">Separated link</a>
</div>
<!-- /dropdown menu -->
</div>
<!-- /dropdown -->
<!-- Dropdown -->
<div class="btn-group mr-2 mb-2" ngbDropdown>
<!-- Dropdown Button -->
<button type="button" class="btn btn-success" ngbDropdownToggle>
Success
</button>
<!-- /dropdown button -->
<!-- Dropdown Menu -->
<div ngbDropdownMenu>
<a class="dropdown-item" href="javascript:void(0)">Action</a>
<a class="dropdown-item" href="javascript:void(0)">Another action</a>
<a class="dropdown-item" href="javascript:void(0)">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="javascript:void(0)">Separated link</a>
</div>
<!-- /dropdown menu -->
</div>
<!-- /dropdown -->

Button groups and split buttons

Preview
HTML
Preview
HTML
<div class="btn-group mr-3 mb-2">
<button type="button" class="btn btn-outline-success">Plain ol' button</button>
<div class="btn-group" ngbDropdown role="group" aria-label="Button group with nested dropdown">
<button class="btn btn-outline-primary" ngbDropdownToggle>Drop me</button>
<div class="dropdown-menu" ngbDropdownMenu>
<button class="dropdown-item">One</button>
<button class="dropdown-item">Two</button>
<button class="dropdown-item">Four!</button>
</div>
</div>
</div>
<div class="btn-group mr-3 mb-2">
<button type="button" class="btn btn-primary">Split me</button>
<div class="btn-group" ngbDropdown role="group" aria-label="Button group with nested dropdown">
<button class="btn btn-primary dropdown-toggle-split" ngbDropdownToggle></button>
<div class="dropdown-menu" ngbDropdownMenu>
<button class="dropdown-item">One</button>
<button class="dropdown-item">Two</button>
<button class="dropdown-item">Four!</button>
</div>
</div>
</div>

For more information about options, check the Ng-Bootstrap