### 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

- Public width

###### Inputs

- hasPreventMobileRendering

###### HostBindings

- class

###### Accessors

- cssClasses

### Inputs

hasPreventMobileRendering
Type : `boolean`
Default value : `false`

### HostBindings

class
Type : `string`

### Properties

Public width
Type : `unknown`
Default value : `new Subject`

### Accessors

cssClasses
get `cssClasses()`

# results matching ""

# No results matching ""