List

Lists are continuous, vertical indexes of text or images.

Basic link

List component is a wrapper component that contains ListItem and ListDivider components.

The basic structure of a list is as follows:

Item 1
Item 2
Item 3

<x-mbc::list>
    <x-mbc::list-item>
        Item 1
    </x-mbc::list-item>

    <x-mbc::list-item>
        Item 2
    </x-mbc::list-item>

    <x-mbc::list-item>
        Item 3
    </x-mbc::list-item>
</x-mbc::list>

Variant link

The List component has variant attribute that supports two variants: single-line and two-line. The default variant is single-line as you can see on the example above.

In order to use two-line variant, you need to set the variant attribute to two-line on the List component. The List component should have ListItems as its children. The ListItem component should have primary and secondary attributes. The preview of two-line variant is shown below.

Item 1 secondary line
Item 2
Item 3 secondary line

<x-mbc::list variant="two-line">
    <x-mbc::list-item
        primary="Item 1"
        secondary="secondary line"
    />

    <x-mbc::list-item primary="Item 2" />

    <x-mbc::list-item
        primary="Item 3"
        secondary="secondary line"
    />
</x-mbc::list>

Divider link

A divider is a thin line that groups content in lists and layouts.

Item 1
Item 2

<x-mbc::list>
    <x-mbc::list-item>
        Item 1
    </x-mbc::list-item>

    <x-mbc::list-divider />

    <x-mbc::list-item>
        Item 2
    </x-mbc::list-item>
</x-mbc::list>

Dense link

Dense list reduces the height of each list item.

Item 1
Item 2
Item 3
Item 4

<x-mbc::list dense>
    <x-mbc::list-item>
        Item 1
    </x-mbc::list-item>

    <x-mbc::list-item>
        Item 2
    </x-mbc::list-item>

    <x-mbc::list-item>
        Item 3
    </x-mbc::list-item>

    <x-mbc::list-divider />

    <x-mbc::list-item>
        Item 4
    </x-mbc::list-item>
</x-mbc::list>

Leading and Trailing link

A list items can have leading and trailing icons.

Leading Icon
Trailing Icon
Leading and Trailing Icon

The startIcon and endIcon props also accept a url or an image as a value.

Leading Image
Trailing Image
Leading and Trailing Image

You can also add the avatar prop to the List component to make the leading image/icon circular.

Avatar Icon
Avatar Image

Properties link

mbc::list link

Name	Type	Default	Description
`avatar`	`boolean`	`false`	If true, the leading image or icon will be circular.
`dense`	`boolean`	`false`	Make the component appears densed.
`disableRipple`	`boolean`	`false`	If true, the ripple effect will be disabled.
`element`	`string`	`ul`	The HTML element to use.
`variant`	`single-line \| two-line`	`single-line`	The variant to use.

mbc::list-item link

Name	Type	Default	Description
`activated`	`boolean`	`false`	If true, the list item will be activated.
`disableRipple`	`boolean`	`false`	If true, the ripple effect will be disabled.
`disabled`	`boolean`	`false`	If true, the list item will be disabled.
`element`	`string`	`li`	The HTML element to use.
`endIcon`	`url string or icon string format`		The trailing icon or image. Icon string format can be found in the Icon component page.
`primary`	`string`		The primary text for `two-line` variant.
`secondary`	`string`		The secondary text for `two-line` variant.
`selected`	`boolean`	`false`	If true, the list item will be selected.
`startIcon`	`url string or icon string format`		The leading icon or image. Icon string format can be found in the Icon component page.

mbc::list-divider link

Name	Type	Default	Description
`padded`	`bool`	`false`	If true, the divider will have a padding.

References link

Edit this page