Accordion
کامپوننت x-accordion این امکان را به شما میدهد که خیلی راحت و سریع، آکاردئونهای تعاملی و قابل شخصیسازی در پروژههای Blade خود بسازید. کافی است آیتمهای مختلف را با هر محتوایی که دوست دارید داخل آن قرار دهید و ظاهر و رفتار آکاردئون را مطابق نیازتان تنظیم کنید.
ویژگیها
- میتوانید انتخاب کنید فقط یک آیتم باز باشد یا چند آیتم همزمان باز شوند.
- بهسادگی میتوانید کنار عنوان هر آیتم، آیکن FontAwesome قرار دهید.
- اگر بخواهید، میتوانید در هدر هر آیتم، محتوای دلخواه خودتان را با اسلات اضافه کنید.
- ظاهر آکاردئون و آیتمها را با کلاسهای CSS دلخواه خودتان تغییر دهید.
ورودیهای کامپوننتی Accordion
| نام پراپ | نوع داده | مقدار پیشفرض | توضیحات |
|---|---|---|---|
id | string | auto-generated | اگر خودتان مقدار ندهید، یک شناسهی یکتا بهصورت خودکار ساخته میشود. |
class | string | null | هر کلاس CSS که دوست دارید برای استایلدهی به آکاردئون وارد کنید. |
type | string | "single" | مشخص میکند فقط یک آیتم باز باشد (single) یا چند آیتم همزمان (multiple). |
gap | string | null | فاصله بین آیتمها را با مقادیری مثل "8px" یا "1rem" تعیین کنید. |
showFormErrors | boolean | false | اگر مقدار را true قرار دهید، در صورت وجود خطای فرم، بوردر آیتم مربوطه هایلایت میشود. |
ورودیهای کامپوننتی Accordion.Item
| نام پراپ | نوع داده | مقدار پیشفرض | توضیحات |
|---|---|---|---|
id | string | auto-generated | اگر مقدار ندهید، یک شناسهی یکتا برای آیتم ساخته میشود. |
title | string | — | عنوانی که در هدر آیتم نمایش داده میشود. |
icon | string | null | اگر دوست دارید کنار عنوان آیکن باشد، کلاس FontAwesome را وارد کنید. |
expanded | boolean | false | اگر میخواهید آیتم بهصورت پیشفرض باز باشد، مقدار را true بگذارید. |
class | string | null | هر کلاس CSS دلخواه برای استایلدهی به آیتم. |
showCollapseIcon | boolean | true | اگر نمیخواهید آیکن باز/بستن کنار عنوان باشد، مقدار را false بگذارید. |
اسلاتهای Accordion.Item
| نام اسلات | توضیحات |
|---|---|
headerSlot | اگر بخواهید در هدر آیتم، محتوای اضافی (مثلاً دکمه یا نشان) قرار دهید، از این اسلات استفاده کنید. |
beforeTitleSlot | برای قرار دادن هر نوع محتوا قبل از عنوان آیتم. |
default | محتوای اصلی هر آیتم که با باز شدن نمایش داده میشود. |
مثالها
نمونه پایه
<x-accordion type="single" gap="8px">
<x-accordion-item
title="لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت"
icon="fa-duotone fa-solid fa-grid-2"
>
<x-slot:header-slot>
<x-badge variant="primary" appearance="light" size="md" value="ویژه" />
</x-slot:header-slot>
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت
</x-accordion-item>
<x-accordion-item
title="لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت"
icon="fa-duotone fa-solid fa-grid-2"
>
<x-slot:header-slot>
<x-switch-input name="toggle" />
</x-slot:header-slot>
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت
</x-accordion-item>
<x-accordion-item
title="لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت"
icon="fa-duotone fa-solid fa-grid-2"
>
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت
</x-accordion-item>
</x-accordion>