eui documentation
  1. Components
  2. EuiOverlayHeaderComponent

File

packages/components/eui-overlay/components/eui-overlay-header/eui-overlay-header.component.ts

Description

Header component for eui-overlay that provides a structured top section. Automatically detects and styles content based on the presence of a title component. Typically contains title, close button, and optional action buttons. Must be used as a direct child of eui-overlay to maintain proper layout structure.

Basic Usage

Example :
<eui-overlay [isActive]="true">
  <eui-overlay-header>
    <h2>Overlay Title</h2>
  </eui-overlay-header>
</eui-overlay>

Accessibility

  • Use heading elements for titles
  • Ensure close buttons have appropriate ARIA labels

Notes

  • Must be direct child of eui-overlay
  • Automatically styled based on content

Metadata

encapsulation ViewEncapsulation.None
selector eui-overlay-header
templateUrl ./eui-overlay-header.component.html

Index

Properties
HostBindings
Accessors

HostBindings

class
Type : string

Properties

hasHeaderTitle
Type : QueryList<EuiOverlayHeaderTitleComponent>
Decorators :
@ContentChild(undefined, {static: false})

Accessors

cssClasses
getcssClasses()

results matching ""

    No results matching ""