alfresco-ng2-components/docs/core/components/header.component.md

Title, Added, Status, Last reviewed

Title	Added	Status	Last reviewed
Header component	v2.5.0	Active	2018-11-20

Header component

Reusable header for Alfresco applications.

Basic usage

<adf-layout-header 
    title="title" 
    logo="logo.png" 
    [redirectUrl]="'/home'"
    color="primary"
    (clicked)=toggleMenu($event)>
</adf-layout-header>

Transclusions

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>

Class members

Properties

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.

Events

Name	Type	Description
clicked	EventEmitter<boolean>	Emitted when the sidenav button is clicked.

Details

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.