3.0.0 • Published 5 years ago

@terminus/ui-navigation v3.0.0

Weekly downloads
24
License
MIT
Repository
github
Last release
5 years ago

CI/CD Status Codecov MIT License
NPM version Library size

Table of Contents

Installation

Packages that need to be installed

  • @angular/material
  • @terminus/design-tokens
  • @terminus/fe-utilities
  • @terminus/ui-icon
  • @terminus/ui-navigation
  • @terminus/ui-pipes
  • @terminus/ui-styles
  • @terminus/ui-tooltip
  • @terminus/ui-utilities

Use the ng add command to quickly install all the needed dependencies:

ng add @terminus/ui-navigation

Modules that need to be in NgModule

  • BrowserAnimationsModule
  • TsNavigationModule
  • RouterModule.forRoot(MY_ROUTES)

CSS imports

In your top level stylesheet, add these imports:

@import '~@terminus/design-tokens/css/library-design-tokens.css';
@import '~@terminus/ui-styles/terminus-ui.css';

CSS resources

Load the needed font families by adding this link to the <head> of your application:

<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,500;0,700;1,400&display=swap" rel="stylesheet">

Usage

Create a navigation menu. A navigation menu is a collection of navigation items grouped together, with a space for a user and welcome message.

<ts-navigation
  [items]="navigationItems$"
  (itemSelected)="myMethod($event)"
></ts-navigation>

Navigation item

An object describing a "link" within the navigation. It gets a name, an action or destination, and a boolean alwaysHidden. Optionally,
it can receive boolean values for isForAdmin and isDisabled.

const NEW_NAV_ITEM: TsNavigationItem = {
  name: '0 Foo',
  action: {
    type: 'my:action',
  },
  alwaysHidden: false,
};

- or -

const NEW_NAV_ITEM: TsNavigationItem = {
  name: '1 Bar',
  destination: ['/components/menu'],
  alwaysHidden: false,
};

Actions

An action is an object with a type. It gets emitted upon click.

Links

A link is a string or string[], with a destination and optional boolean isExternal. Without isExternal, a link is considered a router link, and with isExternal, it's treated as an href.

Nav items array

An array of navigation items that is passed to ts-navigation as items.

const NAV_ITEMS_MOCK: TsNavigationItem[] = [
  {
    name: '1 Components',
    destination: '/components',
    alwaysHidden: false,
  },
  {
    name: '2 Nav',
    action: 'my:navigationAction',
    alwaysHidden: false,
  },
  {
    name: '3 Buttons',
    destination: ['/components/button'],
    alwaysHidden: true,
  },
];

Welcome message

A message presented with the user name in the navigation. Default message is Welcome. Custom messages will truncate after exceeding welcomeMsgLength which is also customizable, and defaults to 25 characters. Any truncated message will appears with ellipses and have a tooltip with the full message.

<ts-navigation
  welcomeMessage="Welcome back,"
  welcomeMsgLength="15"
></ts-navigation>

User

The user's name which, if defined, displays with the welcome message, in a location separate from the items. User names will truncate after
exceeding userNameLength which is also customizable, and defaults to 20 characters. A truncated user name will appear with ellipses and
have a tooltip with the full name.

<ts-navigation
  [user]="currentUser$ | async"
  userNameLength="10"
></ts-navigation>
tslib@angular-devkit/schematics@schematics/angular
@zalastax/nolb-_ter@infinitebrahmanuniverse/nolb-_ter@everything-registry/sub-chunk-905
3.0.0

5 years ago

2.1.6

5 years ago

2.1.5

5 years ago

2.1.4

5 years ago

2.1.3

5 years ago

2.1.2

5 years ago

2.1.1

5 years ago

2.1.0

5 years ago

2.0.12

5 years ago

2.0.11

5 years ago

2.0.10

5 years ago

2.0.9

5 years ago

2.0.8

5 years ago

2.0.7

5 years ago

2.0.6

5 years ago

2.0.5

5 years ago

2.0.4

5 years ago

2.0.3

5 years ago

2.0.2

5 years ago

2.0.1

5 years ago

2.0.0

5 years ago

1.0.7

5 years ago

1.0.6

5 years ago

1.0.5

5 years ago

1.0.4

5 years ago

1.0.3

5 years ago

1.0.2

5 years ago

1.0.1

5 years ago

1.0.0

5 years ago

0.0.1

5 years ago