packages/components/eui-page-v2/eui-page-columns/eui-page-column.ts
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.
<eui-page-column label="Sidebar" euiSizeS>
<eui-page-column-body>
Sidebar content
</eui-page-column-body>
</eui-page-column><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><eui-page-column
[isAutocloseOnContainerResize]="true"
[autocloseContainerWidth]="768"
[isAutocloseOnMobile]="true">
Content
</eui-page-column>isCollapsedWithIcons shows icon-only view when collapsedhasSidebarMenu optimizes layout for sidebar menu contenthasHeaderBodyShrinkable allows header to shrink on scroll
| 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 |
Properties |
Methods |
|
Inputs |
Outputs |
HostBindings |
Accessors |
| 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
|
| collapse |
Type : EventEmitter
|
| headerCollapse |
Type : EventEmitter
|
| class |
Type : string
|
| Public onToggle |
onToggle()
|
|
Returns :
void
|
| 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
|
| cssClasses |
getcssClasses()
|