import { Component } from '@angular/core';
import { WrAccordion, WrCollapse, WrCollapseGroup } from 'ngwr/collapse';
@Component({ imports: [WrAccordion, WrCollapse, WrCollapseGroup] })
export class MyComponent {}Collapse
A panel that opens and closes from its header.
Installation
Import the class, and @use the entry point in your global styles: without it the component renders unstyled.
Basic usage
Set title; bind [(open)] to control it.
<wr-collapse title="Section title">
Section body…
</wr-collapse>Accordion
One panel open at a time. <wr-accordion> is short for <wr-collapse-group accordion>; import the one you use.
<wr-accordion>
<wr-collapse title="A">…</wr-collapse>
<wr-collapse title="B">…</wr-collapse>
<wr-collapse title="C">…</wr-collapse>
</wr-accordion>
<!-- Same as -->
<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
Set these on the component's selector or a wrapper, not on :root: the defaults are declared on ngwr/collapse's own element.
| Variable | Default | Declared on |
|---|---|---|
--wr-collapse-bg | var(--wr-color-surface) | .wr-collapse |
--wr-collapse-border | var(--wr-border-base) | .wr-collapse |
--wr-collapse-color | var(--wr-color-on-surface) | .wr-collapse +1 variant override |
--wr-collapse-font-family | var(--wr-font-family-base) | .wr-collapse |
--wr-collapse-header-font-size | var(--wr-text-base) | .wr-collapse |
--wr-collapse-header-font-weight | var(--wr-font-weight-medium) | .wr-collapse |
--wr-collapse-header-padding-x | var(--wr-space-lg) | .wr-collapse |
--wr-collapse-header-padding-y | var(--wr-space-md) | .wr-collapse |
--wr-collapse-inner-padding | var(--wr-space-lg) | .wr-collapse |
--wr-collapse-margin-top | var(--wr-space-sm) | .wr-collapse |
--wr-collapse-radius | var(--wr-border-radius-base) | .wr-collapse |