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.
                        type: integer
enum:
    - 2
    - 3
    - 4
    - 5
    - 6

                      
            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
<ul class="mdc-deprecated-list"> <li class="mdc-deprecated-list-item mdc-ripple-upgraded"> <span class="mdc-deprecated-list-item__graphic material-icons" aria-hidden="true">favorite</span> <span class="mdc-deprecated-list-item__text"> <span class="mdc-deprecated-list-item__primary-text">List item</span> <span class="mdc-deprecated-list-item__secondary-text">List item</span> </span> <span aria-hidden="true" class="mdc-deprecated-list-item__meta"> <button aria-label class="mdc-icon-button material-icons">more_vert </button> </span> </li> <li class="mdc-deprecated-list-item--selected mdc-deprecated-list-item mdc-ripple-upgraded"> <span class="mdc-deprecated-list-item__graphic material-icons" aria-hidden="true">favorite</span> <span class="mdc-deprecated-list-item__text"> <span class="mdc-deprecated-list-item__primary-text">List item</span> <span class="mdc-deprecated-list-item__secondary-text">List item</span> </span> <span aria-hidden="true" class="mdc-deprecated-list-item__meta"> <button aria-label class="mdc-icon-button material-icons">more_vert </button> </span> </li> <li class="mdc-deprecated-list-item mdc-ripple-upgraded"> <span class="mdc-deprecated-list-item__graphic material-icons" aria-hidden="true">favorite</span> <span class="mdc-deprecated-list-item__text"> <span class="mdc-deprecated-list-item__primary-text">List item</span> <span class="mdc-deprecated-list-item__secondary-text">List item</span> </span> <span aria-hidden="true" class="mdc-deprecated-list-item__meta"> <button aria-label class="mdc-icon-button material-icons">more_vert </button> </span> </li> <li class="mdc-deprecated-list-item mdc-ripple-upgraded"> <span class="mdc-deprecated-list-item__graphic material-icons" aria-hidden="true">favorite</span> <span class="mdc-deprecated-list-item__text"> <span class="mdc-deprecated-list-item__primary-text">List item</span> <span class="mdc-deprecated-list-item__secondary-text">List item</span> </span> <span aria-hidden="true" class="mdc-deprecated-list-item__meta"> <button aria-label class="mdc-icon-button material-icons">more_vert </button> </span> </li> <li class="mdc-deprecated-list-item--disabled mdc-deprecated-list-item mdc-ripple-upgraded"> <span class="mdc-deprecated-list-item__graphic material-icons" aria-hidden="true">favorite</span> <span class="mdc-deprecated-list-item__text"> <span class="mdc-deprecated-list-item__primary-text">List item</span> <span class="mdc-deprecated-list-item__secondary-text">List item</span> </span> <span aria-hidden="true" class="mdc-deprecated-list-item__meta"> <button aria-label class="mdc-icon-button material-icons">more_vert </button> </span> </li> </ul>

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
<ul class="mdc-deprecated-list--dense mdc-deprecated-list"> <li class="mdc-deprecated-list-item mdc-ripple-upgraded"> <span class="mdc-deprecated-list-item__graphic material-icons" aria-hidden="true">favorite</span> <span class="mdc-deprecated-list-item__text"> <span class="mdc-deprecated-list-item__primary-text">List item</span> <span class="mdc-deprecated-list-item__secondary-text">List item</span> </span> <span aria-hidden="true" class="mdc-deprecated-list-item__meta"> <button aria-label class="mdc-icon-button material-icons">more_vert </button> </span> </li> <li class="mdc-deprecated-list-item--selected mdc-deprecated-list-item mdc-ripple-upgraded"> <span class="mdc-deprecated-list-item__graphic material-icons" aria-hidden="true">favorite</span> <span class="mdc-deprecated-list-item__text"> <span class="mdc-deprecated-list-item__primary-text">List item</span> <span class="mdc-deprecated-list-item__secondary-text">List item</span> </span> <span aria-hidden="true" class="mdc-deprecated-list-item__meta"> <button aria-label class="mdc-icon-button material-icons">more_vert </button> </span> </li> <li class="mdc-deprecated-list-item mdc-ripple-upgraded"> <span class="mdc-deprecated-list-item__graphic material-icons" aria-hidden="true">favorite</span> <span class="mdc-deprecated-list-item__text"> <span class="mdc-deprecated-list-item__primary-text">List item</span> <span class="mdc-deprecated-list-item__secondary-text">List item</span> </span> <span aria-hidden="true" class="mdc-deprecated-list-item__meta"> <button aria-label class="mdc-icon-button material-icons">more_vert </button> </span> </li> <li class="mdc-deprecated-list-item mdc-ripple-upgraded"> <span class="mdc-deprecated-list-item__graphic material-icons" aria-hidden="true">favorite</span> <span class="mdc-deprecated-list-item__text"> <span class="mdc-deprecated-list-item__primary-text">List item</span> <span class="mdc-deprecated-list-item__secondary-text">List item</span> </span> <span aria-hidden="true" class="mdc-deprecated-list-item__meta"> <button aria-label class="mdc-icon-button material-icons">more_vert </button> </span> </li> <li class="mdc-deprecated-list-item--disabled mdc-deprecated-list-item mdc-ripple-upgraded"> <span class="mdc-deprecated-list-item__graphic material-icons" aria-hidden="true">favorite</span> <span class="mdc-deprecated-list-item__text"> <span class="mdc-deprecated-list-item__primary-text">List item</span> <span class="mdc-deprecated-list-item__secondary-text">List item</span> </span> <span aria-hidden="true" class="mdc-deprecated-list-item__meta"> <button aria-label class="mdc-icon-button material-icons">more_vert </button> </span> </li> </ul>