Collapsible
import {Collapsible} from "@qualcomm-ui/angular/collapsible"Examples
Showcase
Basic collapsible component with a trigger button that expands and collapses content.
Qualcomm
Content
Controlled State
Control the collapsible's open/closed state using the open and openChanged properties.
Qualcomm
Content
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