Traverse List Web Component


!npm
!NPM
!npm bundle size
!ts

The Traverse List Web Component Plugin provides a customizable list of items with keyboard navigation functionality.

📇 Table of Contents

$3

You can install the Traverse List Web Component Plugin using npm:

#### Using pnpm

``bash
pnpm add @designbycode/traverse
`

#### Using npm

`bash
npm install @designbycode/traverse
`

#### Using yarn

`bash
yarn add @designbycode/traverse
`

Usage

$3

`javascript
import "@designbycode/traverse"
`

$3

Use the `` element in your HTML to create the list:

`html


list 1
list 2
list 3


`

Attributes

* loopable (optional): Set to "false" to prevent looping through items using arrow keys.
Keyboard Navigation
* Use the Arrow Up and Arrow Down keys to navigate through the list.
* Pressing Tab and Shift + Tab will also navigate up and down respectively.

Examples

$3

`html


list 1
list 2
list 3


`

$3

`html


list 1
list 2
list 3


`

$3

Use one of these

* true (Default)
* page
* step
* location
* date
* time
* false

`html
// "page" | "step" | "location" | "date" | "time" | "false" | "true"

list 1
list 2
list 3


``

API

$3

* _currentSelectedItem: The index of the currently selected item.
* _indexPointer: The index of the item with focus.
* menuItems: A collection of menu items within the component.
* _current: The value of the "current" attribute.
* _loopable: A boolean indicating whether looping is enabled.

$3

* addEventListeners(): Adds event listeners for keyboard navigation.
* removeEventListeners(): Removes previously added event listeners.
* navigateKeys(event): Handles keyboard navigation using Arrow keys and Tab.
* moveSelectionUp(): Moves selection up within the list.
* moveSelectionDown(): Moves selection down within the list.
* markAsCurrent(): Marks the currently selected item with the "aria-current" attribute.

Contributing

Contributions to this plugin are welcome! If you encounter any issues, have feature requests, or want to improve the plugin, feel free to create a pull request or submit an issue on the GitHub repository.

$3

License

This project is licensed under the MIT License - see the LICENSE file for details.

Author

Claude Myburgh

• Github: @designbycode
• Npm: @designbycode_