Tab Panel

کامپوننت‌های x-tab-panel و x-tab-panel-item برای ساخت تب‌بندی (Tab Panel) در صفحات Blade استفاده می‌شوند. این کامپوننت‌ها امکان نمایش تب‌های افقی یا عمودی با قابلیت شخصی‌سازی کامل را فراهم می‌کنند و برای نمایش محتوای دسته‌بندی‌شده یا فرم‌های چندبخشی بسیار مناسب هستند.

ویژگی‌ها

پشتیبانی از نمایش تب‌ها به صورت افقی (horizontal) یا عمودی (vertical)
امکان تعیین شناسه یکتا (id) و کلاس سفارشی برای ظرف اصلی، ناوبری تب‌ها و محتوای تب‌ها
قابلیت تعیین عنوان کلی برای پنل تب‌ها
امکان تعیین تعداد تب‌های اسکلتی (در حالت لودینگ)
پشتیبانی از تعیین عنوان، فعال بودن، بج (badge) و کلاس سفارشی برای هر تب
کاملاً واکنش‌گرا و قابل استفاده در هر جای قالب Blade

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

x-tab-panel

نام پراپ	نوع داده	مقدار پیش‌فرض	توضیحات
`id`	`string`	`null`	شناسه یکتا برای TabPanel (در صورت عدم تعیین، تصادفی ساخته می‌شود)
`orientation`	`string`	`'vertical'`	جهت نمایش تب‌ها (`vertical` یا `horizontal`)
`containerClass`	`string`	`null`	کلاس CSS اضافی برای ظرف اصلی TabPanel
`navClass`	`string`	`null`	کلاس CSS اضافی برای بخش ناوبری تب‌ها
`contentClass`	`string`	`null`	کلاس CSS اضافی برای بخش محتوای تب‌ها
`title`	`string`	`null`	عنوان کلی برای TabPanel (اختیاری)
`count`	`int`	`3`	تعداد تب‌های اسکلتی (در حالت لودینگ یا Skeleton)

x-tab-panel-item

نام پراپ	نوع داده	مقدار پیش‌فرض	توضیحات
`id`	`string`	`تصادفی`	شناسه یکتا برای هر تب (در صورت عدم تعیین، تصادفی ساخته می‌شود)
`active`	`bool`	`false`	فعال بودن تب (برای نمایش تب به صورت فعال)
`title`	`string`	`null`	عنوان تب (اختیاری)
`class`	`string`	`null`	کلاس CSS اضافی برای تب
`badge`	`string`	`null`	مقدار بج (مثلاً تعداد یا وضعیت)

نکات مهم

مقدار orientation فقط باید یکی از مقادیر vertical یا horizontal باشد. در صورت مقدار نامعتبر، خطا رخ می‌دهد.
مقدار id در هر دو کامپوننت در صورت عدم تعیین، به صورت تصادفی ساخته می‌شود تا از تداخل جلوگیری شود.
برای نمایش تب فعال، پراپ active را روی true قرار دهید.
برای نمایش بج کنار عنوان تب، پراپ badge را مقداردهی کنید.

مثال‌ها

نمونه پایه

<x-tab-panel title="منوی کاربر">
    
    <x-tab-item id="tab-1" title="ویرایش کاربر">
        <div>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت</div>
    </x-tab-item>
    
    <x-tab-item id="tab-2" active="true" title="تاریخچه ورود">
        <div>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت</div>
    </x-tab-item>
    
    <x-tab-item id="tab-3" title="تاریخچه عملیات" badge="990">
        <div>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت</div>
    </x-tab-item>
    
</x-tab-panel>

ویژگی‌ها​

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

x-tab-panel​

x-tab-panel-item​

مثال‌ها​

نمونه پایه​