Stat

Numeric values count up when the stat scrolls into view and again when the value changes. Prefixes, suffixes, decimals and grouping are preserved; screen readers get the final value.

Preview

Open in the playground

Usage

StatExample.vueVue / TS

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

<template>
  <FzStat value="3,200" label="Gold budget" />
</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
value	string	Yes	None
detail	string | undefined	No	None
countUp	boolean | undefined	No	true

Events and state

presentational

Slots

none

Add from source

forza add stat

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