Card

کامپوننت x-card برای نمایش یک کارت اطلاعاتی با قابلیت شخصی‌سازی بالا در صفحات Blade استفاده می‌شود. این کامپوننت امکان نمایش عنوان، آیکن عنوان، زیرعنوان، بخش هدر، محتوا و فوتر را با کلاس‌های سفارشی فراهم می‌کند. همچنین می‌توانید حالت باز/بسته بودن کارت، حذف پدینگ، و حداکثر ارتفاع را کنترل کنید.

---

ویژگی‌ها

• نمایش عنوان اصلی کارت با قابلیت افزودن کلاس و آیکن سفارشی
• پشتیبانی از زیرعنوان (subtitle) زیر عنوان اصلی
• امکان افزودن کلاس سفارشی به بخش‌های مختلف کارت: هدر، بدنه، محتوا، فوتر و کل کارت
• کنترل باز یا بسته بودن کارت (expand/collapse) و مقدار پیش‌فرض آن
• امکان حذف پدینگ داخلی کارت (noPadding)
• تعیین حداکثر ارتفاع کارت با اسکرول خودکار محتوا (maxHeight)
• کاملاً قابل شخصی‌سازی و واکنش‌گرا

---

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

نام پراپ	نوع داده	مقدار پیش‌فرض	توضیحات
title	string	null	متن عنوان اصلی کارت
titleClass	string	null	کلاس‌های CSS اضافی برای بخش عنوان
titleIcon	string	null	کلاس آیکن FontAwesome برای نمایش کنار عنوان
headerClass	string	null	کلاس‌های CSS اضافی برای بخش هدر کارت
bodyClass	string	null	کلاس‌های CSS اضافی برای بدنه کارت
contentClass	string	null	کلاس‌های CSS اضافی برای محتوای اصلی کارت
footerClass	string	null	کلاس‌های CSS اضافی برای بخش فوتر کارت
subtitle	string	null	زیرعنوان (متن کوچکتر زیر عنوان اصلی)
class	string	null	کلاس‌های CSS اضافی برای ظرف اصلی کارت
defaultExpanded	boolean	true	آیا کارت به طور پیش‌فرض باز باشد؟ (در صورت پشتیبانی از حالت باز/بسته)
expanded	boolean	false	کنترل باز/بسته بودن کارت به صورت کنترل‌شده (برای حالت‌های تعاملی)
noPadding	boolean	false	حذف پدینگ داخلی کارت
maxHeight	string	null	حداکثر ارتفاع کارت (مثلاً 400px یا 50vh)

---

اسلات‌ها

نام اسلات	توضیحات
default	محتوای اصلی کارت که در بخش بدنه (body) نمایش داده می‌شود.
headerActions	اکشن‌ها یا دکمه‌های سفارشی که در هدر کارت نمایش داده می‌شوند.
headerBottom	محتوای سفارشی که در پایین هدر کارت (زیر عنوان و اکشن‌ها) نمایش داده می‌شود.
subtitleCustom	محتوای سفارشی برای نمایش زیر عنوان (subtitle) یا جایگزین متن ساده زیر عنوان اصلی کارت.
headerBadges	نمایش برچسب‌ها (badge) یا وضعیت‌های سفارشی در هدر کارت، معمولاً کنار عنوان یا اکشن‌ها.
footer	محتوای سفارشی برای بخش فوتر کارت که در پایین کارت نمایش داده می‌شود.

---

مثال‌ها

نمونه پایه

@php
    $items = [
        ['icon' => 'fa-regular fa-grid-2', 'content' => 'سال اعتبار: 1402'],
        ['icon' => null, 'content' => 'طرح: ایمن‌سازی'],
        ['icon' => 'fa-regular fa-grid-2', 'content' => 'سطح اعتبار: استانی'],
        ['icon' => 'fa-regular fa-grid-2', 'content' => 'استان: مازندران'],
        ['icon' => 'fa-regular fa-grid-2', 'content' => 'استان: مازندران'],
        ['icon' => 'fa-regular fa-grid-2', 'content' => 'اعتبار مصوب (میلیون ریال): 1,000'],
    ];
@endphp

<x-card :default-expanded="true" title="عنوان کارت">
    
    <x-slot name="headerBottom">
        
        <div class="custom-alert d-flex gap-2 align-items-center">
            <div class="d-flex gap-2 align-items-center">
                <x-data-item label="شیوه تامین اعتبار" value="اخزا" appearance="light" variant="info" />
                <x-data-item label="شیوه تامین اعتبار" value="اخزا" :badge="false" />
            </div>

            <x-button title="ارسال صورت حساب" variant="dark" size="md" />
        </div>
        
    </x-slot>

    <x-slot name="headerBadges">
        
        <x-badge value="طرح مصوب" variant="primary" appearance="light" size="sm" />

        <x-badge value="اجرایی" appearance="light" variant="danger" size="sm" />
        
    </x-slot>

    توضیحات و بدنه ی کارت

    <x-slot name="footer">
        
        <div class="fw-500 fs-16">
            <div>کارت فوتر</div>
        </div>
        
    </x-slot>

    <x-slot name="headerActions">
        
        <div class="d-flex gap-4 align-items-center flex-wrap">
            <x-button title="توزیع اعتبار مصوب نوع پروژه" variant="primary" appearance="light" />
            <x-button title="نوع پروژه" appearance="light" variant="info" />
        </div>
        
    </x-slot>
    
</x-card>