ember-flex-menu
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.
Installation
ember install ember-flex-menu
Usage
Controller;
{{ember-flex-menu choices=choices onChoose=(action "myAction")}}
// styles/app.scss ;
This results in a single column menu with buttons 'foo', 'bar', and 'baz'. If 'bar' is clicked, then 'myAction' will receive:
{ console; // { text: 'bar', value: 'bar' }}
inputable
Controller;
columns
To display multiple columns:
{{ember-flex-menu choices=choices columns=5}}
Key Bindings
By default:
- acceptKeys: ['Enter']
- cancelKeys: ['Escape']
- moveDown: ['ArrowDown']
- moveLeft: ['ArrowLeft']
- moveRight: ['ArrowRight']
- moveUp: ['ArrowUp']
Component
{{ember-flex-menu moveDownKeys=customMoveDown}}
Consult the ember-keyboard
docs for more info on key names.