Dropdown

State belongs to the parent. Compose this component with the props and slots below.

Preview

Open in the playground

Usage

DropdownExample.vueVue / TS

<script setup lang="ts">
import { ref } from 'vue'
import { FzDropdown } from '@chrisdalbano/forza-ui'
import type { ForzaMenuItem } from '@chrisdalbano/forza-ui'
const action = ref<string>('')
const actions: ForzaMenuItem[] = [
  { value: 'duplicate', label: 'Duplicate' },
]
</script>

<template>
  <FzDropdown
    label="Actions"
    :items="actions"
    @select="action = $event"
  />
</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
label	string	Yes	None
items	readonly ForzaMenuItem[]	Yes	None
heading	string | undefined	No	None
disabled	boolean | undefined	No	None
open	boolean | undefined	No	false

Events and state

v-model:open; select(value)

• update:open: [value: boolean]
• select: [value: string]

Slots

trigger

Add from source

forza add dropdown

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