List

Component

Props

Slots

 <template>
    <List>
        <ListItem 
            v-for="(item, index) in items" :key="index" 
        >
            {{ item }}
        </ListItem>
    </List>
</template>

<script setup lang="ts">
const items = ref<DropdownMenuItem[]>([
    {
        text: "Item 1",
    },
    {
        text: "Item 2",
    },
    {
        text: "Item 3",
    },
])
</script>
 

Components

Usage

items

List of items to display in the list. It can be used instead of the default slot.

 <template>
    <List
        :items="exampleItems"
    />
</template>

<script setup lang="ts">
const exampleItems = ref(["Item 1", "Item 2", "Item 3"])
</script>
 

hasSeparator

If set to true, a separator will be displayed at the top and bottom of each item.

 <template>
    <List
        :hasSeparator="true"
    />
</template>
 

• Type: boolean
• Default: false

layout

The layout of the list. In case of using grid layout, the number of columns can be customized by using the cols, tabletCols and mobileCols props. Uses the ListLayout enum.

 <template>
    <List
        :layout="ListLayout.LIST"
    />
</template>
 

• Type: ListLayout
• Default: ListLayout.LIST

Options

cols, tabletCols and mobileCols

The number of columns in the grid layout.

 <template>
    <List
        :layout="ListLayout.GRID"
        :cols="2"
        :tabletCols="2"
        :mobileCols="1"
    />
</template>
 

• Type: number

gapClass

The gap class applied to the list when using grid layout.

 <template>
    <List
        :layout="ListLayout.GRID"
        gapClass="gap-4"
    />
</template>
 

• Type: string
• Default: 'gap-6'

listItemIcon

The icon displayed as the marker on the list item. If it is not provided, the list item will not use any icon.

 <template>
    <List
        listItemIcon="mdi:check"
    />
</template>
 

• Type: string

listItemIconClass

The class applied to the icon displayed as the marker on the list item.

 <template>
    <List
        listItemIcon="mdi:check"
        listItemIconClass="text-icon-secondary-brand-default"
    />
</template>
 

• Type: string
• Default: 'text-icon-secondary-brand-default'

listItemSize

The size of the list item. Uses the ListItemSize enum.

 <template>
    <List
        :listItemSize="ListItemSize.SM"
    />
</template>
 

• Type: ListItemSize
• Default: ListItemSize.SM

Options

spaced

If set to true, the list items will be have more vertical spaced

 <template>
    <List
        spaced
    />
</template>
 

• Type: boolean
• Default: false

ListItem

<ListItem> represents the individual item within the <List> component.

Props

Usage

The <ListItem> component props shares some props with the <List> component.

They work the same with the difference of some props naming.

Please have a look at the usage of the similar props in the <List> component.