generated:catalog.entry.accordion.title
generated:catalog.entry.accordion.description
@xngui/components/accordion@xngui/components/accordionchrome:demo.section
chrome:demo.preview
Yes. It adheres to the WAI-ARIA design pattern for disclosure widgets.
Yes. It comes with default styles that match the rest of the design system.
Is it composable? Use [xTrigger] on a button, icon row, or any focusable surface — only that element toggles the panel.
Disabled panels ignore pointer and keyboard activation.
import { Component } from '@angular/core';
import { XAccordion, XAccordionItem } from '@xngui/components/accordion';
import { XIcon } from '@xngui/icons';
@Component({
selector: 'app-example',
imports: [XAccordion, XAccordionItem, XIcon],
templateUrl: './accordion.component.html',
})
export class ExampleComponent {}
chrome:demo.events.title
chrome:demo.events.empty
chrome:demo.api.title
x-accordion
chrome:demo.api.col.property
chrome:demo.api.col.type
chrome:demo.api.col.default
chrome:demo.api.col.description
typeXAccordionType'single'`single` closes other panels when one opens; `multiple` allows several open.
collapsiblebooleantrueWhen `true`, an open single item can be closed again.
sizeXSize—Visual size tier — falls back to XConfigService when unset.
densityXDensity—Spacing offsets — orthogonal to `size`; falls back to XConfigService when unset.