Stats
Stats components.
Stats, Personalization Blocks
Example:
TallStackUi::personalize() ->stats() ->block('block', 'classes');
<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
:
<x-stats ... navigate /> <x-stats ... navigate-hover />
<x-stats icon="swatch" :number="100" /><x-stats icon="swatch" :number="100" light /><x-stats icon="swatch" :number="100" outline />
Starting from v2.4.0 you can 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
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="black" />
<!-- 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>