Lists Others Tabs

List group (list_group)

Multiple related lists grouped together on a containing element.

🔗 External documentation.

ID Label Description Schema
lists Lists A list of list components. 
            id: list_group
label: 'List group'
description: 'Multiple related lists grouped together on a containing element. '
group: Lists
homepage: 'https://m2.material.io/components/lists'
slots:
    lists:
        id: lists
        label: Lists
        description: 'A list of list components.'
examples:
    preview:
        id: preview
        label: Preview
        renderable:
            '@component': list_group
            lists:
                -
                    '@component': list
                    header: 'First 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
                -
                    '@component': list
                    header: 'Second 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
                            text: 'List item'
                            secondary_text: 'List item'
                            icon_after:
                                '@component': icon_button
                                icon: more_vert
                            icon_before: favorite
                            html_element: li

First list

  • List item List item
  • List item List item
  • List item List item
  • List item List item
  • List item List item

Second list

  • List item List item
  • List item List item
<div class="mdc-list-group"> <h3 class="mdc-list-group__subheader">First list</h3> <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> <h3 class="mdc-list-group__subheader">Second list</h3> <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 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> </div>