A dropdown plugin for Aurelia.
Webpack/Aurelia CLI
npm install aurelia-plugins-dropdown --save
When using Aurelia CLI add the following dependency to aurelia.json
as described in the documentation:
{
"name": "aurelia-plugins-dropdown",
"path": "../node_modules/aurelia-plugins-dropdown/dist/amd",
"main": "aurelia-plugins-dropdown"
}
Add node_modules/babel-polyfill/dist/polyfill.min.js
to the prepend list in aurelia.json
. Do not forgot to add babel-polyfill
to the dependencies in package.json
.
For projects using Webpack, please add babel-polyfill
to your webpack.config.js
as documented by babeljs.io.
JSPM
jspm install aurelia-plugins-dropdown
Bower
bower install aurelia-plugins-dropdown
Inside of your main.js
or main.ts
file simply load the plugin inside of the configure method using .plugin()
.
import {PLATFORM} from 'aurelia-framework';
export async function configure(aurelia) {
aurelia.use
.standardConfiguration()
.developmentLogging();
aurelia.use
.plugin(PLATFORM.moduleName('aurelia-plugins-dropdown'));
await aurelia.start();
aurelia.setRoot('app');
}
Once the dropdown plugin is configured, to use it simply add the custom element <aup-dropdown></aup-dropdown>
in your view.
The custom element contains 2 named slots dropdown-toggle
and dropdown-menu
.
There are 2 usables attributes direction
and right
:
- Use the
direction
attribute to change the direction of the dropdown. By default the dropdown usesdown
, but you can also useup
,left
orright
to show the dropdown-menu up, left or right of the button. - Use the
right
attribute to change the alignment of thedropdown-menu
to the right. The CSS classdropdown-menu-right
is added.
<aup-dropdown direction="down" right="false">
<div slot="dropdown-toggle">Dropdown</div>
<div slot="dropdown-menu">
<a class="dropdown-item" click.delegate="action()" href>Action</a>
<a class="dropdown-item" click.delegate="anotherAction()" href>Another action</a>
</div>
</aup-dropdown>
The dropdown doesn't come with styling. If you use the CSS Framework Faceman
, styling is provided automatically. Otherwise copy and paste the below styling to your SCSS stylesheet. Use the variables to change the look-and-feel.
// VARIABLES
$dropdown-item-background: transparent !default;
$dropdown-item-color-hover: white !default;
$dropdown-item-text-decoration: none !default;
$dropdown-item-text-decoration-hover: none !default;
$dropdown-menu-background: white !default;
$dropdown-menu-box-shadow: none !default;
$dropdown-menu-margin-spacer: 1px !default;
$dropdown-menu-min-width: 160px !default;
$dropdown-item-background-hover: #0000ff !default;
$dropdown-item-color: #333333 !default;
$dropdown-item-padding-x: 16px !default;
$dropdown-item-padding-y: 4px !default;
$dropdown-divider-border: solid 1px #cccccc !default;
$dropdown-divider-padding-y: $dropdown-item-padding-y !default;
$dropdown-header-color: #333333 !default;
$dropdown-menu-border: solid 1px #cccccc !default;
$dropdown-menu-border-radius: 4px !default;
$dropdown-menu-padding: 4px 0 !default;
// DROPDOWNS
.dropdown, .dropleft, .dropright, .dropup { position: relative; }
[class^=dropdown-toggle] { cursor: pointer; white-space: nowrap; @include caret(); }
.dropdown-toggle-no-caret { &::after, &::before { display: none; } }
[class*=dropdown-menu] {
background: $dropdown-menu-background; border: $dropdown-menu-border; border-radius: $dropdown-menu-border-radius; box-shadow: $dropdown-menu-box-shadow;
display: block; left: 0; list-style: none; margin: $dropdown-menu-margin-spacer 0 0; min-width: $dropdown-menu-min-width; padding: $dropdown-menu-padding;
position: absolute; top: 100%; z-index: $zindex-dropdown;
}
.dropdown-menu-right { left: auto; right: 0; }
.dropdown-item {
background: $dropdown-item-background; color: $dropdown-item-color; display: block; padding: $dropdown-item-padding-y $dropdown-item-padding-x;
text-decoration: $dropdown-item-text-decoration; white-space: nowrap; width: 100%;
@include hover { background: $dropdown-item-background-hover; color: $dropdown-item-color-hover; text-decoration: $dropdown-item-text-decoration-hover; }
}
.dropdown-divider { border-top: $dropdown-divider-border; height: 0; margin: $dropdown-divider-padding-y 0; }
.dropdown-header { color: $dropdown-header-color; display: block; padding: $dropdown-item-padding-y $dropdown-item-padding-x; white-space: nowrap; }
.dropdown-text { color: $dropdown-item-color; display: block; padding: $dropdown-item-padding-y $dropdown-item-padding-x; }
.dropleft [class*=dropdown-menu] { left: auto; margin: 0 $dropdown-menu-margin-spacer 0 0; right: 100%; top: 0; }
.dropleft .dropdown-toggle { @include caret(left); &::before { vertical-align: 0; } }
.dropright [class*=dropdown-menu] { left: 100%; margin: 0 0 0 $dropdown-menu-margin-spacer; right: auto; top: 0; }
.dropright .dropdown-toggle { @include caret(right); &::after { vertical-align: 0; } }
.dropup [class*=dropdown-menu] { bottom: 100%; margin: 0 0 $dropdown-menu-margin-spacer; top: auto; }
.dropup .dropdown-toggle { @include caret(up); }