Stats

>= 1.20

Stats components.

Stats, Personalization Blocks

This content is part of TallStackUI personalization.

Example:

TallStackUi::personalize()
    ->stats()
    ->block('block', 'classes');

The soft personalization should be done in boot method of service providers.

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

Starting from version 1.35.0 you can now use navigate and navigate-hover :

<!-- <a href="https://tallstackui.com" wire:navigate ...> -->
<x-stats href="https://tallstackui.com" target="_blank" :number="100" navigate />
 
<!-- <a href="https://tallstackui.com" wire:navigate.hover ...> -->
<x-stats href="https://tallstackui.com" target="_blank" :number="100" navigate-nover />

# Icons

100

<x-stats icon="swatch" :number="100" />
<x-stats icon="swatch" :number="100" light />
<x-stats icon="swatch" :number="100" outline />

# 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" />
<x-stats :number="100" color="white" />

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