eui documentation
  1. Components
  2. EuiPageComponent

File

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

Description

Root page layout component that provides the foundational structure for application pages. Automatically detects and adapts styling based on the presence of column-based layouts. Serves as the top-level container for page content, headers, sidebars, and footers. Provides consistent spacing, alignment, and responsive behavior across the application. Typically used as the outermost wrapper for each route's content in the application.

Basic page layout

Example :
<eui-page>
  <eui-page-header label="Page Title"></eui-page-header>
  <eui-page-content>
    Main content here
  </eui-page-content>
</eui-page>

With columns

Example :
<eui-page>
  <eui-page-columns>
    <eui-page-column label="Sidebar">Sidebar content</eui-page-column>
    <eui-page-column label="Main">Main content</eui-page-column>
  </eui-page-columns>
</eui-page>

Accessibility

  • Use semantic HTML within page sections for proper document structure
  • Ensure proper heading hierarchy (h1, h2, h3) within page content
  • Landmark regions help screen reader users navigate page sections

Notes

  • Automatically applies column-specific styling when eui-page-columns is present
  • Provides consistent spacing and layout across all application pages
  • Works with both v1 and v2 page component variants

Metadata

changeDetection ChangeDetectionStrategy.OnPush
encapsulation ViewEncapsulation.None
selector eui-page
styleUrls ./styles/_index.scss
templateUrl ./eui-page.component.html

Index

Properties
HostBindings
Accessors

HostBindings

class
Type : string

Properties

columns
Type : QueryList<EuiPageColumnsComponent>
Decorators :
@ContentChild(EuiPageColumnsComponent, {static: true})

Accessors

cssClasses
getcssClasses()

results matching ""

    No results matching ""