DÁP Design System - List item webcomponent

List item

List item component is a simple list item that can be used to make a checklist or a list of items.

Examples

Variants

Variants can be set to info, pass, fail, notapplicable, empty, number. It changes the icon of the list item. These are the built in variants, any other custom icon can be used. Number variant is special, it can be used to show a number in the list item with the number attribute.

<dap-ds-stack>
    <dap-ds-list-item variant="info">Variant: Info</dap-ds-list-item>
    <dap-ds-list-item variant="pass">Variant: pass</dap-ds-list-item>
    <dap-ds-list-item variant="fail">Variant: fail</dap-ds-list-item>
    <dap-ds-list-item variant="notapplicable">Variant: notapplicable</dap-ds-list-item>
    <dap-ds-list-item variant="empty">Variant: empty</dap-ds-list-item>
    <dap-ds-list-item variant="number" number="5">Variant: number</dap-ds-list-item>
  </dap-ds-stack>

Status

Status can be set to neutral, brand, positive, negative. It basically changes the color of the list item icon.

<dap-ds-stack>
    <dap-ds-list-item variant="info" status="neutral">Status: neutral</dap-ds-list-item>
    <dap-ds-list-item variant="pass" status="brand">Status: brand</dap-ds-list-item>
    <dap-ds-list-item variant="fail" status="positive">Status: positive</dap-ds-list-item>
    <dap-ds-list-item variant="notapplicable" status="negative">Status: negative</dap-ds-list-item>
  </dap-ds-stack>

Background

Background shade can be set to subtle, base, medium, strong. It changes the background color of the list item.

<dap-ds-stack>
    <dap-ds-list-item variant="info" shade="subtle">Background: subtle</dap-ds-list-item>
    <dap-ds-list-item variant="pass" shade="base">Background: base</dap-ds-list-item>
    <dap-ds-list-item variant="fail" shade="medium">Background: medium</dap-ds-list-item>
    <dap-ds-list-item variant="notapplicable" shade="strong">Background: strong</dap-ds-list-item>
  </dap-ds-stack>

Alignment

Alignment can be set to horizontal or vertical. It changes the alignment of the content of the list item.

<dap-ds-stack>
    <dap-ds-list-item variant="info" shade="subtle">Background: subtle</dap-ds-list-item>
    <dap-ds-list-item alignment="vertical" variant="pass" shade="subtle">Background: base</dap-ds-list-item>
  </dap-ds-stack>

Custom Icon

Custom icon can be set by using the icon attribute or adding content to the slot='icon'. It can be any svg icon.

<dap-ds-stack>
    <dap-ds-list-item icon="home-6-line">Custom Icon: Icon attribute</dap-ds-list-item>
    <dap-ds-list-item>
      <dap-ds-icon-cookie-line slot="icon"></dap-ds-icon-cookie-line>
      Custom Icon: Slot icon
    </dap-ds-list-item>
  </dap-ds-stack>

Importing

import { DapDSListItem } from 'dap-design-system/dist/dds'

Importing React

import { DapDSListItemReact } from 'dap-design-system/dist/react'

Slots

Name	Description
`(default)`	The content of the list item.
`icon`	The icon of the list item.
`title`	The title of the list item.

Attributes

Property	Type	Default	Description
`variant`	`ListItemVariant`	`'info'`	The type of the list item.
`status`	`ListItemStatus`	`'neutral'`	The status of the list item.
`alignment`	`Alignment`	`'horizontal'`	The alignment of the list item.
`shade`	`BackgroundShade`	`'base'`	The background strongness of the list item.
`title`	`string`		The title of the list item.
`icon`	`string`		The icon of the list item. This is an icon name from the built in icons.
`number`	`number`		The number of the list item. Only used when variant is 'number'.
`interactive`	`boolean`

Events

No custom events available.

CSS Parts

No CSS parts available.