پرش به مطلب اصلی

Tab Generator

Tab Generator ابزاری برای تعریف و تولید مجموعه‌ تب‌های قابل سفارشی‌سازی است. این ابزار امکان ایجاد تب‌های پویا، تنظیم حالت نمایش، کنترل رندر، و اعمال دسترسی‌ها را در یک ساختار استاندارد فراهم می‌کند.

ایجاد Tab​

برای ایجاد یک کلاس تب جدید که از BaseTab ارث‌بری می‌کند:

php artisan dornica:make-tab SampleTab

برای ایجاد تب داخل ماژول مشخص:

php artisan dornica:make-tab SampleTab --module=MODULE_NAME
نکته

مقدار MODULE_NAME باید نام ماژول شما باشد.

کلاس ایجادشده محل اصلی تعریف تب‌ها و تنظیمات عمومی آن‌هاست:

<?php

namespace App\Generators\Tabs;

use Dornica\PanelKit\Generator\Tab\BaseTab;

class SampleTab extends BaseTab
{
    public function tabs(): array
    {
        return [
            // تعریف تب‌ها
        ];
    }
}

تنظیمات اولیه​

می‌توانید تنظیمات پایه را داخل constructor انجام دهید:

public function __construct()
{
    $this->disableRendering();     // غیرفعال‌سازی رندر خودکار
    $this->layoutBySection();      // تعیین چیدمان بر اساس بخش ‌ها
    $this->layoutMode('minimal');  // تنظیم حالت نمایش
}

disableRendering​

این متد کنترل می‌کند که تب‌ها در خروجی رندر شوند یا نه. وقتی رندر غیرفعال باشد، تب‌ها ساخته می‌شوند اما در UI نمایش داده نمی‌شوند. این حالت زمانی کاربرد دارد که قرار است جای سفارشی تب هارا نمایش دهید.

ساختار متد
function disableRendering(bool $state = true): static

layoutBySection​

این متد تعیین می‌کند که چینش (Layout) تب‌ها بر اساس Section های تعریف‌شده در Layout نمایش داده می‌شوند و نه در بالای صفحه. این گزینه معمولاً زمانی استفاده می‌شود که تب‌ها در یک صفحه پیچیده یا چندبخشی قرار می‌گیرند.

layoutMode​

این متد حالت کلی نمایش تب‌ها را تعیین می‌کند:

  • default: نمایش کامل شامل عنوان، زیرعنوان، آیکون‌ها و ابزارهای تب.
  • minimal: نسخهٔ ساده‌تر و فشرده‌تر تب‌ها، مناسب صفحات کم‌ازدحام یا زمانی که نیاز به رابط مینیمال است.
  • classic: حالت نمایشی اضافه‌شده برای تم lite که استایل متفاوتی نسبت به دو حالت قبلی دارد.

به صورت پیش‌فرض، حالت نمایش default است.

هشدار

حالت classic فقط در تم lite پشتیبانی می‌شود و در تم default قابل استفاده نیست.

نکته

این مقدار برای تمامی تب‌های Generator اعمال می‌شود مگر اینکه تب خاصی تنظیمات متفاوت داشته باشد.

استفاده از Tab Generator​

تعیین حالت نمایش​

اگر تب‌های شما با Tab Generator ساخته می‌شوند، می‌توانید حالت نمایش را یک‌بار در کلاس تنظیم کنید:

class AdminTab extends BaseTab
{
    public function __construct()
    {
        $this->layoutMode('minimal');
    }

    public function tabs(): array
    {
        return [
            Tab::make('tab1')
                ->routeName('admin.admins.admins.edit')
                ->title(__('table.admins.edit_page'))
                ->subTitle('متن نمونه')
                ->permission('admin.admins.admins.edit'),

            Tab::make('tab2')
                ->routeName('admin.admins.admins.change_password')
                ->routeParameters([
                    'admin_id' => encryptValue($this->admin->id)
                ])
                ->title("تغییر رمز عبور")
                ->subTitle('متن نمونه')
                ->tooltip('tooltip1')
                ->disabled(fn() => rand(1, 2) === 1)
                ->disabledTooltip('tooltip2')
                ->permission('admin.admins.admins.edit'),
        ];
    }
    
    public function routeParameters(): array
    {
        return [
            'admin_id' => encryptValue($this->admin->id)
        ];
    }
}

اگر پروژه از theme lite استفاده می‌کند، می‌توانید mode جدید را هم به این صورت فعال کنید:

class AdminTab extends BaseTab
{
    public function __construct()
    {
        $this->layoutMode('classic');
    }
}

متد routeParameters​

این متد مجموعه پارامترهای مشترک مورد نیاز برای تمام تب‌ها را تعریف می‌کند و باعث می‌شود مقداردهی Route Parameters در یک نقطه مرکزی انجام شود. پارامترهای تعریف‌شده در این متد به‌صورت خودکار به همهٔ تب‌ها اعمال می‌شوند، مگر اینکه یک تب به‌طور صریح پارامترهای مختص خود را مشخص کرده باشد. این رویکرد هم مدیریت پارامترها را ساده‌تر می‌کند و هم از تکرار در پیاده‌سازی جلوگیری می‌کند.

ساختار متد
function routeParameters(): array

غیرفعال‌سازی رندر و استفاده در جای سفارشی​

در صورتی که بخواهید تب‌ها را در جای سفارشی رندر کنید، می‌توانید رندر خودکار را غیرفعال نمایید و سپس در محل مورد نظر خود آن را رندر کنید.

غیرفعال‌سازی رندر در کلاس تب:

$this->disableRendering();      // غیرفعال
$this->disableRendering(true);  // غیرفعال
$this->disableRendering(false); // فعال‌سازی

رندر تب‌ها در جای سفارشی در Blade:

<x-default-layout>

    {!! bladeLayout()->tab()->render() !!}
    
</x-default-layout>

نمایش چندتایی تب ها در یک صفحه​

برای نمایش چند tab در یک صفحه واحد می توان هر جدول را با یک نام یکتا ثبت کنید و آنها را به صورت جداگانه در بلید نمایش دهید

Controller​

public function show(User $user)
{
    BladeLayout::tab(UserTab::class, 'user');                       
    BladeLayout::tab(UserRelatedTab::class, 'related');

    return view('users.show');
}

Blade​

<x-default-layout>
    <div class="mb-6">
        {!! bladeLayout()->tab('user')->render() !!}
    </div>
    <div class="mb-6">
        {!! bladeLayout()->tab('related')->render() !!}
    </div>

    {{-- page content --}}
</x-default-layout>