eui documentation
  1. Components
  2. EuiPageColumnsComponent

File

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

Description

Column layout container component for eui-page that enables multi-column page structures. Provides responsive column-based layouts with automatic width tracking via ResizeObserver. Supports mobile rendering control to maintain or override responsive column behavior. Emits width changes through a reactive Subject for dynamic layout adjustments. Must be used as a direct child of eui-page to enable column-based page layouts.

Basic two-column layout

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

Prevent mobile stacking

Example :
<eui-page-columns [hasPreventMobileRendering]="true">
  <eui-page-column label="Left">Content</eui-page-column>
  <eui-page-column label="Right">Content</eui-page-column>
</eui-page-columns>

Accessibility

  • Columns maintain logical reading order for screen readers
  • Use semantic HTML within columns for proper document structure
  • Ensure keyboard navigation flows naturally through columns

Notes

  • Must be direct child of eui-page component
  • Automatically tracks container width for responsive child columns
  • By default, columns stack vertically on mobile devices
  • Use hasPreventMobileRendering to maintain column layout on all screen sizes

Implements

OnInit OnDestroy

Metadata

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

Index

Properties
Inputs
HostBindings
Accessors

Inputs

hasPreventMobileRendering
Type : boolean
Default value : false

Prevents automatic mobile responsive rendering of columns. When true, maintains desktop column layout on mobile devices instead of stacking. Useful for layouts that should remain columnar regardless of viewport size.

HostBindings

class
Type : string

Properties

Public width
Type : unknown
Default value : new Subject

Accessors

cssClasses
getcssClasses()

results matching ""

    No results matching ""