Data Card

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

ویژگی‌ها

نمایش عنوان، آیکن عنوان و پسوند عنوان (titleSuffix)
نمایش توضیحات (description) با قابلیت افزودن کلاس سفارشی
پشتیبانی از پیش‌نمایش تصویر، ویدیو یا آیکن (previewSrc, previewIcon, previewMode)
امکان نمایش یا مخفی کردن پیش‌نمایش و آیکن پیش‌نمایش
پشتیبانی از حالت پاپ‌آپ برای پیش‌نمایش (showPreviewPopup)
نمایش برچسب روی پیش‌نمایش (previewBadgeTitle)
پشتیبانی از حالت غیرفعال (disabled) و تغییر ظاهر بر اساس آن
قابلیت تعیین جهت نمایش (عمودی یا افقی) با پراپ orientation
امکان افزودن بخش انتهایی سفارشی (endSection)
شخصی‌سازی کلاس‌های بخش‌های مختلف کارت
تعیین نوع و واریانت ظاهری کارت (type, previewVariant)
پشتیبانی از روت برای کلیک روی کارت (route)
کاملاً قابل شخصی‌سازی و واکنش‌گرا

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

نام پراپ	نوع داده	مقدار پیش‌فرض	توضیحات
`title`	`string`	`null`	عنوان اصلی کارت
`titleIcon`	`string`	`null`	کلاس آیکن FontAwesome برای نمایش کنار عنوان
`titleSuffix`	`string`	`null`	متن یا عنصر پسوند عنوان (مثلاً وضعیت یا مقدار)
`description`	`string`	`null`	توضیحات یا متن زیر عنوان
`previewSrc`	`object` \| `int` \| `string`	`null`	منبع تصویر یا فایل برای پیش‌نمایش (آیدی فایل، مدل فایل یا آدرس مستقیم)
`previewIcon`	`string`	`null`	کلاس آیکن FontAwesome برای پیش‌نمایش (در صورت نبود تصویر)
`previewBadgeTitle`	`string`	`null`	متن برچسب روی پیش‌نمایش
`showPreview`	`bool`	`true`	نمایش یا مخفی کردن بخش پیش‌نمایش
`showPreviewIcon`	`bool`	`true`	نمایش یا مخفی کردن آیکن پیش‌نمایش
`showPreviewPopup`	`bool`	`true`	فعال‌سازی پاپ‌آپ برای پیش‌نمایش
`showVideoThumbnail`	`bool`	`false`	نمایش تصویر بندانگشتی ویدیو (در حالت ویدیو)
`previewMode`	`string`	`fancybox`	نوع پیش‌نمایش: `fancybox` یا `modal`
`previewTooltip`	`string`	`null`	تولتیپ کانتینر پیش نمایش
`iconTooltip`	`string`	`null`	تولتیپ آیکن پیش نمایش
`previewNotFoundTooltip`	`string`	`null`	تولتیپ در حالت پیدا نشدن فایل
`endSection`	`string`	`null`	محتوای سفارشی انتهای کارت (مثلاً دکمه یا وضعیت)
`orientation`	`string`	`vertical`	جهت نمایش کارت: `vertical` یا `horizontal`
`titleClass`	`string`	`null`	کلاس CSS اضافی برای عنوان
`descriptionClass`	`string`	`null`	کلاس CSS اضافی برای توضیحات
`previewClass`	`string`	`null`	کلاس CSS اضافی برای بخش پیش‌نمایش
`endSectionClass`	`string`	`null`	کلاس CSS اضافی برای بخش انتهایی کارت
`class`	`string`	`null`	کلاس CSS اضافی برای ظرف اصلی کارت
`containerClass`	`string`	`null`	کلاس CSS اضافی برای کانتینر کارت
`type`	`string`	`default`	نوع کارت (برای استایل‌دهی سفارشی)
`route`	`string`	`'/'`	مسیر روت برای کلیک روی کارت (در صورت نیاز)
`previewVariant`	`string`	`light`	واریانت قسمت پیش نمایش کارت (`light`, `secondary`, ...)
`disabled`	`bool`	`false`	غیرفعال کردن کارت (تغییر ظاهر و عدم امکان کلیک)

نکات مهم

اگر همزمان previewIcon و previewSrc مقداردهی شوند، خطا رخ می‌دهد و فقط یکی باید مقدار داشته باشد.
اگر کارت غیرفعال (disabled=true) باشد، واریانت به صورت خودکار به secondary تغییر می‌کند.
مقدار orientation فقط باید یکی از 'vertical' یا 'horizontal' باشد.
اگر مقدار previewSrc عدد یا مدل فایل باشد، آدرس فایل به صورت خودکار استخراج می‌شود.
اگر route مقداردهی شود، کارت به صورت کلیک‌پذیر عمل می‌کند.
برای شخصی‌سازی بیشتر، می‌توانید از اسلات‌ها و کلاس‌های سفارشی استفاده کنید.

مثال‌ها

نمونه پایه

<div class="row g-4">
    <x-data-card
        containerClass="col-12"
        orientation="horizontal"
        title="لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت"
        previewSrc="https://marketplace.canva.com/zd64ZbHmEDc.jpg"
    >

        <x-slot name="titleSuffix">
            <x-badge appearance="light" variant="info" value="اقتصادی" size="xs"/>
        </x-slot>

        لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ.

    </x-data-card>

    <x-data-card
        containerClass="col-12"
        class="bg-gray-secondary"
        orientation="horizontal"
        title="لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت"
        previewSrc="https://marketplace.canva.com/EAGDMVLSqu8.jpg"
    >

        <x-slot name="titleSuffix">
            <x-badge appearance="light" variant="info" value="اقتصادی" size="xs"/>
        </x-slot>

        لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ.

        <x-slot name="endSection">
            <x-button
              variant="primary"
              appearance="light"
              title="عملیات"
              size="xs"
              icon="fa-regular fa-ellipsis-vertical"
            />
        </x-slot>

    </x-data-card>
</div>

ویژگی‌ها​

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

مثال‌ها​

نمونه پایه​

ویژگی‌ها

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

مثال‌ها

نمونه پایه