Minimal Tab

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

ویژگی‌ها

ساخت تب‌های ساده و مینیمال با ساختار Blade
تعیین شناسه یکتا برای هر تب و ظرف تب‌ها (id)
امکان افزودن کلاس CSS سفارشی به ظرف، نوار تب و محتوای تب‌ها
تعیین تعداد تب‌ها (count)
تعیین عنوان، وضعیت فعال، کلاس و بج (badge) برای هر آیتم تب
کاملاً واکنش‌گرا و قابل استفاده در هر جای قالب Blade
مدیریت وضعیت فعال بودن تب‌ها از طریق پراپ‌ها

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

x-minimal-tab

نام پراپ	نوع داده	مقدار پیش‌فرض	توضیحات
`id`	`string`	`'minimal-tab-<random>'`	شناسه یکتا برای ظرف تب‌ها (در صورت عدم تعیین، تصادفی ساخته می‌شود)
`containerClass`	`string`	`null`	کلاس CSS اضافی برای ظرف کلی تب‌ها
`navClass`	`string`	`null`	کلاس CSS اضافی برای نوار تب‌ها
`contentClass`	`string`	`null`	کلاس CSS اضافی برای محتوای تب‌ها
`count`	`integer`	`3`	تعداد آیتم اسکلتون که هنگام بارگذاری نمایش داده می‌شود

x-minimal-tab-item

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

نکات مهم

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

مثال‌ها

نمونه پایه

<x-minimal-tab>
    
    <x-minimal-tab.item title="ویرایش کاربر">
        لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت
    </x-minimal-tab.item>

    <x-minimal-tab.item title="تاریخچه ورود" active="true">
        لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت
    </x-minimal-tab.item>

    <x-minimal-tab.item title="تاریخچه عملیات" badge="990">
        لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت
    </x-minimal-tab.item>
    
</x-minimal-tab>

ویژگی‌ها​

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

x-minimal-tab​

x-minimal-tab-item​

مثال‌ها​

نمونه پایه​