Components

List

Rows of text with what goes before and after them: accounts, settings, navigation.

Usage

A List holds ListItems and sets their density and the colour of the active one. A row has a title, a subtitle, and content in prepend and append. With href the row is a link, with onclick a button, and either fills the row. nav rounds the rows for a sidebar.

Current account •• 4471
$3,240.18
Savings Instant access
$12,480.00
Travel fund Locked until June
$860.50

Showing Overview.

Sidebar.svelte

<script>
  import { List, ListItem } from 'sveltier';
</script>

<nav aria-label="Banking">
  <List nav>
    <ListItem title="Overview" href="/" active />
    <ListItem title="Cards" href="/cards" />
  </List>
</nav>

<List>
  <ListItem title="Savings" subtitle="Instant access">
    {#snippet append()}$12,480.00{/snippet}
  </ListItem>
</List>

Accessibility

A List is a list even without bullets: it has role="list", which Safari otherwise drops.
append is outside the row's link or button, so a control in it is reached on its own and never sits inside another.
An active link is marked aria-current="page". Put a navigation list inside a <nav> with a label.

API

Name	Type	Default	Description
`density`	`'compact' \| 'default' \| 'comfortable'`	`'default'`	Multiplies the height and padding of its items.
`color`	`Color`	`'primary'`	The colour of the active item.
`nav`	`boolean`	`false`	Rounded rows set in from the edges, for navigation.
`children`	`Snippet`	`–`	The `ListItem`s.
`class`	`ClassValue \| null`	`–`	Classes added after the component's own: a string, an array or an object.
`ref`	`HTMLUListElement \| null`	`–`	The root element, bindable with `bind:ref`.

Name	Type	Default	Description
`title`	`string`	`–`	The main line.
`subtitle`	`string`	`–`	A second line, under the title.
`href`	`string`	`–`	Makes the row a link.
`target`	`HTMLAnchorAttributes['target']`	`–`	Where a link opens, as on `<a>`.
`rel`	`string`	`–`	The relationship of a link, as on `<a>`.
`onclick`	`(event: MouseEvent) => void`	`–`	Makes the row a button that calls this.
`active`	`boolean`	`false`	The current page or the selected row: tinted in the list's colour, and `aria-current="page"` on a link.
`disabled`	`boolean`	`false`	A disabled row cannot be pressed; a disabled link loses its `href`.
`prepend`	`Snippet`	`–`	Content before the text, such as an avatar or an icon.
`append`	`Snippet`	`–`	Content after the row's link or button, such as a value or a menu button.
`children`	`Snippet`	`–`	More content under the title and subtitle.
`class`	`ClassValue \| null`	`–`	Classes added after the component's own: a string, an array or an object.
`ref`	`HTMLLIElement \| null`	`–`	The root element, bindable with `bind:ref`.