Import
import { WrList, WrListItem } from 'ngwr/list';Playground
<wr-list bordered dividers >
<wr-list-item interactive>
<span ngProjectAs="[wrListItemLeading]">📁</span>
Reports
<span ngProjectAs="[wrListItemTrailing]">12</span>
</wr-list-item>
</wr-list>Customize
Bordered
Dividers
Dense
Interactive rows
API
| Name | Description | Type | Default |
|---|---|---|---|
<wr-list> | Container — renders <ul role="list"> inside. | component | — |
bordered | Wrap in a card-style border + radius. | boolean | false |
dividers | Thin border between consecutive items. | boolean | false |
dense | Compact vertical padding. | boolean | false |
ariaLabel | Optional accessible label for the list. | string | '' |
<wr-list-item> | Row with three projection slots: [wrListItemLeading], default body, [wrListItemTrailing]. | component | — |
interactive | Hover + cursor pointer + Enter/Space activation + listitem role. | boolean | false |
disabled | Visual disabled + suppresses interaction. | boolean | false |
CSS — --wr-list-item-padding-y / -x | Per-row padding. | length | 0.625rem / 1rem |
CSS — --wr-list-item-gap | Gap between leading / body / trailing slots. | length | 0.75rem |
CSS — --wr-list-divider-color | Divider line colour. | color | var(--wr-color-light) |
CSS — --wr-list-hover-bg | Hover background on interactive rows. | color | rgba(light, 0.4) |
CSS variables
Custom properties ngwr/list 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-list-active-bg | rgba(var(--wr-color-primary-rgb), 0.08) | .wr-list |
--wr-list-bg | transparent | .wr-list |
--wr-list-divider-color | var(--wr-color-outline) | .wr-list |
--wr-list-hover-bg | var(--wr-color-hover) | .wr-list |
--wr-list-item-gap | 0.75rem | .wr-list |
--wr-list-item-padding-x | 1rem | .wr-list |
--wr-list-item-padding-y | 0.625rem | .wr-list +1 variant override |