Lists Others Tabs

(List item) (list_item)

To be used inside list components.

🔗 External documentation.

ID Label Description Schema
avatar Avatar Placed at the start. Doesn't work well with icon_before
text Text Mandatory
secondary_text Secondary text Generate a second line of text.
meta Meta A short text placed at the end. Doesn't work well with icon_after
icon_after Icon (after) Placed at the end. Doesn't work well with meta
icon_before Icon (before) Placed at the start. Doesn't work well with avatar. Icon list in https://fonts.google.com/icons?selected=Material+Icons 
                        type: string
html_element HTML element Use li for usage inside a list. Otherwise stick to div. 
                        type: string
enum:
    - div
    - li

                      
            id: list_item
label: '(List item)'
description: 'To be used inside list components. '
group: Lists
homepage: 'https://m2.material.io/components/lists'
variants:
    default:
        id: default
        label: Default
    disabled:
        id: disabled
        label: Disbaled
    selected:
        id: selected
        label: Selected
    activated:
        id: activated
        label: Activated
slots:
    avatar:
        id: avatar
        label: Avatar
        description: "Placed at the start. Doesn't work well with icon_before"
    text:
        id: text
        label: Text
        description: Mandatory
    secondary_text:
        id: secondary_text
        label: 'Secondary text'
        description: 'Generate a second line of text.'
    meta:
        id: meta
        label: Meta
        description: "A short text placed at the end. Doesn't work well with icon_after"
    icon_after:
        id: icon_after
        label: 'Icon (after)'
        description: "Placed at the end. Doesn't work well with meta"
props:
    icon_before:
        id: icon_before
        label: 'Icon (before)'
        description: "Placed at the start. Doesn't work well with avatar. Icon list in https://fonts.google.com/icons?selected=Material+Icons"
        schema:
            type: string
    html_element:
        id: html_element
        label: 'HTML element'
        description: 'Use li for usage inside a list. Otherwise stick to div.'
        schema:
            type: string
            enum:
                - div
                - li
library:
    dependencies:
        - material_icons
    id: list_item
examples:
    preview:
        id: preview
        label: Preview
        renderable:
            '@component': list_item
            text: 'List item'
            secondary_text: 'List item'
            icon_after:
                '@component': icon_button
                icon: more_vert
            icon_before: favorite
            html_element: div

Default ( default )

List item List item
<div 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> </div>

Disbaled ( disabled )

List item List item
<div 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> </div>

Selected ( selected )

List item List item
<div 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> </div>

Activated ( activated )

List item List item
<div class="mdc-deprecated-list-item--activated 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> </div>