0.0.6 • Published 8 years ago
ember-columnar-menu v0.0.6
ember-columnar-menu
ember-columnar-menu
is a flexible menu component that has built-in support for keyboard navigation, multiple column layouts, and buttons that can toggle into inputs.
Installation
ember install ember-columnar-menu
Usage
export default Ember.Controller.extend({
choices: ['foo', 'bar', 'baz'],
actions: {
myAction(choice) {
console.log(choice);
}
}
});
{{ember-columnar-menu choices=choices onChoose=(action "myAction")}}
// styles/app.scss
@import "ember-columnar-menu/ember-columnar-menu";
This results in a single column menu with buttons 'foo', 'bar', and 'baz'. If 'bar' is clicked, then 'myAction' will receive:
myAction(choice) {
console.log(choice); // { text: 'bar', value: 'bar' }
}
inputable
export default Ember.Controller.extend({
choices: ['foo', { text: 'bar', inputable: true }, 'baz'],
actions: {
myAction(choice) {
console.log(choice); // { text: 'bar', value: 'the value that was input' }
}
}
});
columns
To display multiple columns:
{{ember-columnar-menu choices=choices columns=5}}
Key Bindings
By default:
- acceptKeys: 'Enter'
- cancelKeys: 'Escape'
- moveDown: 'ArrowDown'
- moveLeft: 'ArrowLeft'
- moveRight: 'ArrowRight'
- moveUp: 'ArrowUp'
export default Ember.Component.extend({
customMoveDown: ['KeyS']
})
{{ember-columnar-menu moveDownKeys=customMoveDown}}
Consult the ember-keyboard
docs for more info on key names.