mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2025-05-12 17:04:57 +00:00
0ed5b2d5de
* [ADF-3551] Fixed missing docs index pages and links * [ADF-3551] Fixed link in datatable docs plus ToC tool update
60 lines
1.7 KiB
Markdown
60 lines
1.7 KiB
Markdown
---
|
|
Added: v2.5.0
|
|
Status: Experimental
|
|
Last reviewed: 2018-08-07
|
|
---
|
|
|
|
# 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)>
|
|
</adf-layout-header>
|
|
```
|
|
|
|
### [Transclusions](../user-guide/transclusion.md)
|
|
|
|
The right-hand side of the header has free-form content that you supply in the
|
|
body of the element:
|
|
|
|
```html
|
|
<adf-layout-header>
|
|
<div>Optional content for right-hand side</div>
|
|
</adf-layout-header>
|
|
```
|
|
|
|
|
|
## 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.
|
|
| position | `string` | 'start' | The side that the drawer is attached to 'start' or 'end' page |
|
|
|
|
### 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 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.
|