Stats

Stats components.

Stats, Personalization Blocks

Example:

// AppServiceProvider, "boot" method.
 
TallStackUi::personalize()
    ->stats()
    ->block('block', 'classes');

# Basic Usage

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>

# Title

Components

100

<x-stats title="Components" :number="100" />

# Link

An option to allow the navigation when clicking on the card.

Components

50 Users

500 Downloads

10

<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 />

# Icons

100

<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>

# Color Variations

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" />

# Indicators

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" />

# Animated Effect

25

50

75

100

The animation will happen every time the component enters the viewport.

<x-stats :number="25" animated />

# Number Format

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" />

# Slots

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>