List item component is a simple list item that can be used to make a checklist or a list of items.
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 noicon>Empty</dap-ds-list-item> <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-list-item interactive noicon>Interactive, no icon</dap-ds-list-item> </dap-ds-stack>
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 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 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 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>
import { DapDSListItem } from 'dap-design-system/dist/dds'
import { DapDSListItemReact } from 'dap-design-system/dist/react'
| Property | Type | Default | Description |
|---|---|---|---|
variant | 'info', 'pass' , 'fail' , 'notapplicable' , 'empty' , 'number' | 'info' | The variant of the list item. |
shade | 'subtle', 'base' , 'medium' , 'strong' | 'base' | The background strongness of the list item. |
status | 'brand', 'neutral' , 'positive' , 'negative' | 'neutral' | The status of the list item. |
alignment | 'horizontal', 'vertical' | 'horizontal' | The alignment 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 | Whether the list item is interactive. Generates an anchor tag. | |
target | '_blank', '_self' , '_parent' , '_top' | '_self' | The link target of the list item when interactive. |
href | string | The href of the list item when interactive | |
rel | string | 'noreferrer noopener' | The rel of the list item when interactive |
noIcon | boolean | Whether the list item has an icon. |
| Name | Description |
|---|---|
(default) | The content of the list item. |
icon | The icon of the list item. |
title | The title of the list item. |
actions | The actions of the list item. |
No custom events available.
| Part Name | Description |
|---|---|
base | The main list item container. |
icon | The icon of the list item. |
title | The title of the list item. |
description | The description of the list item. |
container | The container of the list item. |