jonelson-tmp-navigation

v0.0.3

Published

3 years ago

ak-navigation webcomponent (temporary)

Downloads

0High
0Medium
0Low

jonelson

Navigation

This component is displayed as a sidebar and it contains two sections: "global" and "container". Both sections are used for navigating through different views and containers in a product.

Example navigation

Although the ak-navigation component can be used by itself, it works best in conjunction with the ak-page component.

##Try it out

Interact with a live demo of the ak-navigation component.

Although the ak-navigation component can be used by itself, it works best in conjunction with the ak-page component.

Installation

npm install ak-navigation

Using the component

HTML

The ak-navigation package exports the AkNavigation Skate component.

Import the component in your JS resource:

bundle.js

import 'ak-navigation';

Now you can use the defined tag in your HTML markup:

index.html

<html>
  <head>
    <script src="bundle.js"></script>
  </head>
  <body>
    <!-- ... -->
    <ak-navigation
        slot="navigation"
        open
        containe-name="Nucleus"
        container-href="http://example.com"
        container-logo="http://example.com/img.jpg"
        product-href="http://atlassian.design"
        collapsible
      >
        <!-- Slots for global actions -->
        <ak-icon slot="global-home" glyph="bitbucket" />
        <ak-icon slot="global-search" glyph="search" />
        <ak-icon slot="global-create" glyph="create" />

        <!-- Slots for global help / account -->
        <ak-dropdown position="right bottom" slot="global-profile">
          <ak-dropdown-trigger slot="trigger">
            <ak-avatar size="small" src="http://example.com/img.jpg" />
          </ak-dropdown-trigger>
          <ak-dropdown-item>Settings</ak-dropdown-item>
          <ak-dropdown-item>Log out</ak-dropdown-item>
        </ak-dropdown>
        <ak-dropdown position="right bottom" slot="global-help">
          <ak-dropdown-trigger slot="trigger">
            <ak-icon glyph="help" />
          </ak-dropdown-trigger>
          <ak-dropdown-item>AtlasKit is great</ak-dropdown-item>
          <ak-dropdown-item>Tell your friends</ak-dropdown-item>
        </ak-dropdown>

        <!-- Slots for search and create drawer content -->
        <div is slot="global-search-drawer">
          Search
        </div>
        <div is slot="global-create-drawer">
          Create
        </div>

        <!-- Default slot is the container -->
        <ak-navigation-link selected>
          <ak-icon slot="icon" glyph="calendar" /> Calendar
        </ak-navigation-link>
        <ak-navigation-link href="http://atlassian.design" >
          <ak-icon slot="icon" glyph="overview" /> Atlassian design
        </ak-navigation-link>
        <ak-navigation-link>
          <ak-icon slot="icon" glyph="canvas" /> Canvas
        </ak-navigation-link>
        <ak-navigation-link>
      </ak-navigation>
  </body>
</html>

You can also use it from within another JavaScript resource:

import Navigation from 'ak-navigation';

const component = new Navigation();
document.body.appendChild(component);

React

This is a standard web component, if you want to use it in your React app, use the Skate.js React integration.

import Navigation from 'ak-navigation';
import reactify from 'skatejs-react-integration';

const ReactComponent = reactify(Navigation, {});

ReactDOM.render(<ReactComponent />, container);

Classes

NavigationLink

Kind: global class
Emits: Navigation#event:linkSelected

Properties
- navigationLink.href : string
- navigationLink.selected : boolean
Events

`new NavigationLink()`

Create instances of the component programmatically, or using markup.

HTML Example

<ak-navigation-link>
   <ak-icon gylph="bitbucket" slot="icon"/>
   Bitbucket
</ak-navigation-link>

`navigationLink.href` : string

The link that the NavigationLink references.

Kind: instance property of NavigationLink
JS Example

navigationLink.href = 'http://example.com';

HTML Example

<ak-navigation-link href="http://example.com"/>;

`navigationLink.selected` : boolean

Whether the navigation is currently selected, which is true if the user has clicked on the link. This will be set to true on selection, and set to false when other NavigationLink in the same navigation becomes selected.

Kind: instance property of NavigationLink
JS Example

navigationLink.selected = true;

HTML Example

<ak-navigation-link selected/>;

`"linkSelected"`

This event gets emitted before a link is selected

Kind: event emitted by NavigationLink
HTML Example

<ak-navigation
  onLinkSelected={(e) => console.log('A link has been selected')}
></ak-navigation>

JS Example

import { events } from 'ak-navigation';

navigation.addEventListener(events.linkSelected, (e) => {
  console.log('A link has been selected');
});

