Welcome to project Axiom!

Project Axiom is a web component set which aims to combine good part of Fluent Design System and Material Design to a single design language.

This repo contains code of Navigation Indicator animation of Fluent design System.

To use this package, install by one of following:

Load the package directly:

<script src="https://unpkg.com/@ax-design/navigation" />

<script>AxNavigation.register()</script>

Load the package by esmodule:

<script type="module">
import { register } from 'https://unpkg.com/@ax-design/navigation/es/index.js'
register()
</script>

Load the package by module loader or bundler:
yarn add @ax-design/navigation or npm i @ax-design/navigation

CommonJS

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

ESModule

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

Home

Apps

Games

General Navigation

In order to use this component, we need to prepare some HTML:

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

Home

Apps

Games

Vertical Navigation

In order to use this component, we need to prepare some HTML:

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

Home

Apps

Games

Default Item

To change the default item, just simply add a default attribute to navigation item.

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

Home

Apps

Games

Colored Indicator

ax-navigation{
  --navigation-indicator-color: red;
}

Home

Apps

Games

Indicator Width

ax-navigation{
  --navigation-indicator-width: 10px;
}

Home

Apps

Games

Animation Speed

ax-navigation{
  --navigation-indicator-speed: 2000ms;
}

Home

Apps

Games

Try to click the navigation item.

Switch Event

A `switch` event will be dispatched if you switched from one tab to another tab.

document.querySelector('.switch-event').addEventListener('switch', (event) => {
  document.querySelector('.switch-information').innerHTML = `You've switched from ${event.detail.from.innerText} to ${event.detail.to.innerText}`
});