@terminus/ui-navigation
v3.0.0
Published
<h1>Navigation</h1>
Downloads
10
Keywords
Readme
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-navigationModules that need to be in NgModule
BrowserAnimationsModuleTsNavigationModuleRouterModule.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>