Dropdown menus built on ember-basic-dropdown, and styled by Bootstrap 4.
- Ember.js v3.24 or above
- Ember CLI v3.24 or above
- Node.js v12 or above
This addon assumes that the project already has Bootstrap 4 installed, as by default, it applies CSS classes that are compatible with bootstrap's components. However, these classes can be customized if needed.
To use the addon styles, you must use SASS:
ember install ember-cli-sass
Upon addon installation, an @import
statement will be added to your app.scss
:
@import 'ember-basic-dropdown';
@import 'gavant-ember-bootstrap-dropdown';
IMPORTANT: If your app already has ember-basic-dropdown as a dependency via another addon, such as ember-power-select, the @import "ember-basic-dropdown";
line should be removed.
This addon is simply an extension of ember-basic-dropdown, so you can use the exact same API, with a couple additional components:
Just an alias of <BasicDropdown>
, it maintains the exact same API. It may be extended with additional behaviors/functionality in the future, so its preferred to use this component for all dropdown menus.
Extends Ember.LinkComponent
, so provides the same API as <LinkTo>
. It adds additional classes to style it correctly in a bootstrap dropdown, and its DD
attribute MUST be passed the <DropdownMenu as |DD|>
's yielded DD
object (e.g. <DropdownLink @route="route" @dd={{DD}}>Foo</DropdownLink>
), in order for the dropdown to close when clicked. The <DropdownLink>
also uses ember-link-action behind the scenes to allow for simultaneous action/linkto behavior.
A button element that adds additional classes to style it correctly in a bootstrap dropdown. Link dropdown-link
, its DD
attribute MUST be passed the <DropdownMenu as |DD|>
's yielded DD
object (e.g. <DropdownLink @route="route" @dd={{DD}}>Foo</DropdownLink>
), in order for the dropdown to close when clicked.
Additionally, the component may be passed an action via its @action
attribute, which will be invoked on click, and the click event object will be sent up as an action param. You may also prevent action bubbling by passing in @bubbles={{false}}
.
See the Contributing guide for details.
This project is licensed under the MIT License.