### File

`packages/ecl/components/ecl-expandable/ecl-expandable.component.ts`

### Description

Expandable component used to toggle visibility of additional content. It displays a toggle button with configurable labels and emits an event on toggle.

### Extends

`ECLBaseDirective`

### Implements

`OnInit`

### Metadata

selector | `ecl-expandable`
imports | `EUI_ECL_BUTTON` `EUI_ECL_ICON` `TranslateModule`
styles | `:host { display: block; }`
templateUrl | `./ecl-expandable.component.html`

### Index

###### Methods
onButtonClick getCssClasses
###### Inputs
collapsedLabel expandedLabel isExpanded class e2eAttr tabindex
###### Outputs
toggle
###### HostBindings
class
###### Accessors
cssClasses

### Inputs

collapsedLabel
Type : `string`
The label to display when the content is collapsed.

expandedLabel
Type : `string`
The label to display when the content is expanded. If not set, `collapsedLabel` will be used as fallback.

isExpanded
Type : `boolean`
Default value : `false`
Whether the expandable content is currently expanded. Default is `false`.

class
Type : `string`

e2eAttr
Type : `any`

tabindex
Type : `number`

### Outputs

toggle
Type : `EventEmitter`
Event emitted when the expandable is toggled. Consumers can prevent default behavior by calling `event.preventDefault()`.

### HostBindings

class
Type : `string`
Applies the expandable base CSS class to the host element.

### Methods

onButtonClick
`onButtonClick()`
Handles click on the toggle button. Emits a toggle event and updates the expanded state unless prevented. Returns : `void`

getCssClasses
`getCssClasses(rootClass: string)`
Parameters :
Name | Type | Optional
rootClass | `string` | No
Returns : `string`

### Accessors

cssClasses
get `cssClasses()`
Applies the expandable base CSS class to the host element. Returns : `string`

# results matching ""

# No results matching ""