| Title | Added | Status | Last reviewed |
|---|---|---|---|
Header component |
v2.5.0 |
Active |
2018-11-20 |
Reusable header for Alfresco applications.
<adf-layout-header
title="title"
logo="logo.png"
[redirectUrl]="'/home'"
color="primary"
(clicked)=toggleMenu($event)>
</adf-layout-header>The right-hand side of the header has free-form content that you supply in the body of the element:
<adf-layout-header>
<div>Optional content for right-hand side</div>
</adf-layout-header>| Name | Type | Default value | Description |
|---|---|---|---|
| color | ThemePalette |
Background color for the header. It can be any hex color code or one of the Material theme colors: 'primary', 'accent' or 'warn'. | |
| expandedSidenav | boolean |
true | expandedSidenav: Toggles the expanded state of the component. |
| logo | string |
Path to an image file for the application logo. | |
| position | string |
"start" | The side of the page that the drawer is attached to (can be 'start' or 'end') |
| redirectUrl | string | any[] |
"/" | The router link for the application logo, when clicked. |
| showSidenavToggle | boolean |
true | Toggles whether the sidenav button will be displayed in the header or not. |
| title | string |
Title of the application. | |
| tooltip | string |
The tooltip text for the application logo. | |
| toggleIcon | string |
"menu" | The toggle icon that will be used inside header. |
| showLogo | boolean |
true | Toggles whether the logo will be displayed inside the header or not. |
| Name | Type | Description |
|---|---|---|
| clicked | EventEmitter<boolean> |
Emitted when the sidenav button is clicked. |
This component displays a customizable header that can be reused. Use the input properties to configure the left side (title, button) and the primary color of the header. The right part of the header can contain other components which are transcluded in the header component.