List (list)

đŸ”— External documentation.

ID Label Description Schema
items Items An array of render arrays.
list_type List type 
                        type: string
enum:
    - ul
    - ol

                      
            id: list
label: List
homepage: 'https://getbootstrap.com/docs/4.6/content/typography/#lists'
variants:
    default:
        id: default
        label: Default
    unstyled:
        id: unstyled
        label: Unstyled
        description: 'Remove the default list-style and left margin on list items (immediate children only). This only applies to immediate children list items, meaning you will need to add the class for any nested lists as well.'
    inline:
        id: inline
        label: Inline
        description: 'Remove a list’s bullets and apply some light margin with a combination of two classes, .list-inline and .list-inline-item.'
slots:
    items:
        id: items
        label: Items
        description: 'An array of render arrays.'
props:
    list_type:
        id: list_type
        label: 'List type'
        schema:
            type: string
            enum:
                - ul
                - ol
examples:
    preview:
        id: preview
        label: Preview
        renderable:
            '@component': list
            items:
                -
                    '@element': span
                    '@content': 'Lorem ipsum'
                -
                    '@element': span
                    '@content': 'Phasellus iaculis'
                -
                    '@element': span
                    '@content': 'Nulla volutpat'
            list_type: ul

Default ( default )

  • Lorem ipsum
  • Phasellus iaculis
  • Nulla volutpat
<ul> <li> <span>Lorem ipsum</span></li> <li> <span>Phasellus iaculis</span></li> <li> <span>Nulla volutpat</span></li> </ul>

Unstyled ( unstyled )

Remove the default list-style and left margin on list items (immediate children only). This only applies to immediate children list items, meaning you will need to add the class for any nested lists as well.

  • Lorem ipsum
  • Phasellus iaculis
  • Nulla volutpat
<ul class="list-unstyled"> <li> <span>Lorem ipsum</span></li> <li> <span>Phasellus iaculis</span></li> <li> <span>Nulla volutpat</span></li> </ul>

Inline ( inline )

Remove a list’s bullets and apply some light margin with a combination of two classes, .list-inline and .list-inline-item.

  • Lorem ipsum
  • Phasellus iaculis
  • Nulla volutpat
<ul class="list-inline"> <li class="list-inline-item"> <span>Lorem ipsum</span></li> <li class="list-inline-item"> <span>Phasellus iaculis</span></li> <li class="list-inline-item"> <span>Nulla volutpat</span></li> </ul>