packages/ecl/components/ecl-expandable/ecl-expandable.component.ts
Expandable component used to toggle visibility of additional content. It displays a toggle button with configurable labels and emits an event on toggle.
| selector | ecl-expandable |
| imports |
EUI_ECL_BUTTON
EUI_ECL_ICON
TranslateModule
|
| styles |
:host {
display: block;
}
|
| templateUrl | ./ecl-expandable.component.html |
Methods |
Inputs |
Outputs |
HostBindings |
Accessors |
| 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, |
| isExpanded |
Type : boolean
|
Default value : false
|
|
Whether the expandable content is currently expanded.
Default is |
| class |
Type : string
|
| e2eAttr |
Type : any
|
| tabindex |
Type : number
|
| toggle |
Type : EventEmitter
|
|
Event emitted when the expandable is toggled.
Consumers can prevent default behavior by calling |
| class |
Type : string
|
|
Applies the expandable base CSS class to the host element. |
| 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 :
Returns :
string
|
| cssClasses |
getcssClasses()
|
|
Applies the expandable base CSS class to the host element.
Returns :
string
|