List

Use stable, unique item IDs. Mutate the parent array to add, remove, or reorder. Rows rise in from a blur, items added together cascade, moves spring into place, and leaving rows become inert immediately. Set preset to rise, slide, or pop.

Preview

Open in the playground

Usage

ListExample.vueVue / TS

<script setup lang="ts">
import { ref } from 'vue'
import { FzList } from '@chrisdalbano/forza-ui'
const builds = ref([{ id: 1, name: 'Guardian' }])
</script>

<template>
  <FzList :items="builds" label="Builds">
    <template #default="{ item }">{{ item.name }}</template>
    <template #empty>No builds yet.</template>
  </FzList>
</template>

TypeScript exampleSource you can use.

Import the shared stylesheet once and wrap your app in .fz-theme. See installation.

Props

Name	Type	Required	Default
items	readonly T[]	Yes	None
label	string	Yes	None
motionDisabled	boolean | undefined	No	None
duration	number | undefined	No	None
preset	ForzaMotionPreset | undefined	No	None

Events and state

parent owns mutations

Slots

default({item,index}), empty

Add from source

forza add list

Set up the CLI first. Generated API tables come from the Vue source, using Vue Language Tools.