eui documentation
  1. Components
  2. EuiPageColumns

File

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

Description

Container for multiple page columns that provides responsive column layouts with resize observation. Automatically monitors width changes to support responsive column behavior.

Basic usage

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

Prevent mobile rendering

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

Accessibility

  • Ensure columns have descriptive labels for screen readers
  • Maintain logical reading order in column sequence
  • Test keyboard navigation between columns

Notes

  • Uses ResizeObserver to track container width changes
  • Child columns can respond to width changes for auto-collapse behavior
  • hasPreventMobileRendering disables mobile-specific column stacking

Implements

OnInit OnDestroy

Metadata

changeDetection ChangeDetectionStrategy.Default
selector eui-page-columns
template 
<ng-content/>
styleUrl ./eui-page-columns.scss

Index

Properties
Inputs
HostBindings
Accessors

Inputs

hasPreventMobileRendering
Type : boolean
Default value : false

HostBindings

class
Type : string

Properties

Public width
Type : unknown
Default value : new Subject

Accessors

cssClasses
getcssClasses()

results matching ""

    No results matching ""