Accordion
Accordions are used to group similar content and hide or show it depending on user needs or preferences. Accordions give users more granular control over the interface and help digest content in stages, rather than all at once.
Name | Default | Description |
---|---|---|
label: string | The panel label. | |
icon: node | string | Element or path used as the icon that will be placed next to panel label. | |
assistiveText: string | Assistive text to be placed on the right side of the panel. | |
disabled: boolean | false | If true, the component will be disabled. |
defaultIsExpanded: boolean | Initial state of the panel, only when it is uncontrolled. | |
isExpanded: boolean | Represents the state of the panel. When true, the component will be expanded. If undefined, the component will be uncontrolled and its value will be managed internally by the component. | |
onChange: function | This function will be called when the user clicks the accordion to expand or collapse the panel. The new state of the panel will be passed as a parameter. | |
children: node | The expanded panel of the accordion. This area can be used to render custom content. | |
margin: string | object | Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge'). You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes. | |
tabIndex: number | 0 | Value of the tabindex. |
Groups two or more accordions to distribute large volumes of information.
Name | Default | Description |
---|---|---|
defaultIndexActive: number | Initially active accordion, only when it is uncontrolled. | |
indexActive: number | The index of the active accordion. If undefined, the component will be uncontrolled and the active accordion will be managed internally by the component. If null, the component will be controlled and all accordions will be closed. | |
disabled: boolean | false | If true, the component will be disabled. |
onActiveChange: function | This function will be called when the user clicks on an accordion. The index of the clicked accordion will be passed as a parameter. | |
children: DxcAccordionGroup.Accordion[] | Contains one or more accordions. | |
margin: string | object | Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge'). You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes. |
Single accordion, part of an accordion group.
Name | Default | Description |
---|---|---|
label: string | The panel label. | |
icon: node | string | Element or path used as the icon that will be placed next to panel label. | |
assistiveText: string | Assistive text to be placed on the right side of the panel. | |
disabled: boolean | false | If true, the component will be disabled. |
children: node | The expanded panel of the accordion. This area can be used to render custom content. |