directus/docs/reference/app/components/v-list.md

List

Display usual lists. Also works with nested data.

<v-list>
	<v-list-item>Item 1</v-list-item>
	<v-list-item>Item 2</v-list-item>
	<v-list-item>Item 3</v-list-item>

	<v-list-group>
		<template #activator="{active}">
			<v-list-item>Group 1</v-list-item>
		</template>

		<v-list-item>Item 1-1</v-list-item>
		<v-list-item>Item 1-2</v-list-item>
		<v-list-item>Item 1-2</v-list-item>
	</v-list-group>
</v-list>

Reference

Props

Prop	Description	Default	Type
active-items	Used with v-model to model all selected items in the list	() => []	(number or string)[]
large	Displays each list item a bit larger	false	Boolean
multiple	Allows to select multiple items in the list	true	Boolean
mandatory	At least one item has to be selected	true	Boolean

CSS Variables

Variable	Default
--v-list-padding	4px 0
--v-list-max-height	none
--v-list-max-width	none
--v-list-min-width	220px
--v-list-min-height	none
--v-list-color	var(--foreground-normal-alt)
--v-list-color-hover	var(--foreground-normal-alt)
--v-list-color-active	var(--foreground-normal-alt)
--v-list-background-color-hover	var(--background-normal-alt)
--v-list-background-color-active	var(--background-normal-alt)

Events

Event	Description	Value
input	Used to update the current selection

Slots

Slot	Description	Data
default	Render all list items here