EccUtilsDesignCollapsible Component

2.0.0-alpha.6

<ecc-utils-design-collapsible/>

EccUtilsDesignCollapsible

Overview

The ecc-utils-design-collapsible component is used to create interactive content sections that can be expanded or collapsed. It is a compound component composed of a trigger and content area.

This component is built with three parts: ecc-utils-design-collapsible (the root), ecc-utils-design-collapsible-trigger (the control), and ecc-utils-design-collapsible-content (the collapsible area).

Usage

Basic Collapsible

This example shows a simple collapsible section with a trigger button and content.

Toggle Content

This is the collapsible content.

Components

The Collapsible is built by combining these components:

Component	Tag Name	Description
`Collapsible`	`ecc-utils-design-collapsible`	The root container for the collapsible.
`CollapsibleTrigger`	`ecc-utils-design-collapsible-trigger`	The button or element that toggles the content.
`CollapsibleContent`	`ecc-utils-design-collapsible-content`	The content that is shown or hidden.

Properties

`EccUtilsDesignCollapsible`

Property	Type	Default	Description
`open`	`boolean`	`false`	When `true`, the collapsible is open.
`disabled`	`boolean`	`false`	When `true`, disables the collapsible.

`open`

Controls whether the collapsible content is visible. Can be used for controlled components.

<EccUtilsDesignCollapsible open={true}>
  ...
</EccUtilsDesignCollapsible>

`disabled`

When true, prevents the collapsible from being toggled and disables the trigger.

<EccUtilsDesignCollapsible disabled={true}>
  ...
</EccUtilsDesignCollapsible>

Events

`EccUtilsDesignCollapsible`

Event Name	React Event Name	Detail Type	Description
`ecc-collapsible-toggled`	`onEccCollapsibleToggled`	`{ open: boolean }`	Fired when the collapsible is opened or closed.

`ecc-collapsible-toggled`

This event is fired when the user clicks the trigger to open or close the content.

<EccUtilsDesignCollapsible 
  onEccCollapsibleToggled={(event) => {
    console.log('Collapsible state:', event.detail.open);
  }}
>
  ...
</EccUtilsDesignCollapsible>

Textarea Select