packages/components/eui-page/components/eui-page-column/eui-page-column.component.ts
Individual column component for multi-column page layouts within eui-page-columns. Provides collapsible sidebar functionality with automatic responsive behavior and custom content projection. Supports header, body, and footer sections with flexible content areas and collapse/expand controls. Automatically responds to container width changes and mobile breakpoints for adaptive layouts. Must be used as a direct child of eui-page-columns to participate in column-based layouts.
<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 Content">
<eui-page-column-body>Main content</eui-page-column-body>
</eui-page-column>
</eui-page-columns><eui-page-column
label="Navigation"
[isCollapsible]="true"
[isCollapsed]="false"
(collapse)="onSidebarToggle($event)">
<eui-page-column-body>
<nav>Navigation items</nav>
</eui-page-column-body>
</eui-page-column><eui-page-column label="Filters">
<eui-page-column-header-right-content>
<button euiButton euiSecondary>Clear All</button>
</eui-page-column-header-right-content>
<eui-page-column-body>Filter options</eui-page-column-body>
</eui-page-column>
| changeDetection | ChangeDetectionStrategy.OnPush |
| encapsulation | ViewEncapsulation.None |
| HostDirectives |
BaseStatesDirective
Inputs : euiSizeS euiSizeM euiSizeL euiSizeXL euiSize2XL euiSize3XL euiSize4XL euiSize5XL euiSize6XL euiSizeVariant euiHighlighted
|
| selector | eui-page-column |
| imports |
NgTemplateOutlet
CdkScrollable
AsyncPipe
EUI_ICON
EUI_BUTTON
|
| templateUrl | ./eui-page-column.component.html |
Properties |
Methods |
|
Inputs |
Outputs |
HostBindings |
Accessors |
| autocloseContainerWidth |
Type : number
|
Default value : null
|
|
Container width threshold in pixels for automatic column collapse. When parent container width falls below this value, column automatically collapses. Only effective when isAutocloseOnContainerResize is true. |
| collapseAriaLabel |
Type : string
|
|
Accessible label for the collapse button when column is expanded. Automatically generated from label if not provided. |
| expandAriaLabel |
Type : string
|
|
Accessible label for the expand button when column is collapsed. Automatically generated from label if not provided. |
| hasHeaderBodyShrinkable |
Type : boolean
|
Default value : false
|
|
Enables shrinkable behavior for the column header body section. Allows header to reduce in size based on scroll or content state. |
| hasSidebarMenu |
Type : boolean
|
Default value : false
|
|
Applies styling specific to columns containing sidebar navigation menus. Adjusts spacing and layout for menu-based columns. |
| hasSubColumns |
Type : boolean
|
Default value : false
|
|
Indicates the column contains nested sub-columns. Applies appropriate styling for hierarchical column structures. |
| isAutocloseOnContainerResize |
Type : boolean
|
Default value : false
|
|
Enables automatic column collapse when parent container width changes. Works in conjunction with autocloseContainerWidth threshold. |
| isAutocloseOnMobile |
Type : boolean
|
Default value : false
|
|
Automatically collapses the column when viewport enters mobile breakpoint. Provides responsive behavior for smaller screens. |
| isCollapsed |
Type : boolean
|
Default value : false
|
|
Controls the collapsed state of the column. When true, minimizes column width and hides content; when false, displays full column. |
| isCollapsedHidden |
Type : boolean
|
Default value : false
|
|
Completely hides the column when collapsed instead of showing a minimal collapsed state. Only effective when isCollapsed is true. |
| isCollapsedWithIcons |
Type : boolean
|
Default value : false
|
|
Displays icons in the collapsed column state for visual identification. Provides visual cues when column is minimized. |
| isCollapsible |
Type : boolean
|
Default value : false
|
|
Enables expand/collapse functionality for the column. Adds a toggle button to show or hide column content. |
| isHighlighted |
Type : boolean
|
Default value : false
|
|
Applies highlighted visual styling to emphasize the column. Adds distinct background or border treatment. |
| isRightCollapsible |
Type : boolean
|
Default value : false
|
|
Positions the collapse button on the right side of the column header. By default, collapse button appears on the left. |
| label |
Type : any
|
|
Primary heading text displayed in the column header. Serves as the title for the column content. |
| subLabel |
Type : any
|
|
Secondary descriptive text displayed in the column header. Provides additional context about the column content. |
| collapse |
Type : EventEmitter
|
|
Emitted when the column's collapsed state changes via user interaction or automatic triggers. Payload: boolean indicating the new collapsed state (true when collapsed, false when expanded). |
| headerCollapse |
Type : EventEmitter
|
|
Emitted when the column header's collapsed state changes. Payload: boolean indicating the header collapse state. |
| class |
Type : string
|
| Public onToggle |
onToggle()
|
|
Returns :
void
|
| asService |
Type : unknown
|
Default value : inject(EuiAppShellService)
|
| currentOffset |
Type : number
|
Default value : 0
|
| customFooterContent |
Type : QueryList<EuiPageColumnFooterContentDirective>
|
Decorators :
@ContentChild(undefined)
|
| customHeaderBodyContent |
Type : QueryList<EuiPageColumnHeaderBodyContentDirective>
|
Decorators :
@ContentChild(undefined)
|
| customHeaderCollapsedContent |
Type : QueryList<EuiPageColumnHeaderCollapsedContentDirective>
|
Decorators :
@ContentChild(undefined)
|
| customHeaderLeftContent |
Type : QueryList<EuiPageColumnHeaderLeftContentDirective>
|
Decorators :
@ContentChild(undefined)
|
| customHeaderRightContent |
Type : QueryList<EuiPageColumnHeaderRightContentDirective>
|
Decorators :
@ContentChild(undefined)
|
| 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()
|