Collapsible
Collapsible components allow users to toggle the visibility of content sections, providing a simple way to show or hide information on demand.
import {Collapsible} from "@qualcomm-ui/angular/collapsible"Examples
Showcase
Basic collapsible component with a trigger button that expands and collapses content.
Qualcomm
Content
import {Component} from "@angular/core"
import {ButtonModule} from "@qualcomm-ui/angular/button"
import {CollapsibleModule} from "@qualcomm-ui/angular/collapsible"
@Component({
imports: [CollapsibleModule, ButtonModule],
selector: "collapsible-showcase-demo",
template: `
<div class="flex flex-col items-center" q-collapsible-root>
<button
class="my-3"
emphasis="primary"
q-button
q-collapsible-trigger
variant="fill"
>
Toggle
</button>
<div q-collapsible-content>
<div
class="border-neutral-01 flex h-48 w-72 flex-col rounded-sm border p-4"
>
Content
</div>
</div>
</div>
`,
})
export class CollapsibleShowcaseDemo {}Controlled State
Control the collapsible's open/closed state using the open and openChanged properties.
Qualcomm
Content
import {Component, signal} from "@angular/core"
import {ButtonModule} from "@qualcomm-ui/angular/button"
import {CollapsibleModule} from "@qualcomm-ui/angular/collapsible"
@Component({
imports: [CollapsibleModule, ButtonModule],
selector: "collapsible-controlled-demo",
template: `
<div
class="flex flex-col items-center"
q-collapsible-root
[open]="open()"
(openChanged)="open.set($event)"
>
<button
class="my-3"
emphasis="primary"
q-button
q-collapsible-trigger
variant="fill"
>
Toggle
</button>
<div q-collapsible-content>
<div
class="border-neutral-01 flex h-48 w-72 flex-col rounded-sm border p-4"
>
Content
</div>
</div>
</div>
`,
})
export class CollapsibleControlledDemo {
readonly open = signal(true)
}API
q-collapsible-root
| Prop | Type | Default |
|---|---|---|
The initial open state of the collapsible when rendered.
Use when you don't need to control the open state of the collapsible. | boolean | |
The document's text/writing direction. | 'ltr' | 'rtl' | "ltr" |
Whether the collapsible is disabled. | boolean | |
A root node to correctly resolve the Document in custom environments. i.e.,
Iframes, Electron. | () => | |
The controlled open state of the collapsible | boolean | |
Function called when the animation ends in the closed state | void | |
Function called when open changes. | boolean |
Type
booleanDescription
The initial open state of the collapsible when rendered.
Use when you don't need to control the open state of the collapsible.
Type
'ltr' | 'rtl'
Description
The document's text/writing direction.
Type
booleanDescription
Whether the collapsible is disabled.
Type
() =>
| Node
| ShadowRoot
| Document
Description
A root node to correctly resolve the Document in custom environments. i.e.,
Iframes, Electron.
Type
booleanDescription
The controlled open state of the collapsible
Type
voidDescription
Function called when the animation ends in the closed state
Type
booleanDescription
Function called when open changes.
| Attribute / Property | Value |
|---|---|
data-part | 'root' |
data-scope | 'collapsible' |
data-state | | 'open' |
data-partValue
'root'data-scopeValue
'collapsible'data-stateValue
| 'open'
| 'closed'
| 'closing'
q-collapsible-trigger
| Attribute / Property | Value |
|---|---|
data-disabled | |
data-part | 'trigger' |
data-scope | 'collapsible' |
data-state | | 'open' |
data-disabledValue
data-partValue
'trigger'data-scopeValue
'collapsible'data-stateValue
| 'open'
| 'closed'
| 'closing'
q-collapsible-content
| Attribute / Property | Value |
|---|---|
className | 'qui-collapsible__content' |
data-collapsible | |
data-disabled | |
data-part | 'content' |
data-scope | 'collapsible' |
data-ssr | |
data-state | | 'open' |
hidden | boolean |
style |
classNameValue
'qui-collapsible__content'data-collapsibleValue
data-disabledValue
data-partValue
'content'data-scopeValue
'collapsible'data-ssrValue
data-stateValue
| 'open'
| 'closed'
| 'closing'
hiddenValue
booleanstyleValue