Neurotic Pantaloon Maker

    @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.

    Keywords

    none

    Install

    npm i @ax-design/navigation

    DownloadsWeekly Downloads

    4

    Version

    0.0.2

    License

    MIT

    Unpacked Size

    198 kB

    Total Files

    37

    Last publish

    Collaborators

    • balthild
    • jackworks
    • losses