List (list
)
Lists are continuous, vertical indexes of text or images.
🔗 External documentation.
ID | Label | Description | Schema |
---|---|---|---|
header | Header | Only when embedded in a list_group component. | |
items | Items | A list of list_item components | |
heading_level | Heading level | Only when embedded in a list_group component. |
|
id: list
label: List
description: 'Lists are continuous, vertical indexes of text or images. '
group: Lists
homepage: 'https://m2.material.io/components/lists'
variants:
default:
id: default
label: Single-line
description: 'Single-line list items contain a maximum of one line of text.'
dense:
id: dense
label: Dense
description: 'Styles the density of the list, making it appear more compact.'
slots:
header:
id: header
label: Header
description: 'Only when embedded in a list_group component.'
items:
id: items
label: Items
description: 'A list of list_item components'
props:
heading_level:
id: heading_level
label: 'Heading level'
description: 'Only when embedded in a list_group component.'
schema:
type: integer
enum:
- 2
- 3
- 4
- 5
- 6
library:
js:
'https://data.dilla.io/material_2/components/list/list_init.js': { }
id: list
examples:
preview:
id: preview
label: Preview
renderable:
'@component': list
items:
-
'@component': list_item
text: 'List item'
secondary_text: 'List item'
icon_after:
'@component': icon_button
icon: more_vert
icon_before: favorite
html_element: li
-
'@component': list_item
'@variant': selected
text: 'List item'
secondary_text: 'List item'
icon_after:
'@component': icon_button
icon: more_vert
icon_before: favorite
html_element: li
-
'@component': list_item
text: 'List item'
secondary_text: 'List item'
icon_after:
'@component': icon_button
icon: more_vert
icon_before: favorite
html_element: li
-
'@component': list_item
text: 'List item'
secondary_text: 'List item'
icon_after:
'@component': icon_button
icon: more_vert
icon_before: favorite
html_element: li
-
'@component': list_item
'@variant': disabled
text: 'List item'
secondary_text: 'List item'
icon_after:
'@component': icon_button
icon: more_vert
icon_before: favorite
html_element: li
heading_level: 3
Single-line
(
default
)
Single-line list items contain a maximum of one line of text.
- List item List item
- List item List item
- List item List item
- List item List item
- List item List item
Dense
(
dense
)
Styles the density of the list, making it appear more compact.
- List item List item
- List item List item
- List item List item
- List item List item
- List item List item