ember-flex-menu
is a flexible menu component that has built-in support for keyboard navigation, multiple column layouts, and buttons that can toggle into inputs.
ember install ember-flex-menu
export default Ember.Controller.extend({
choices: ['foo', 'bar', 'baz'],
actions: {
myAction(choice) {
console.log(choice);
}
}
});
// styles/app.scss
@import "ember-flex-menu/ember-flex-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' }
}
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' }
}
}
});
To display multiple columns:
By default:
- acceptKeys: ['Enter']
- cancelKeys: ['Escape']
- moveDown: ['ArrowDown']
- moveLeft: ['ArrowLeft']
- moveRight: ['ArrowRight']
- moveUp: ['ArrowUp']
export default Ember.Component.extend({
customMoveDown: ['KeyS']
})
Consult the ember-keyboard
docs for more info on key names.