DÁP Szolgáltatások

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 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

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 none, subtle, base, medium, strong. It changes the background color of the list item.

<dap-ds-stack>
  <dap-ds-list-item variant="info" shade="none">Background: none</dap-ds-list-item>
  <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>

Interactive

Interactive can be set to true to make the list item interactive. This will render an anchor tag instead of a div, and it can accept any link attributes. However this can be changed also by the renderAs attribute which can be changed to button.

<dap-ds-stack>
  <dap-ds-list-item interactive>Interactive</dap-ds-list-item>
  <dap-ds-list-item
    interactive
    renderAs="button"
    onClick={() => alert('Button clicked')}
  >Interactive as button</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'

Attributes

Property	Type	Default	Description
`variant`	`'info'`, `'pass'` , `'fail'` , `'notapplicable'` , `'empty'` , `'number'`	`'info'`	The variant of the list item.
`shade`	`'none'`, `'subtle'` , `'base'` , `'medium'` , `'strong'`	`'base'`	The background strongness of the list item.
`status`	`'transparent'`, `'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.
`noPadding`	`boolean`		Whether the list item has no padding.
`renderAs`	`'a'`, `'button'`	`'a'`	The render as type of the list item, only applicable when interactive.

Slots

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.

Events

No custom events available.

CSS Parts

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.
`list-item-base`	The base list item container.
`icon-container`	The container of the icon.
`title-container`	The container of the title.
`description-container`	The container of the description.
`actions-container`	The container of the actions.
`iteractive-indicator-container`	The container of the interactive indicator.

CSS Custom Properties

Property Name	Description
`--dds-list-item-gap`	Gap between list item elements (default: var(--dds-spacing-200))
`--dds-list-item-content-gap`	Gap between content elements (default: var(--dds-spacing-200))
`--dds-list-item-horizontal-gap`	Gap for horizontal alignment (default: var(--dds-spacing-300))
`--dds-list-item-vertical-gap`	Gap for vertical alignment (default: var(--dds-spacing-200))
`--dds-list-item-icon-size`	Size of the icon (default: var(--dds-spacing-600))
`--dds-list-item-number-size`	Size of the number icon (default: 20px)
`--dds-list-item-actions-gap`	Gap between action elements (default: var(--dds-spacing-400))
`--dds-list-item-actions-padding`	Padding for the actions container (default: var(--dds-spacing-100))
`--dds-list-item-background-base`	Background color for base shade (default: var(--dds-background-neutral-base))
`--dds-list-item-background-subtle`	Background color for subtle shade (default: var(--dds-background-neutral-subtle))
`--dds-list-item-background-medium`	Background color for medium shade (default: var(--dds-background-neutral-medium))
`--dds-list-item-background-strong`	Background color for strong shade (default: var(--dds-background-neutral-strong))
`--dds-list-item-icon-brand`	Color for brand icon (default: var(--dds-icon-brand-subtle))
`--dds-list-item-icon-neutral`	Color for neutral icon (default: var(--dds-icon-neutral-base))
`--dds-list-item-icon-positive`	Color for positive icon (default: var(--dds-icon-positive-subtle))
`--dds-list-item-icon-negative`	Color for negative icon (default: var(--dds-icon-negative-subtle))
`--dds-list-item-title-color`	Title text color (default: var(--dds-text-neutral-strong))
`--dds-list-item-description-color`	Description text color (default: var(--dds-text-neutral-base))
`--dds-list-item-number-text-color`	Number text color (default: var(--dds-text-neutral-inverted))

<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>

<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>

<dap-ds-stack> <dap-ds-list-item variant="info" shade="none">Background: none</dap-ds-list-item> <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>

<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>

<dap-ds-stack> <dap-ds-list-item interactive>Interactive</dap-ds-list-item> <dap-ds-list-item interactive renderAs="button" onClick={() => alert('Button clicked')} >Interactive as button</dap-ds-list-item> </dap-ds-stack>

<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>

Property

Type

Default

Description

variant

'info', 'pass' , 'fail' , 'notapplicable' , 'empty' , 'number'

'info'

The variant of the list item.

shade

'none', 'subtle' , 'base' , 'medium' , 'strong'

'base'

The background strongness of the list item.

status

'transparent', '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

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.

noPadding

boolean

Whether the list item has no padding.

renderAs

'a', 'button'

'a'

The render as type of the list item, only applicable when interactive.

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.

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.

list-item-base

The base list item container.

icon-container

The container of the icon.

title-container

The container of the title.

description-container

The container of the description.

actions-container

The container of the actions.

iteractive-indicator-container

The container of the interactive indicator.

Property Name

Description

--dds-list-item-gap

Gap between list item elements (default: var(--dds-spacing-200))

--dds-list-item-content-gap

Gap between content elements (default: var(--dds-spacing-200))

--dds-list-item-horizontal-gap

Gap for horizontal alignment (default: var(--dds-spacing-300))

--dds-list-item-vertical-gap

Gap for vertical alignment (default: var(--dds-spacing-200))

--dds-list-item-icon-size

Size of the icon (default: var(--dds-spacing-600))

--dds-list-item-number-size

Size of the number icon (default: 20px)

--dds-list-item-actions-gap

Gap between action elements (default: var(--dds-spacing-400))

--dds-list-item-actions-padding

Padding for the actions container (default: var(--dds-spacing-100))

--dds-list-item-background-base

Background color for base shade (default: var(--dds-background-neutral-base))

--dds-list-item-background-subtle

Background color for subtle shade (default: var(--dds-background-neutral-subtle))

--dds-list-item-background-medium

Background color for medium shade (default: var(--dds-background-neutral-medium))

--dds-list-item-background-strong

Background color for strong shade (default: var(--dds-background-neutral-strong))

--dds-list-item-icon-brand

Color for brand icon (default: var(--dds-icon-brand-subtle))

--dds-list-item-icon-neutral

Color for neutral icon (default: var(--dds-icon-neutral-base))

--dds-list-item-icon-positive

Color for positive icon (default: var(--dds-icon-positive-subtle))

--dds-list-item-icon-negative

Color for negative icon (default: var(--dds-icon-negative-subtle))

--dds-list-item-title-color

Title text color (default: var(--dds-text-neutral-strong))

--dds-list-item-description-color

Description text color (default: var(--dds-text-neutral-base))

--dds-list-item-number-text-color

Number text color (default: var(--dds-text-neutral-inverted))