eui documentation
  1. Components
  2. EuiPageTopContentComponent

File

packages/components/eui-page/components/eui-page-top-content/eui-page-top-content.component.ts

Description

Top content area component for eui-page that provides a structured section above the main page content. Typically contains page-level alerts, notifications, or contextual information displayed prominently. Positioned between the page header and main content area with consistent spacing. Must be used as a direct child of eui-page to maintain proper layout structure.

With alert message

Example :
<eui-page>
  <eui-page-header label="Settings"></eui-page-header>
  <eui-page-top-content>
    <eui-alert type="info">Your changes have been saved successfully.</eui-alert>
  </eui-page-top-content>
  <eui-page-content>Main content</eui-page-content>
</eui-page>

Accessibility

  • Use appropriate ARIA roles for alerts and notifications
  • Ensure important messages are announced to screen readers
  • Maintain sufficient color contrast for content

Notes

  • Must be direct child of eui-page component
  • Positioned between header and main content
  • Ideal for page-level notifications and contextual information

Metadata

changeDetection ChangeDetectionStrategy.OnPush
encapsulation ViewEncapsulation.None
selector eui-page-top-content
template 
<ng-content/>

Index

Inputs
HostBindings
Accessors

Inputs

e2eAttr
Type : string
Default value : 'eui-page-top-content'

Data attribute used for end-to-end testing identification.

HostBindings

class
Type : string

Accessors

cssClasses
getcssClasses()

results matching ""

    No results matching ""