### File

`packages/components/directives/eui-resizable/eui-resizable.component.ts`

### Description

A resizable container component that allows users to dynamically adjust the width of its content. The component provides a draggable handle positioned on either the left or right edge, enabling flexible layout adjustments. Commonly used for collapsible sidebars, adjustable panels, or responsive content areas where users need manual control over element dimensions.

### Metadata

encapsulation | `ViewEncapsulation.None`
selector | `eui-resizable`
standalone | `true`
imports | `EUI_ICON`
styleUrls | `./styles/index.scss`
templateUrl | `./eui-resizable.component.html`

### Index

###### Properties

- e2e

###### Inputs

- ariaLabel
- ariaValueMax
- ariaValueMin
- ariaValueNow
- euiResizableHidden
- position

###### HostBindings

- attr.data-e2e
- class

###### Accessors

- cssClasses

### Inputs

ariaLabel
Type : `string`
Default value : `'Press the left or right arrow key to resize the panel'`
Accessible label for the separator handle.

ariaValueMax
Type : `number`
Default value : `undefined`
Maximum width value in pixels for aria-valuemax.

ariaValueMin
Type : `number`
Default value : `0`
Minimum width value in pixels for aria-valuemin.

ariaValueNow
Type : `number`
Default value : `undefined`
Current width value in pixels for aria-valuenow.

euiResizableHidden
Default value : `false, { transform: booleanAttribute }`
Determines if the resizable feature is disable or not

position
Type : `EuiResizablePosition`
Default value : `'right'`
Determines the placement of the resizable handle and the direction of resize behavior. When set to 'left', the handle appears on the left edge and resizing expands/contracts from the left. When set to 'right', the handle appears on the right edge and resizing expands/contracts from the right.

### HostBindings

attr.data-e2e
Type : `string`
Default value : `'eui-resizable'`

class
Type : `string`

### Properties

e2e
Type : `string`
Default value : `'eui-resizable'`
Decorators : `@HostBinding('attr.data-e2e')`

### Accessors

cssClasses
get `cssClasses()`

# results matching ""

# No results matching ""