@kit-ng-ui/collapse

Expandable panels with optional accordion behaviour. Mirrors ant-design's <Collapse>.

Install

pnpm add @kit-ng-ui/collapse

@use '@kit-ng-ui/collapse/styles';

Example

<kit-collapse [(active)]="active">
  <kit-collapse-panel key="overview" header="Overview">
    Body of the first panel.
  </kit-collapse-panel>
  <kit-collapse-panel key="details" header="Details" extra="optional hint">
    Body of the second panel.
  </kit-collapse-panel>
</kit-collapse>

API

<kit-collapse>

| Input | Type | Default | Description | | -------------------- | --------------------------------- | ----------- | ------------------------------------------ | | active | string \| readonly string[] (model) | [] | Open panel key(s). Always emitted as an array, even in accordion mode. | | accordion | boolean | false | Only one panel open at a time. | | bordered | boolean | true | Outer border + dividers. | | ghost | boolean | false | Transparent background; no borders. | | size | 'sm' \| 'md' \| 'lg' | 'md' | Header density. | | expandIconPosition | 'start' \| 'end' | 'start' | Arrow side. |

| Output | Payload | Description | | -------------- | -------------------- | --------------------------------- | | activeChange | readonly string[] | Fired on any open-state change. |

<kit-collapse-panel>

| Input | Type | Default | Description | | ---------- | --------- | ------- | ------------------------------------------ | | key | string | auto | Identity used by the parent. | | header | string | — | Header label (required). | | extra | string | — | Optional hint shown on the right. | | disabled | boolean | false | Prevents toggling. |