List

import { Component } from '@angular/core';
import { WrList, WrListItem } from 'ngwr/list';

@Component({ imports: [WrList, WrListItem] })
export class MyComponent {}

📁 Reports 12

📁 Invoices 4

📁 Customers 128

📁 Settings —

🔒 Archived —

<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

Name	Description	Type	Default
`<wr-list>`	Container. Renders `<ul role="list">`.	`component`	`—`
`bordered`	Card-style border and 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 state, a tab stop and Enter / Space activation.	`boolean`	`false`
`disabled`	Dims the row and blocks interaction.	`boolean`	`false`

Variable	Default	Declared on
`--wr-list-active-bg`	`color-mix(in srgb, var(--wr-color-primary) 8%, transparent)`	`.wr-list`
`--wr-list-bg`	`transparent`	`.wr-list`
`--wr-list-divider-color`	`var(--wr-border-base)`	`.wr-list`
`--wr-list-font-family`	`var(--wr-font-family-base)`	`.wr-list`
`--wr-list-font-size`	`var(--wr-text-sm)`	`.wr-list`
`--wr-list-hover-bg`	`var(--wr-color-hover)`	`.wr-list`
`--wr-list-item-gap`	`var(--wr-space-md)`	`.wr-list`
`--wr-list-item-padding-x`	`var(--wr-space-lg)`	`.wr-list`
`--wr-list-item-padding-y`	`var(--wr-space-md)`	`.wr-list` +1 variant override
`--wr-list-radius`	`var(--wr-border-radius-base)`	`.wr-list`

Installation

Playground

Customize

API

CSS variables

See also