A list item provides accessibility controls and common functionality. The component uses child components that provide styling and slots for different types of list items. If you want to create a custom list item you can pass a type "custom", which will let you define the structure of the content.
The default list item has 5 slots that can be used for the most common use cases, start, end, default, subtitle and bottom slot. All of the slots are optional.
The start slot can contain content, such as an avatar, that will be positioned at the start (left in LTR) of the main content.
The end slot works the same way, but its contents are placed at the end (right in LTR) of the main slot.
The default slot contains the main content of the list item.
The subtitle slot can be used to display content below the default slot. The slot has smaller text size and lighter color than default slot.
The bottom slot can be used to display content below the subtitle slot.
<ul><dt-list-itemnavigation-type="tab"><template#start><dt-iconsize="300"name="check"/></template><span>Default List Item</span><template#subtitle>
Description
</template><template#bottom><dt-badgetext="Label"/></template><template#end><dt-iconsize="300"name="external-link"/></template></dt-list-item></ul>
When type is set to "custom" the list item will not render any styles or slots. This type can be used when the list item has to support content that does not work with the default structure.
<ul><dt-list-itemnavigation-type="tab"type="custom"><dt-stackdirection="row"align="start"justify="between"gap="500"class="d-py-100 d-px-150 d-pie-100"><dt-stackalign="baseline"direction="row"gap="400"><dt-textkind="body"tone="muted":size="100"datetime="10:00">
10:00
</dt-text><dt-text:size="300"density="300"kind="body"tone="secondary">
Custom list item example lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
</dt-text></dt-stack><dt-stackdirection="row"><dt-button:size="100"kind="muted"importance="clear"title="share"><template#startIcon="{ iconSize }"><dt-iconname="share":size="iconSize"/></template></dt-button><dt-button:size="100"kind="muted"importance="clear"title="star"><template#startIcon="{ iconSize }"><dt-iconname="star":size="iconSize"/></template></dt-button><dt-button:size="100"kind="muted"importance="clear"title="more"><template#startIcon="{ iconSize }"><dt-iconname="more-vertical":size="iconSize"/></template></dt-button></dt-stack></dt-stack></dt-list-item></ul>
HTML element type (tag name) of the content wrapper element.
id
generated unique ID
string
Id for the item.
navigationType
none
"arrow-keys"
|
"tab"
|
"none"
The type of navigation that this component should support.
"arrow-keys" for items that are navigated with UP/DOWN keys.
"tab" for items that are navigated using the TAB key.
"none" for static items that are not interactive.
role
'listitem'
"listitem"
|
"menuitem"
|
"option"
String to use for the item's role.
selected
false
boolean
Applies selected styles to the list item
type
default
"default"
|
"custom"
The type of child list item to use.
wrapperClass
''
string|object|array
Additional Classes to apply to the wrapper element,
note: it only applies on "default" type
Can accept all of: String, Object, and Array, i.e. has the
same api as Vue's built-in handling of the class attribute.