@terminus/ui-navigation
v3.0.0
Published
<h1>Navigation</h1>
Downloads
4
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-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>