### File

`packages/components/eui-page-v2/eui-page-header/eui-page-header.ts`

### Description

Page header component that displays the page title, subtitle, and optional collapsible content. Supports multi-line layouts and action items for page-level controls.

### Basic usage

Example :

    <eui-page-header label="Dashboard" subLabel="Overview"></eui-page-header>

### With tooltips

Example :

    <eui-page-header
      label="Settings"
      labelTooltip="Application settings"
      subLabel="Configuration"
      subLabelTooltip="Manage your preferences">
    </eui-page-header>

### Collapsible header

Example :

    <eui-page-header
      [isCollapsible]="true"
      [isCollapsed]="collapsed"
      collapsedLabel="Expand details"
      expandedLabel="Collapse details"
      (collapse)="onCollapse($event)">
      <eui-page-header-body>
        Additional header content
      </eui-page-header-body>
    </eui-page-header>

### Accessibility

- Label should be the main page heading (h1)
- Collapse button has descriptive aria-label
- Tooltips provide additional context for screen readers

### Notes

- Use `isHeaderMultilines` for headers with wrapping content
- Action items can be added via eui-page-header-action-items
- Collapsible mode useful for hiding secondary information

### Metadata

changeDetection | `ChangeDetectionStrategy.OnPush`
selector | `eui-page-header`
imports | `NgTemplateOutlet` `EUI_ICON`
templateUrl | `./eui-page-header.html`
styleUrl | `./eui-page-header.scss`

### Index

###### Properties

- pageHeaderBodyContent

###### Methods

- Public onToggle

###### Inputs

- collapsedLabel
- expandedLabel
- isCollapsed
- isCollapsible
- isHeaderMultilines
- label
- labelTooltip
- subLabel
- subLabelTooltip

###### Outputs

- collapse

###### HostBindings

- class

###### Accessors

- cssClasses

### Inputs

collapsedLabel
Type : `string`
Default value : `''`

expandedLabel
Type : `string`
Default value : `''`

isCollapsed
Type : `boolean`
Default value : `false`

isCollapsible
Type : `boolean`
Default value : `false`

isHeaderMultilines
Type : `boolean`
Default value : `false`

label
Type : `any`

labelTooltip
Type : `any`

subLabel
Type : `any`

subLabelTooltip
Type : `any`

### Outputs

collapse
Type : `EventEmitter`

### HostBindings

class
Type : `string`

### Methods

Public onToggle
`onToggle()`
Returns : `void`

### Properties

pageHeaderBodyContent
Avoid using this property, use the `pageHeaderBodyContent` instead.
Type : `QueryList<EuiPageHeaderBody>`
Decorators : `@ContentChild(undefined)`

### Accessors

cssClasses
get `cssClasses()`

# results matching ""

# No results matching ""