`"createDrawerSelected"`

This event gets emitted before a create drawer is selected (either opening or closing it)

Kind: event emitted by NavigationLink
HTML Example

<ak-navigation
  onCreateDrawerSelected={(e) => console.log('Create drawer has been selected')}
></ak-navigation>

JS Example

import { events } from 'ak-navigation';

navigation.addEventListener(events.createDrawerSelected, (e) => {
  console.log('Create drawer has been selected');
});

`"searchDrawerSelected"`

This event gets emitted before a search drawer is selected (either opening or closing it)

Kind: event emitted by NavigationLink
HTML Example

<ak-navigation
  onSearchDrawerSelected={(e) => console.log('Search drawer has been selected')}
></ak-tag>

JS Example

import { events } from 'ak-navigation';

navigation.addEventListener(events.searchDrawerSelected, (e) => {
  console.log('Search drawer has been selected');
});

`"open"`

This event gets emitted before the navigation.open is set to true.

Kind: event emitted by NavigationLink
HTML Example

<ak-navigation
  onOpen={(e) => console.log('Navigation has opened')}
></ak-navigation>

JS Example

import { events } from 'ak-navigation';

navigation.addEventListener(events.open, (e) => {
  console.log('Navigation has opened');
});

`"close"`

This event gets emitted before the navigation.open is set to false.

Kind: event emitted by NavigationLink
HTML Example

<ak-navigation
  onClose={(e) => console.log('Navigation has closed')}
></ak-navigation>

JS Example

import { events } from 'ak-navigation';

navigation.addEventListener(events.close, (e) => {
  console.log('Navigation has closed');
});

`"widthChanged"`

This event gets emitted after the width of the navigation changes. Note that this will also be emitted one time at the start, with e.detail.oldWidth set to null.

Kind: event emitted by NavigationLink
HTML Example

<ak-navigation
  onWidthChanged={(e) => console.log(`Navigation width changed.
     Old width was ${e.detail.oldWidth}, new width is ${e.detail.newWidth},
     which matches ${elem.width}`)}
></ak-navigation>

JS Example

import { events } from 'ak-navigation';

navigation.addEventListener(events.widthChanged, (e) => {
  console.log(`Navigation width changed.
     Old width was ${e.detail.oldWidth}, new width is ${e.detail.newWidth},
     which matches ${elem.width}`)
});

`"resizeStart"`

This event gets emitted when a user begins resizing the navigation by dragging with mouse.

Kind: event emitted by NavigationLink
HTML Example

<ak-navigation
  onResizeStart={(e) => console.log('Resize has started')}
></ak-navigation>

JS Example

import { events } from 'ak-navigation';

navigation.addEventListener(events.widthChanged, (e) => {
  console.log(`Navigation width changed.
     Old width was ${e.detail.oldWidth}, new width is ${e.detail.newWidth},
     which matches ${elem.width}`)
});

`"widthChanged"`

This event gets emitted after the width of the navigation changes. Note that this will also be emitted one time at the start, with e.detail.oldWidth set to null.

Kind: event emitted by NavigationLink
HTML Example

<ak-navigation
  onWidthChanged={(e) => console.log(`Navigation width changed.
     Old width was ${e.detail.oldWidth}, new width is ${e.detail.newWidth},
     which matches ${elem.width}`)}
></ak-navigation>

JS Example

import { events } from 'ak-navigation';

navigation.addEventListener(events.widthChanged, (e) => {
  console.log(`Navigation width changed.
     Old width was ${e.detail.oldWidth}, new width is ${e.detail.newWidth},
     which matches ${elem.width}`)
});

Navigation

Kind: global class
Emits: Navigation#event:createDrawerSelected, Navigation#event:searchDrawerSelected, Navigation#event:open, Navigation#event:close, Navigation#event:widthChanged, Navigation#event:resizeStart, Navigation#event:resizeEnd

Properties
- navigation.shouldAnimate : boolean
- navigation.width : integer
- navigation.toggleHandler : function
- navigation.open : boolean
- navigation.containerName : string
- navigation.containerLogo : string
- navigation.containerHref : string
- navigation.productLogo : string
- navigation.productHref : boolean
- navigation.containerHidden : boolean
- navigation.collapsible : string
- navigation.searchDrawerOpen : string
- navigation.createDrawerOpen : string

`new Navigation()`

Create instances of the component programmatically, or using markup.

HTML Example

<ak-navigation open collapsible />

JS Example

import Navigation from 'ak-navigation';

const navigation = new Navigation();
document.body.appendChild(navigation);