Stat Card

کامپوننت x-stat-card برای نمایش کارت آماری (Stat Card) در صفحات Blade استفاده می‌شود. این کامپوننت برای نمایش اطلاعات آماری، اعداد کلیدی، آیکن، عنوان و مقادیر با قابلیت شخصی‌سازی بالا مناسب است و می‌تواند در داشبوردها، صفحات گزارش و هر جایی که نیاز به نمایش خلاصه داده‌ها دارید، استفاده شود.

ویژگی‌ها

پشتیبانی از تعیین عنوان (label) و مقدار (value) به صورت پراپ یا اسلات
امکان افزودن آیکن اصلی و آیکن کنار عنوان (labelIcon)
قابلیت افزودن پسوند (suffix) به مقدار
پشتیبانی از انواع variant برای تعیین رنگ و ظاهر کارت (light, info, primary, success, danger و ...)
تعیین جهت نمایش (عمودی یا افقی) با پراپ orientation
امکان افزودن کلاس سفارشی به کارت و ظرف کارت
قابلیت شخصی‌سازی کلاس هر بخش (labelClass, valueClass, iconClass و ...)
کاملاً واکنش‌گرا و قابل استفاده در هر جای قالب Blade

ورودی‌های کامپوننت

نام پراپ	نوع داده	مقدار پیش‌فرض	توضیحات
`label`	`string`	-	عنوان کارت (اجباری)
`value`	`string`	`null`	مقدار آماری (در صورت عدم استفاده از اسلات مقدار)
`valueSlot`	`string`	`null`	اسلات مقدار (در صورت نیاز به محتوای سفارشی به جای value)
`class`	`string`	`null`	کلاس CSS اضافی برای کارت
`containerClass`	`string`	`null`	کلاس CSS اضافی برای ظرف کارت
`labelClass`	`string`	`null`	کلاس CSS برای عنوان
`labelIcon`	`string`	`null`	آیکن کنار عنوان (کلاس FontAwesome یا ...)
`labelIconClass`	`string`	`null`	کلاس CSS برای آیکن کنار عنوان
`valueClass`	`string`	`null`	کلاس CSS برای مقدار
`icon`	`string`	`null`	آیکن اصلی کارت (کلاس FontAwesome یا ...)
`iconClass`	`string`	`null`	کلاس CSS برای آیکن اصلی
`suffix`	`string`	`null`	پسوند مقدار
`suffixClass`	`string`	`null`	کلاس CSS برای پسوند
`prefix`	`string`	`null`	پیشوند مقدار
`prefixClass`	`string`	`null`	کلاس CSS برای پیشوند
`orientation`	`string`	`vertical`	جهت نمایش کارت (`vertical` یا `horizontal`)
`variant`	`string\|Variant enum`	`light`	نوع ظاهر کارت (light, info, primary, success, danger و ...)

نکات مهم

پراپ label اجباری است.
پراپ variant می‌تواند یک رشته معتبر یا مقدار Enum باشد (در صورت نامعتبر بودن خطا می‌دهد).
پراپ orientation فقط باید یکی از مقادیر vertical یا horizontal باشد.
اگر پراپ valueSlot مقداردهی شود، محتوای آن جایگزین مقدار value خواهد شد.
برای شخصی‌سازی بیشتر می‌توانید از کلاس‌های سفارشی برای هر بخش استفاده کنید.

مثال‌ها

نمونه پایه

<x-stat-card
    containerClass="col-md-3"
    label="تعداد کاربران"
    value="1,520"
    labelIcon="fa-regular fa-user"
    icon="fa-regular fa-heart"
    iconClass="text-danger"
>

    <x-slot:suffix>
        <x-badge
            appearance="light"
            variant="danger"
            value="52%"
            size="xs"
            icon="fa-regular fa-arrow-trend-down"
        />
    </x-slot>

</x-stat-card>

<div class="col-md-3">
    <x-stat-card
        label="تعداد کاربران در یک روز قشنگ آفتابی"
        value="1,520,920,000"
        labelIcon="fa-regular fa-user"
        labelIconClass="text-bg-light-primary"
        icon="fa-regular fa-heart"
        iconClass="text-danger"
    />
</div>

<div class="col-md-3">
    <x-stat-card
        label="تعداد کاربران"
        value="20,920"
        labelIcon="fa-regular fa-user"
        labelIconClass="text-bg-light-info"
    >

        <x-slot:suffix>
            <x-badge
                appearance="light"
                variant="danger"
                value="52%"
                size="xs"
                icon="fa-regular fa-arrow-trend-down"
            />
        </x-slot>

    </x-stat-card>
</div>

ویژگی‌ها​

ورودی‌های کامپوننت​

مثال‌ها​

نمونه پایه​

ویژگی‌ها

ورودی‌های کامپوننت

مثال‌ها

نمونه پایه