❤
npm
Sign UpSign In

jonelson-tmp-navigation

0.0.3 • Public • Published

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
Navigation

NavigationLink

Kind: global class
Emits: Navigation#event:linkSelected

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

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

navigation.shouldAnimate : boolean

Whether the component should display animations. shouldAnimate is turned on after page load.

Kind: instance property of Navigation
JS Example

navigation.shouldAnimate = true;

navigation.width : integer

The current width of the navigation component, in pixels

Kind: instance property of Navigation
JS Example

navigation.width = 80;

HTML Example

<ak-navigation width="80"/>;

navigation.toggleHandler : function

The handler for the sidebar toggling behaviour. The handler is bound on attach, and unbound on detach.

Kind: instance property of Navigation
JS Example

navigation.toggleHandler = function() {};

navigation.open : boolean

Whether the sidebar is in the open state. Note that setting this to false will set both navigation.createDrawerOpen and navigation.searchDrawerOpen to false, and may recompute the navigation.width.

Kind: instance property of Navigation
JS Example

navigation.open = false;

HTML Example

<ak-navigation open="false"/>;

navigation.containerName : string

The name of the navigation container, displayed next to the container logo.

Kind: instance property of Navigation
JS Example

navigation.containerName = 'Dashboard';

HTML Example

<ak-navigation container-name="Dashboard"/>;

navigation.containerLogo : string

The logo for the navigation container, displayed next to the container name.

Kind: instance property of Navigation
JS Example

navigation.containerLogo = 'http://example.com/img.jpg';

HTML Example

<ak-navigation container-logo="http://example.com/img.jpg"/>;

navigation.containerHref : string

The link that the container name and logo will reference.

Kind: instance property of Navigation
JS Example

navigation.containerHref = 'http://example.com';

HTML Example

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

navigation.productLogo : string

The name of the product glyph, to be placed in the global navigation. See the ak-icon#glyph docs for more details.

Kind: instance property of Navigation
JS Example

navigation.productLogo = 'bitbucket';

HTML Example

<ak-navigation product-logo="bitbucket"/>;

navigation.productHref : boolean

The link that the product logo will reference

Kind: instance property of Navigation
JS Example

navigation.productHref = 'http://example.com';

HTML Example

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

navigation.containerHidden : boolean

Whether the navigation's container should be hidden at all times. Note that this takes precedence over navigation.open – regardless of whether navigation.open is true, the container will be hidden.

Kind: instance property of Navigation
JS Example

navigation.containerHidden = true;

HTML Example

<ak-navigation container-hidden/>;

navigation.collapsible : string

Whether the navigation is collapsible by the user. If navigation.collapsible === false, it does not prevent direct manipulation of navigation.open.

Kind: instance property of Navigation
JS Example

navigation.collapsible = 'http://example.com';

HTML Example

<ak-navigation collapsible/>;

navigation.searchDrawerOpen : string

Whether the search drawer is open. Note that setting this to true will set navigation.createDrawerOpen to false.

Kind: instance property of Navigation
JS Example

navigation.searchDrawerOpen = true;

HTML Example

<ak-navigation search-drawer-open/>;

navigation.createDrawerOpen : string

Whether the create drawer is open. Note that setting this to true will set navigation.createDrawerOpen to false.

Kind: instance property of Navigation
JS Example

navigation.createDrawerOpen = true;

HTML Example

<ak-navigation create-drawer-open/>;

Readme

Keywords

none

Package Sidebar

Install

npm i jonelson-tmp-navigation

Repository

bitbucket.org/atlassian/atlaskit

Homepage

bitbucket.org/atlassian/atlaskit#readme

Weekly Downloads

0

Version

0.0.3

License

Apache-2.0

Last publish

Collaborators

  • jonelson
Try on RunKit
Report malware