1. Components
  2. meter

Meter

Range-based value indicator for metrics like usage, score, or capacity.

Demo 

<div class="flex flex-col gap-8 w-full">
    <x-ui.meter max="9" value="4" class="text-primary" />
    <x-ui.meter max="100" value="60" class="text-secondary" />
    <x-ui.meter max="40" value="20" class="text-danger" />
    <x-ui.meter max="14" value="14" class="text-success" />
</div>

Installation

Shell 
php artisan flexi:add meter

Indicator

40%
60% 
<div class="flex flex-col gap-8 w-full">
    <div>
        <div class="flex justify-end" style="width: 40%">
            <span class="text-sm text-fg">40%</span>
        </div>
        <x-ui.meter max="10" value="4" class="text-primary" />
    </div>
    <div class="relative h-max">
        <div class="flex justify-end absolute top-0 left-0 h-6 items-center z-5" style="width: 60%">
            <span class="text-sm text-white">60%</span>
        </div>
        <x-ui.meter size="xl" max="10" value="6" class="text-primary" />
    </div>
</div>

Sizes 

<div class="flex flex-col gap-8 w-full">
    <x-ui.meter size="2xs" max="9" value="4" class="text-primary" />
    <x-ui.meter size="xs" max="100" value="60" class="text-primary" />
    <x-ui.meter size="sm" max="40" value="20" class="text-primary" />
    <x-ui.meter max="14" value="14" class="text-primary" />
    <x-ui.meter size="lg" max="20" value="10" class="text-primary" />
</div>

API

Prop Description
value (number)
Current measured value.
min (number)
Minimum bound for the scale.
max (number)
Maximum bound for the scale.
size (2xs|xs|sm|md|lg|xl)
Controls bar height.
radius (boolean)
Controls rounded style. Default: true
Prev
Skeleton

Lightweight loading...

Next
On this page