mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2025-05-19 17:14:57 +00:00
8d8ab1e682
* [ADF-3358] link on logo * [ADF-3358] test link on logo * [ADF-3360] tooltip on logo * [ADF-3360] update logo docs * [ADF-3359] allow hex color codes for the background color * [ADF-3358] better name for property
46 lines
1.4 KiB
Markdown
46 lines
1.4 KiB
Markdown
---
|
|
Added: v2.4.0
|
|
Status: Experimental
|
|
---
|
|
|
|
## Header component
|
|
|
|
Reusable header for Alfresco applications
|
|
|
|
## Basic usage
|
|
|
|
```html
|
|
<adf-layout-header
|
|
title="title"
|
|
logo="logo.png"
|
|
[redirectUrl]="'/home'"
|
|
color="primary"
|
|
(toggled)=toggleMenu($event)>
|
|
|
|
<app-search-bar fxFlex="0 1 auto"></app-search-bar>
|
|
<app-theme-picker></app-theme-picker>
|
|
<adf-layout>
|
|
```
|
|
|
|
## Class members
|
|
|
|
### Properties
|
|
| Name | Type | Description |
|
|
| -- | -- | -- |
|
|
| title | string | Title of the application
|
|
| logo | string | Path to an image file for the application logo.
|
|
| redirectUrl | string\|any[] | The router link for the application logo.
|
|
| tooltip | string | The tooltip text for the application logo.
|
|
| color | string | Background color for the header. It can be any hex color code or the Material theme colors: 'primary', 'accent' or 'warn'.
|
|
| showSidenavToggle | boolean | Signals if the sidenav button will be displayed in the header or not. By default is true.
|
|
|
|
### Events
|
|
| Name | Type | Description |
|
|
| -- | -- | -- |
|
|
| clicked | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<boolean>` | Emitted when click on sidenav button
|
|
|
|
## Details
|
|
This component displays a customizable header which can be reused. The left side of the header (title, button) and the primary color for the header can be configured via input parameters.
|
|
|
|
The right part of the header are existing components which are transcluded in the header component.
|