File
Description
Enables interactive resizing of a container element by dragging a handle.
Applies width constraints dynamically and supports left or right-side handle placement.
Intended for use in layouts requiring user-adjustable panel widths, such as sidebars or split views.
Implements
Index
Properties
|
|
|
Inputs
|
|
|
HostBindings
|
|
|
|
euiResizableAriaLabel
|
Type : string
|
Default value : 'Press the left or right arrow key to resize the panel'
|
Accessible label for the separator handle.
|
|
euiResizableHidden
|
Default value : false, { transform: booleanAttribute }
|
Determines if the resizable feature is disable or not
|
|
euiResizableKeyStep
|
Default value : 10, { transform: pixelTransform }
|
Step size in pixels for keyboard arrow key resizing.
|
|
euiResizableMaxWidth
|
Default value : undefined, { transform: pixelTransform }
|
Maximum width constraint for the resizable container in pixels.
Used for aria-valuemax on the separator handle.
|
|
euiResizableMinWidth
|
Default value : 0, { transform: pixelTransform }
|
Minimum width constraint for the resizable container in pixels. Prevents the container from being resized below this value.
Accepts string or number values, automatically converted to non-negative pixels. Defaults to 0.
|
|
euiResizablePosition
|
Type : EuiResizablePosition
|
Default value : 'right'
|
Determines the placement of the resizable handle and the direction of resizing behavior.
'left' positions the handle on the left edge; 'right' positions it on the right edge. Defaults to 'right'.
|
|
euiResizableSideContainer
|
Default value : false, { transform: booleanAttribute }
|
Determines if the resizable directive is affecting eui-app-side-container
|
HostBindings
|
style.flex-basis.px
|
Type : number
|
|
style.max-width.px
|
Type : number
|
|
style.min-width.px
|
Type : number
|
|
styleFlexBasisWidth
|
Type : number
|
Decorators :
@HostBinding('style.flex-basis.px')
|
|
styleMaxWidth
|
Type : number
|
Decorators :
@HostBinding('style.max-width.px')
|
|
styleMinWidth
|
Type : number
|
Decorators :
@HostBinding('style.min-width.px')
|
|
styleWidth
|
Type : number
|
Decorators :
@HostBinding('style.width.px')
|