ngx-dom-navigator
TypeScript icon, indicating that this package has built-in type declarations

1.0.5-release • Public • Published

Build Status

ngx-dom-navigator

This project was generated with Angular CLI version 11.2.1.

HTML Dom navigator library.

Library that allow keyboard navigation through DOM elements (←↑→↓).

Enchanced version of http://rmariuzzo.github.io/dom-navigator/

Version 1.0.5

  • Added indexSubject to subscribe change of selection, emits the selected element.

  • Fixed ignoredClassList not working on horizontal, vertical mode.

Installation

npm install ngx-dom-navigator

Usage

TS
import { DomNavigatorElement, DomNavigator } from 'ngx-dom-navigator';

let container = document.querySelector('#context') as DomNavigatorElement;

let navigator = new DomNavigator(
  container, {
      mode: DomNavigatorMode.auto,
      selectedClassName: 'selected'
     });`;
HTML
<style>
	ul {
		margin: 0;
		padding: 0;
		list-style-type: none;
		border-color: #3b4253;
		overflow: hidden;
		height: 300px;
	}

	li {
		background-color: #572525;
		border-color: #3b4253 !important;
		color: #b4b7bd;
		width: 50px;
		position: relative;
		margin: 0.25rem;
		display: block;
		padding: 1rem;
		border: 1px solid rgba(34, 41, 47, 0.125);
		float: left;
		font-size: 16px;
	}

	li.selected {
		background-color: #e0ab3a !important;
		color: #fff !important;
	}
</style>
<ul id="context">
	<li
		(click)="click(code)"
		*ngFor="let code of codes; let i = index"
		[class]="i > 30 && i < 40 ? 'ignored-class' : ''"
	>
		{{ code }}
	</li>
</ul>

Properties

  • mode: Navigation mode, auto, horizontal, vertical, grid.
  • selectedClassName: Selected element html class name.
  • left: Key code for left navigation.
  • right: Key code for right navigation.
  • down: Key code for down navigation.
  • up: Key code for up navigation.
  • select: Key code for trigger click event (default ENTER)
  • ignoredClassList: The classname you want to ignore for navigator.
  • indexSubject: RxJs subject that emits the change of selection.

Functions

  • enable: Enables the navigator.
  • disable: Disables the navigator and clears selection.
  • clearSelection: Clears the selection.

Package Sidebar

Install

npm i ngx-dom-navigator

Weekly Downloads

0

Version

1.0.5-release

License

MIT

Unpacked Size

254 kB

Total Files

20

Last publish

Collaborators

  • serhatkaya