### File

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

### Description

Individual column within a page columns layout that supports collapsible behavior, headers, and responsive sizing. Provides flexible column layouts with optional collapse functionality and automatic mobile handling.

### Basic column

Example :

    <eui-page-column label="Sidebar" euiSizeS>
      <eui-page-column-body>
        Sidebar content
      </eui-page-column-body>
    </eui-page-column>

### Collapsible column

Example :

    <eui-page-column
      label="Filters"
      [isCollapsible]="true"
      [isCollapsed]="filtersCollapsed"
      expandAriaLabel="Expand filters"
      collapseAriaLabel="Collapse filters"
      (collapse)="onFiltersCollapse($event)">
      <eui-page-column-header>
        <eui-page-column-header-label>Filters</eui-page-column-header-label>
      </eui-page-column-header>
      <eui-page-column-body>Filter controls</eui-page-column-body>
    </eui-page-column>

### Auto-collapse on resize

Example :

    <eui-page-column
      [isAutocloseOnContainerResize]="true"
      [autocloseContainerWidth]="768"
      [isAutocloseOnMobile]="true">
      Content
    </eui-page-column>

### Accessibility

- Provide descriptive labels for column identification
- Collapse buttons have proper aria-labels
- Ensure collapsed columns can be reopened via keyboard
- Maintain focus management when collapsing/expanding

### Notes

- Supports size variants: euiSizeS, euiSizeM, euiSizeL, euiSizeXL, etc.
- `isCollapsedWithIcons` shows icon-only view when collapsed
- `hasSidebarMenu` optimizes layout for sidebar menu content
- `hasHeaderBodyShrinkable` allows header to shrink on scroll
- Auto-collapse features help manage responsive layouts automatically

### Implements

`OnInit` `OnDestroy`

### Metadata

changeDetection | `ChangeDetectionStrategy.OnPush`
HostDirectives | `BaseStatesDirective` Inputs : euiSizeS euiSizeM euiSizeL euiSizeXL euiSize2XL euiSize3XL euiSize4XL euiSizeVariant euiHighlighted
selector | `eui-page-column`
imports | `NgTemplateOutlet` `CdkScrollable` `AsyncPipe` `EUI_ICON` `EUI_BUTTON`
templateUrl | `./eui-page-column.html`
styleUrl | `./eui-page-column.scss`

### Index

###### Properties

- asService
- currentOffset
- hasPreventMobileRendering
- isActive
- isHeaderBodyShrinked
- previousOffset
- treshHold

###### Methods

- Public onToggle

###### Inputs

- autocloseContainerWidth
- collapseAriaLabel
- expandAriaLabel
- hasHeaderBodyShrinkable
- hasSidebarMenu
- isAutocloseOnContainerResize
- isAutocloseOnMobile
- isCollapsed
- isCollapsedWithIcons
- isCollapsible
- isHighlighted
- isRightCollapsible
- label
- subLabel

###### Outputs

- collapse
- headerCollapse

###### HostBindings

- class

###### Accessors

- cssClasses

### Inputs

autocloseContainerWidth
Type : `number`
Default value : `null`

collapseAriaLabel
Type : `string`

expandAriaLabel
Type : `string`

hasHeaderBodyShrinkable
Type : `boolean`
Default value : `false`

hasSidebarMenu
Type : `boolean`
Default value : `false`

isAutocloseOnContainerResize
Type : `boolean`
Default value : `false`

isAutocloseOnMobile
Type : `boolean`
Default value : `false`

isCollapsed
Type : `boolean`
Default value : `false`

isCollapsedWithIcons
Type : `boolean`
Default value : `false`

isCollapsible
Type : `boolean`
Default value : `false`

isHighlighted
Type : `boolean`
Default value : `false`

isRightCollapsible
Type : `boolean`
Default value : `false`

label
Type : `any`

subLabel
Type : `any`

### Outputs

collapse
Type : `EventEmitter`

headerCollapse
Type : `EventEmitter`

### HostBindings

class
Type : `string`

### Methods

Public onToggle
`onToggle()`
Returns : `void`

### Properties

asService
Type : `unknown`
Default value : `inject(EuiAppShellService)`

currentOffset
Type : `number`
Default value : `0`

hasPreventMobileRendering
Type : `unknown`
Default value : `false`

isActive
Type : `unknown`
Default value : `false`

isHeaderBodyShrinked
Type : `unknown`
Default value : `false`

previousOffset
Type : `number`
Default value : `0`

treshHold
Type : `number`
Default value : `50`

### Accessors

cssClasses
get `cssClasses()`

# results matching ""

# No results matching ""