Use the ng add command to quickly install all the needed dependencies:
ng add @terminus/ui-page-headerIn your top-level stylesheet, add these imports:
@import '~@terminus/design-tokens/css/library-design-tokens.css';
@import '~@terminus/ui-styles/terminus-ui.css';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">For the most minimal implementation, add the component and define the title:
<ts-page-header title="My page title!"></ts-page-header>By default, an <h1> is used for the page title. If the usage requires the page header to not define the top level
heading, it can be set to use <h2> or <h3>:
<ts-page-header title="My page title!" titleLevel="h2"></ts-page-header>If an array of pages is passed to pageMenuContent then the title will become a trigger to open a dropdown menu with
links to the passed in pages. Unlike breadcrumbs, these items must have an associated route.
const myPages: TS_PAGE_HEADER_ROUTE[] = [
{
display: 'Report 1',
route: '/reports/1',
},
{
display: 'Report 2',
route: '/reports/2',
},
];<ts-page-header title="My page title!" [pageMenuContents]="myPages"></ts-page-header>If an array of breadcrumbs is passed in, the component will display breadcrumbs. A breadcrumb may or may not have an associated route:
// This breadcrumb will display as plain text:
const crumbWithNoRoute: TS_PAGE_HEADER_STATIC_BREADCRUMB = {
display: 'Crumb with NO route',
// ...my other properties
};
// This breadcrumb will display as a link:
const crumbWithRoute: TS_PAGE_HEADER_ROUTE = {
display: 'Reports',
route: '/reports', // accepts any valid `routerLink` input
};
const myBreadcrumbs: TS_PAGE_HEADER_ROUTES = [crumbWithNoRoute, crumbWithRoute];<ts-page-header title="My page title!" [breadcrumbs]="myBreadcrumbs"></ts-page-header>If passed in, the time since last update will display in the top right:
const myDate = new Date(2020, 9, 14);<ts-page-header title="My page title!" [lastUpdatedDate]="myDate"></ts-page-header>A list of key-value pairs can be displayed below the title as metadata:
const myMetadata: TS_PAGE_HEADER_METADATA[] = [
['Campaign Type', 'Hosted Event'],
['Created Date', 'May 2, 2021'],
];<ts-page-header [metadata]="myMetadata"></ts-page-header>