furo-navigation-pad

furo-navigation-pad #

@furo/util v2.1.19
import '@furo/util/src/furo-navigation-pad.js';
exports FuroNavigationPad js
exports <furo-navigation-pad> custom-element-definition
superclass LitElement
mixes FBP
summary keyboard navigation helper

furo-navigation-pad listens to different keyboard navigation events like the arrow keys. It will attach the listeners to the parent node and cancel the default and stop the propagation of the events.

The events are available as standalone events or as combined event in the navigated event.

1
2
3
4

<!-- forward all navigation events except the Escape  -->
<furo-navigation-pad
    ignored-keys="Escape" at-navigated="--navpad"
    ></furo-navigation-pad>

Attributes and Properties #

ignoredKeys #

ignored-keys String

Enter the keys you want to ignore as comma seperated values.

i.e. “Escape, ArrowLeft”

Events #

at-navigated → String

Generic navigation event, fired when one of the navigation keys was pressed, detail contains one of these: Escape | Enter | ArrowDown | ArrowUp |ArrowLeft|ArrowRight| PageUp | PageDown | Home | End

enter-pressed #

at-enter-pressed → KeyboardEvent

Fired when Enter key was pressed.

arrow-down-pressed #

at-arrow-down-pressed → KeyboardEvent

Fired when ArrowDown key was pressed.

arrow-up-pressed #

at-arrow-up-pressed → KeyboardEvent

Fired when ArrowUp key was pressed.

arrow-left-pressed #

at-arrow-left-pressed → KeyboardEvent

Fired when ArrowLeft key was pressed.

arrow-right-pressed #

at-arrow-right-pressed → KeyboardEvent

Fired when ArrowRight key was pressed.

escape-pressed #

at-escape-pressed → KeyboardEvent

Fired when Escape key was pressed.

page-up-pressed #

at-page-up-pressed → KeyboardEvent

Fired when PageUp key was pressed.

page-down-pressed #

at-page-down-pressed → KeyboardEvent

Fired when PageDown key was pressed.

home-pressed #

at-home-pressed → KeyboardEvent

Fired when Home key was pressed.

end-pressed #

at-end-pressed → KeyboardEvent

Fired when End key was pressed.

Methods #