A convenient statistics card inculding an icon.
| Property | Type | Description |
|---|---|---|
| id | ?string | A unique identifier. |
| value | ?string | The value of the statistic. |
| icon | ?string | The icon of the statistic. |
| icon-class | ?string | The class to apply to the icon. |
| title | ?string | The title shown above the $value. |
| subtitle | ?string | The subtitle shown below the $value. |
| link | ?string | A link to redirect to on click. |
| external | bool | If the $link is an external website or not. [default=false] |
| no-wire-navigate | bool | Don't use the wire:navigate directive. [default=false] |
| tooltip | ?string | The tooltip on top of the statistic. |
| tooltip-right | ?string | The tooltip on the right of the statistic. |
| tooltip-bottom | ?string | The tooltip on bottom of the statistic. |
| tooltip-left | ?string | The tooltip on the left of the statistic. |
Just value
With link to
Avatar
Emails
42
Sales
22.124
This month
Sales
22.124
This month
Lost
34
This month
<c-stat value="Just value" />
<c-stat title="With link to" value="Avatar" link="/docs/components/avatar"
class="shadow transition-colors hover:bg-primary hover:text-primary-content" />
<c-stat icon="mail" icon-class="text-accent" title="Emails" value="42" tooltip="Tooltip on top" />
<c-stat icon="trending-down" icon-class="text-error" title="Sales" value="22.124" subtitle="This month"
class="text-warning" tooltip-right="Tooltip on right" />
<c-stat icon="trending-up" title="Sales" value="22.124" subtitle="This month" class="text-success"
tooltip-bottom="Tooltip on bottom" />
<c-stat icon="trending-up-down" icon-class="h-6 w-6 text-info" title="Lost" value="34"
subtitle="This month" tooltip-left="Tooltip on left" />