eui documentation
  1. Components
  2. EuiPageHeader

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
Methods
Inputs
Outputs
HostBindings
Accessors

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
getcssClasses()

results matching ""

    No results matching ""