aurelia-plugins-dropdown
A dropdown plugin for Aurelia.
Installation
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:
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
Configuration
Inside of your main.js
or main.ts
file simply load the plugin inside of the configure method using .plugin()
.
; { aureliause ; aureliause ; await aureliastart; aurelia;}
Usage
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.
Dropdown Action Another action
Styling
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 ;;;;;;;;;;;;;;;;;; // DROPDOWNS .dropdown, .dropleft, .dropright, .dropup .dropdown-toggle-no-caret .dropdown-menu-right .dropdown-item .dropdown-divider .dropdown-header .dropdown-text .dropleft .dropleft .dropdown-toggle .dropright .dropright .dropdown-toggle .dropup .dropup .dropdown-toggle