TaavUI Lab
Layout

TaavStatsCard

کارت metric برای dashboard، report summary و setup progress.

import { TaavStatsCard } from '@repo/ui/taav/layout';

استفاده پایه

RTL Preview

کارمندان فعال

۱۲۴

نسبت به ماه قبل

+۸٪رشد

قراردادهای در انتظار

۶

۲ مورد

Tones

پیش‌نمایش

neutral

۴۲

brand

۴۲

success

۴۲

warning

۴۲

danger

۴۲

info

۴۲

Loading

پیش‌نمایش

Props

Propنوعپیش‌فرضتوضیح
title / value / descriptionReactNodeمحتوای metric
tone'neutral' | 'brand' | 'success' | 'warning' | 'danger' | 'info' | 'purple'neutralتن رنگ
size / variantsm|md|lg / card|soft|outline|ghostاندازه و سطح
trendTaavStatsTrendروند (value, direction, tone, label)
loading / footer / actionboolean / ReactNodeحالت‌ها و footer

Design Specs

Value mdvar(--taav-stats-value-md)
Tone brandvar(--taav-stats-tone-brand)

Do / Don't

انجام دهید

  • value و trend را از API محاسبه و pass کنید

انجام ندهید

  • محاسبه metric داخل StatsCard نگذارید