Modal

کامپوننت x-modal برای نمایش دیالوگ‌های مدرن و قابل شخصی‌سازی در صفحات Blade استفاده می‌شود. این کامپوننت امکانات متنوعی برای کنترل ظاهر، رفتار و محتوای مودال را در اختیار شما قرار می‌دهد.

---

ویژگی‌ها

نام پراپ	نوع داده	مقدار پیش‌فرض	توضیحات
id	string	-	شناسه یکتا برای مودال (اجباری)
title	string	-	عنوان مودال که در هدر نمایش داده می‌شود
showCloseIcon	boolean	true	نمایش یا عدم نمایش آیکون بستن در هدر
closable	boolean	true	امکان بستن مودال با کلیک بیرون یا کلید ESC
size	string	"md"	اندازه مودال (sm, md, lg, xl, fullscreen)
onCloseAction	string	null	اکشن هنگام بستن (clear یا reset)
scrollable	boolean	true	فعال‌سازی اسکرول برای محتوای مودال
class	string	null	کلاس CSS اضافی برای المنت اصلی مودال
contentClass	string	-	کلاس CSS اضافی برای بخش محتوای مودال
headerClass	string	-	کلاس CSS اضافی برای هدر مودال
footerClass	string	-	کلاس CSS اضافی برای فوتر مودال
bodyClass	string	-	کلاس CSS اضافی برای بدنه مودال
containerClass	string	-	کلاس CSS اضافی برای کانتینر مودال
verticalAlign	string	"center"	تراز عمودی مودال (center, top, ...)

---

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

نام اسلات	توضیحات
title_badges	محتوای بج یا نشان کنار عنوان مودال
header_bottom	محتوای اضافی زیر هدر
footer	محتوای فوتر مودال
default	محتوای اصلی بدنه مودال (بدنه مودال)

---

مثال‌ها

نمونه پایه

<x-button
    title="نمایش مودال"
    data-bs-target="#test"
    variant="warning"
    data-bs-toggle="modal"
/>

<x-modal
    title="بررسی کامپوننت مودال"
    showCloseIcon="true"
    isNonClosable="true"
    id="test"
>
    
    <x-slot:title_badges>
        <x-badge
            value="در حال بررسی"
            variant="info"
        />
        <x-badge
            value="مسدود"
            variant="success"
        />
    </x-slot:title_badges>

    <x-slot:header_bottom>
        <x-badge
            value="اخطار"
            size="md"
            icon="fas fa-check"
            iconPosition="left"
            variant='warning'
        />
    </x-slot>

    <p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت</p>

    <x-slot:footer>
        <x-button
            appearance="outline"
            variant="light"
            title="انصراف"
            size="md"
            data-bs-dismiss="modal"
        />
    </x-slot>

</x-modal>

setModalTitle

عنوان (Title) یک مودال را با استفاده از شناسه المنت والد و مقدار جدید تغییر می‌دهد.