Installation
import { WrAccordion, WrCollapse, WrCollapseGroup } from 'ngwr/collapse';
// WrAccordion is <wr-accordion>, the accordion shorthand below — a separate
// class, so writing the tag without importing it renders nothing.
@Component({ imports: [WrCollapse, WrCollapseGroup, WrAccordion] })
export class MyComponent {}Basic usage
<wr-collapse title="Section title">
Section body…
</wr-collapse>Accordion
Opening one panel auto-closes the others.
<!-- Either form works. `<wr-accordion>` is the shorthand: it is
`<wr-collapse-group accordion>` with the flag baked in. -->
<wr-accordion>
<wr-collapse title="A">…</wr-collapse>
<wr-collapse title="B">…</wr-collapse>
<wr-collapse title="C">…</wr-collapse>
</wr-accordion>
<wr-collapse-group accordion>
<wr-collapse title="A">…</wr-collapse>
<wr-collapse title="B">…</wr-collapse>
</wr-collapse-group>Collapse API
| Name | Description | Type | Default |
|---|---|---|---|
titlerequired | Header text. | string | — |
open | Two-way bindable open/closed state. | boolean | false |
disabled | Disable interaction. | boolean | false |
Collapse Group API
| Name | Description | Type | Default |
|---|---|---|---|
accordion | When true, opening one child closes the others. | boolean | false |
CSS variables
Custom properties ngwr/collapse publishes. Each default below is declared on the component's own selector, so a :root override is shadowed by it — set them on that selector, on a wrapper you scope yourself, or inline on the element. Unlike the BEM class names, these are the supported way to restyle the component.
| Variable | Default | Declared on |
|---|---|---|
--wr-collapse-bg | var(--wr-color-surface) | .wr-collapse |
--wr-collapse-border | var(--wr-color-outline) | .wr-collapse |
--wr-collapse-color | var(--wr-color-on-surface) | .wr-collapse +1 variant override |
--wr-collapse-radius | var(--wr-border-radius-base) | .wr-collapse |