@terminus/ui-link
v4.0.1
Published
<h1>Link</h1>
Downloads
16
Keywords
Readme
Table of Contents
Installation
Use the ng add command to quickly install all the needed dependencies:
ng add @terminus/ui-linkCSS 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
Wrap your link text and define a destination:
<ts-link [destination]="['your', 'path']">My link</ts-link>External links
To signify a link will leave the current app or site, set external to true.
When the destination is a string and contains either mailto or tel, the external icon would not show.
<ts-link
[destination]="http://google.com"
[external]="true"
>My link</ts-link>NOTE: When external is set to true, the link should be a standard link in string form.
Tab index
A custom tabindex can also be set:
<ts-link
[destination]="http://google.com"
[tabIndex]="2"
>My link</ts-link>Local URL fragments
Local fragments are supported for deep linking within a page:
<ts-link
[destination]="['your', 'path']"
fragment="myFragment"
[tabIndex]="2"
>My link</ts-link>
<!-- This would route to: `/your/path#myFragment -->If no destination is defined, it will fallback to the local page: ['.']:
<ts-link
fragment="myFragment"
[tabIndex]="2"
>My link</ts-link>
<!-- If used on the route `/my/home`, this would route to: `/my/home#myFragment` -->Router changes to support local links
There are a couple needed Router configuration changes to support local links:
import { NgModule } from '@angular/core';
import {
ExtraOptions,
RouterModule,
Routes,
} from '@angular/router';
const myRoutes: Routes = [...];
const routerOptions: ExtraOptions = {
anchorScrolling: 'enabled',
scrollPositionRestoration: 'enabled',
};
@NgModule({
...
imports: [RouterModule.forRoot(myRoutes, routerOptions)],
...
})Learn more about Angular's
ExtraOptionshere: https://angular.io/api/router/ExtraOptions