Meter

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

Preview

Open in the playground

Usage

MeterExample.vueVue / TS

<script setup lang="ts">
import { FzMeter } from '@chrisdalbano/forza-ui'
</script>

<template>
  <FzMeter :value="72" :max="100" label="Budget used" />
</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
value	number	Yes	None
max	number | undefined	No	100
label	string	Yes	None
tone	"warning" | "positive" | "accent" | undefined	No	"positive"

Events and state

presentational

Slots

none

Add from source

forza add meter

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