Stats
Stats components.
Stats, Customization Blocks
30
50
100
<!-- Single --><x-stats :number="30" /> <!-- Multiple --><div class="grid grid-cols-3 gap-2"> <x-stats :number="30" /> <x-stats :number="50" /> <x-stats :number="100" /></div>Components
100
<x-stats title="Components" :number="100" />An option to allow the navigation when clicking on the card.
<x-stats href="https://tallstackui.com" target="_blank" :number="100" /> <!-- Also accepts wire:click to call a Livewire method. --><x-stats wire:click="updateQuantity" :number="$quantity" />You can also set wire:navigate or wire:navigate.hover with special attributes:
<x-stats ... navigate /> <x-stats ... navigate-hover />100
100
100
<x-stats icon="swatch" :number="100" /><x-stats icon="swatch" :number="100" light /><x-stats icon="swatch" :number="100" outline />You can also pass a raw HTML in the icon slot:
<x-stats :number="100"> <x-slot:icon> <x-avatar :model="auth()->user()" color="fff" /> </x-slot:icon></x-stats>Components
100
Components
100
Components
100
Components
100
Components
100
Components
100
Components
100
Components
100
Components
100
Components
100
Components
100
Components
100
Components
100
Components
100
Components
100
Components
100
Components
100
Components
100
Components
100
Components
100
Components
100
Components
100
Components
100
Components
100
Components
100
Components
100
Components
100
Components
100
Components
100
The color is only applied to the icon and its style.
<!-- The color is only applied to the icon and its style.--> <x-stats :number="100" /><x-stats :number="100" color="secondary" /><x-stats :number="100" color="slate" /><x-stats :number="100" color="gray" /><x-stats :number="100" color="zinc" /><x-stats :number="100" color="neutral" /><x-stats :number="100" color="stone" /><x-stats :number="100" color="red" /><x-stats :number="100" color="orange" /><x-stats :number="100" color="amber" /><x-stats :number="100" color="yellow" /><x-stats :number="100" color="lime" /><x-stats :number="100" color="green" /><x-stats :number="100" color="emerald" /><x-stats :number="100" color="teal" /><x-stats :number="100" color="cyan" /><x-stats :number="100" color="sky" /><x-stats :number="100" color="blue" /><x-stats :number="100" color="indigo" /><x-stats :number="100" color="violet" /><x-stats :number="100" color="purple" /><x-stats :number="100" color="fuchsia" /><x-stats :number="100" color="pink" /><x-stats :number="100" color="rose" /><x-stats :number="100" color="mauve" /><x-stats :number="100" color="olive" /><x-stats :number="100" color="mist" /><x-stats :number="100" color="taupe" /><x-stats :number="100" color="black" />50
100
<x-stats :number="50" increase /><x-stats :number="100" decrease /> <!-- These parameters are boolean, so you can do:-->@php($status = 2 > 1) <x-stats :number="50" :increase="$status" :decrease="$status" />An option to render a chart inside the stats.
Revenue
45231
Revenue
45231
<x-stats :number="45231" title="Revenue"> <x-slot:chart> <x-chart :series="$revenue" color="emerald" :height="64" /> </x-slot:chart></x-stats>
The component treats a missing chart, an empty array, and an empty
slot as no chart.
#
Flat Look
NEW
An option to remove shadow or border of the stats.
100
100
100
<x-stats :number="100" shadowless /><x-stats :number="100" bordered /><x-stats :number="100" shadowless bordered />25
50
75
100
The animation will happen every time the component enters the
viewport.
<x-stats :number="25" animated />Controls the count-up length. Defaults to 1 and is clamped to a non-negative integer.
45231
<x-stats :number="45231" animated :duration="3" />U$ 25,00
U$ 50,00
U$ 75,00
U$ 100,00
The
animated
effect doesn't work when using a custom number format.
<x-stats number="U$ 25,00" />
TallStackUI
50
The best TALL Stack component library
<!-- Default Styles --><x-stats :number="50" header="TallStackUI" footer="The best TALL Stack component library"> <x-slot:right> <x-icon name="wrench-screwdriver" class="w-6 h-6 text-pink-500" /> </x-slot:right></x-stats> <!-- or --> <!-- Raw Content --><x-stats :number="50"> <x-slot:header> TallStackUI </x-slot:header> <x-slot:right> <x-icon name="wrench-screwdriver" class="w-6 h-6 text-pink-500" /> </x-slot:right> <x-slot:footer> The best TALL Stack component library </x-slot:footer></x-stats>
#
Skeleton
NEW
An option to display a lazy loading skeleton indicator.
<x-stats skeleton />