Set of directives that offers an easy and accessible solution for creating keyboard navigation between custom elements.
Installation
Add and import the module into your imports section.
Module
Standalone directives
Anatomy
Directive's set structure.
Input props
KeyNavigationeRoot Attribute Directive
The root directive that syncs the navigable items. It listens to the keydown and focusout events in the container.
| Input | Default | Type | Description |
|---|---|---|---|
| loop | true | boolean | Navigate from the first item to the last and vice versa. |
| disabled | false | boolean | Disable the keyboard navigation |
| direction | vertical | "vertical" | "horizontal" | Navigation direction, use Down/Up or Left/Right keys. |
| tabNavigation | true | boolean | When active, allows items to get focus with tab. |
| navigationRules | [] | NavigationRule[] | Add or override custom key rules. |
| focusCallback | — | FocusCallback | Gets called every time an item gets focused. |
| rememberLastFocus | true | boolean | Only works with tabNavigation = false. Remember last focused when it leaves the root |
KeyNavigationItem Attribute Directive
A directive to register/remove the element in the navigation root.
| Input | Default | Type | Description |
|---|---|---|---|
| disabled | false | boolean | Disable item from getting focus. |
| startFocus | false | boolean | When true, focus will start in the selected item when we enter root for the first time. |
| Attribute | Value |
|---|---|
| data-disabled | Shows when disabled |
Navigation Rules
THe directive allow us to set custom keyboard rules and override the existing ones.
Default Navigation Rules
Default set of rules that are binded into the root.
| Key | Description |
|---|---|
| Home | Navigates to the first element. |
| End | Navigates to the last elemenet. |
| ArrowUp | Navigates to the previous element when orientation is "vertical" |
| ArrowDown | Navigates to the previous element when orientation is "vertical" |
| ArrowRight | Navigates to the next element when orientation is "horizontal" |
| ArrowLeft | Navigates to the previous element when orientation is "horizontal" |
Override a rule
We can override default navigation rules by providing a new NavigationRule object with override.
Add a callback in an existing rule
We can add a callback to an existing rule by providing a new NavigationRule object and override: false. It will call our callback before the navigation.
Create a new rules
We can also create existing rules by providing a new NavigationRule object. It will add a listener to the root and call your callback.