Lists

A list is a run of rows with text and, where they earn it, an icon, an avatar or a control. Rows can be read only, act on the page or navigate, and the variant you pick decides which element ends up in the DOM.

Usage

  • Browsers
  • Chrome
  • Safari
  • Firefox
    Firefox is the spiritual successor of Netscape Navigator.
<script lang="ts">
	import { Divider, List, ListItem } from 'noph-ui'
	import { Icon } from 'noph-ui/icons'
</script>

<List style="max-width:300px">
	<ListItem>Browsers</ListItem>
	<Divider />
	<ListItem>Chrome</ListItem>
	<ListItem>Safari</ListItem>
	<ListItem
		>{#snippet supportingText()}
			Firefox is the spiritual successor of Netscape Navigator.
		{/snippet}Firefox</ListItem
	>
	<ListItem variant="button"
		>{#snippet end()}
			<Icon>open_in_new</Icon>
		{/snippet}
		{#snippet supportingText()}
			This will open a new tab
		{/snippet}Compare benchmarks</ListItem
	>
</List>

Icon item

  • Account
  • Setting
  • Sign out
<script lang="ts">
	import { Divider, List, ListItem } from 'noph-ui'
	import { Icon } from 'noph-ui/icons'
</script>

<List style="max-width:300px">
	<ListItem>
		Account
		{#snippet start()}
			<Icon>person</Icon>
		{/snippet}
	</ListItem>
	<Divider />
	<ListItem>
		Setting
		{#snippet start()}
			<Icon>settings</Icon>
		{/snippet}
	</ListItem>
	<Divider />
	<ListItem>
		Sign out
		{#snippet start()}
			<Icon>logout</Icon>
		{/snippet}
	</ListItem>
</List>

Theming

Tokens

TokenDefault value
--np-item-container-height3.5rem, or 4.5rem with supporting text
--np-item-label-text-color--np-color-on-surface
--np-item-supporting-text-color--np-color-on-surface-variant
--np-item-leading-icon-color--np-color-on-surface-variant
--np-item-trailing-icon-color--np-color-on-surface-variant

--np-item-container-height sets the minimum height of an item, so an item whose content is taller grows past it.

Example

  • Account
<script lang="ts">
	import { List, ListItem } from 'noph-ui'
	import { Icon } from 'noph-ui/icons'
</script>

<List style="max-width:300px">
	<ListItem
		--np-item-container-height="3rem"
		--np-item-label-text-color="var(--np-color-tertiary)"
		--np-item-leading-icon-color="var(--np-color-tertiary)"
	>
		Account
		{#snippet start()}
			<Icon>person</Icon>
		{/snippet}
	</ListItem>
</List>

Accessibility

List renders a plain <ul>, so anything you put inside becomes a list item for assistive technology. Pick the variant that matches what the item does: text for content that is only read, button for something that acts on the current page, and link for navigation. That choice decides the element that ends up in the DOM, and with it the role, the keyboard behaviour and whether the item is focusable at all.

A disabled item renders as a <div> with aria-disabled instead of a disabled control, which keeps it readable but takes it out of the tab order.

API

List attributes

Everything else you pass is forwarded to the <ul> element, so class, style and the usual event handlers work as expected.

AttributeTypeDefaultDescription
elementHTMLUListElement | undefinedundefinedBindable reference to the underlying <ul>.

Item

ListItem is an Item wrapped in an <li>. Where a row is not part of a <ul>, in search results, a sheet or a card, import Item instead and skip the wrapper. It takes the same attributes as ListItem below.

<script lang="ts">
	import { Item } from 'noph-ui'
</script>

<Item variant="link" href="/components/list">Lists</Item>

ListItem attributes

AttributeTypeDefaultDescription
variant'text' | 'button' | 'link''text'Element the item renders as: a <div>, a <button> or an <a>. The interactive variants add a ripple.
selectedbooleanfalseWhether the item is shown as selected.
disabledbooleanfalseRenders the item as non-interactive with aria-disabled, whatever the variant is.
supportingTextSnippet | undefinedundefinedSecond line below the label. An item with supporting text is taller.
startSnippet | undefinedundefinedLeading content, typically an icon or an avatar.
endSnippet | undefinedundefinedTrailing content, typically an icon, a switch or a checkbox.
softFocusbooleanfalseShows the hover state without the item being hovered. Use it to mark the active option in a list that is driven by the arrow keys.
lazybooleanfalseSkips rendering the item while it is off screen, for very long lists.
type'submit' | 'reset' | 'button' | null'button'Only for variant="button". Set it to submit to have the item submit the surrounding form.