mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2026-09-02 17:53:30 +00:00
Ehsan Rezaei
b7783d2259
* AAE-39830 Removing Material components color property * AAE-39830 Style with class instead of color * AAE-39830 Updating header component doc * AAE-39830 Updating toolbar component doc * AAE-39830 Removed unused theme variable and updated doc
2.2 KiB
2.2 KiB
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.svg"
[redirectUrl]="'/home'"
(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 |
|---|---|---|---|
| backgroundColor | [string] |
Background color for the header. It can be any hex color code or CSS variable. | |
| 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 background color of the header. The right part of the header can contain other components which are transcluded in the header component.