@ax-design/navigation
TypeScript icon, indicating that this package has built-in type declarations

0.0.2 • Public • Published

navigation

Web component that implement Navigation Indicator animation of Axiom Design System.

npm version CI Status DeepScan grade Telegram chat group MIT Licence

Screenshot

Installation

// with npm
npm install @ax-design/navigation

// with yarn
yarn add @ax-design/navigation

and import it:

//CommonJS
require('@ax-design/navigation').register();

//ESModule
import { register } from '@ax-design/navigation';
register();

Usage

Horizontal Navigation

<ax-navigation>
  <ax-navigation-item>Home</ax-navigation-item>
  <ax-navigation-item>Apps</ax-navigation-item>
  <ax-navigation-item>Games</ax-navigation-item>
</ax-navigation>

Vertical Navigation

<ax-navigation vertical>
  <ax-navigation-item>Home</ax-navigation-item>
  <ax-navigation-item>Apps</ax-navigation-item>
  <ax-navigation-item>Games</ax-navigation-item>
</ax-navigation>

Style Controlling

Navigation component uses custom properties to manage the style of the navigation indicator.

--navigation-indicator-speed

Type: <time>

Default: 600ms

Description: The speed of navigation indicator's animation.

--navigation-indicator-color

Type: <color>

Default: black

Description: The color of navigation indicator.

--navigation-indicator-width

Type: <length>

Default: 2px

Description: The width of navigation indicator.

Events

Switch

Bubbles: No

Cancelable: No

Interface: SwitchEvent

Description: A ax-navigation element receives a switch event when the indicator switched from one item to another item.

Properties:

  • SwitchEvent.detail.from: The highlighted element before user switched the tab;
  • SwitchEvent.detail.to: The highlighted element after user switched the tab.

Readme

Keywords

none

Package Sidebar

Install

npm i @ax-design/navigation

Weekly Downloads

4

Version

0.0.2

License

MIT

Unpacked Size

198 kB

Total Files

37

Last publish

Collaborators

  • balthild
  • jackworks
  • losses