@gavant/ember-bootstrap-dropdown

gavant-ember-bootstrap-dropdown

Dropdown menus built on ember-basic-dropdown, and styled by Bootstrap 4.

Compatibility

• Ember.js v3.12 or above
• Ember CLI v2.13 or above
• Node.js v10 or above

Installation

ember install @gavant/ember-bootstrap-dropdown

IMPORTANT: ember-basic-dropdown will be installed along with the addon, and added to your app's package.json. However, if your app already has ember-basic-dropdown as a dependency via another addon, such as ember-power-select, this should be removed from your package.json via yarn remove ember-basic-dropdown.

Usage

Styles

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.

Components

This addon is simply an extension of ember-basic-dropdown, so you can use the exact same API, with a couple additional components:

<DropdownMenu as |DD|>
    <DD.Trigger @class="btn btn-primary">
        Trigger
    </DD.Trigger>
    <DD.Content class="dropdown-menu">
        <DropdownAction @dd={{DD} @action={{this.myAction}}>
            Dropdown Action
        </DropdownAction>
        <DropdownLink @route="some.route" @dd={{DD}}>
            Dropdown Link
        </DropdownLink>
    </DD.Content>
</DropdownMenu>

<DropdownMenu>

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.

<DropdownLink>

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.

<DropdownAction>

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}}.

Contributing

See the Contributing guide for details.

License

This project is licensed under the MIT License.

Changelog

v1.0.3

26 February 2021

• Bump ini from 1.3.5 to 1.3.8 #20
• Bump handlebars from 4.0.11 to 4.7.7 #19
• Bump elliptic from 6.5.2 to 6.5.4 #18
• Bump socket.io from 2.1.0 to 2.4.1 #16
• Bump http-proxy from 1.17.0 to 1.18.1 #14
• Bump node-sass from 4.9.0 to 4.14.1 #13
• Bump lodash.mergewith from 4.6.1 to 4.6.2 #12
• Bump jquery from 3.4.1 to 3.5.1 #9
• Bump mixin-deep from 1.3.1 to 1.3.2 #8
• Bump lodash from 4.17.10 to 4.17.19 #7
• Bump websocket-extensions from 0.1.3 to 0.1.4 #6
• yarn dedup 0edacd4
• Yarn lock changes 95c2a3b
• chore: release 1.0.3 773da68