PHP code example of solution-forest / tab-layout-plugin

    
        
<?php
require_once('vendor/autoload.php');

/* Start to develop here. Best regards https://php-download.com/ */

    

solution-forest / tab-layout-plugin example snippets

// In App\Resources\UserResource\ListUsers.php

use SolutionForest\TabLayoutPlugin\Schemas\SimpleTabSchema;
use SolutionForest\TabLayoutPlugin\Widgets\TabsWidget;

class ListUsers extends ListRecords
{
    protected function getHeaderWidgets(): array
    {
        return [
            TabsWidget::make([

                SimpleTabSchema::make(
                    label: 'Account Widget',
                    id: 'account_widget',
                )->livewireComponent(\Filament\Widgets\AccountWidget::class),

                SimpleTabSchema::make(
                    label: 'Edit User',
                )->livewireComponent(\App\Filament\Resources\UserResource\Pages\EditUser::class, ['record' => 1]),

                SimpleTabSchema::make('Link')
                    ->url('https://example.com', true)
                    ->icon('heroicon-o-globe-alt'),
            ]),
        ];
    }
}

namespace App\Filament\Widgets;

use SolutionForest\TabLayoutPlugin\Components\Tabs\Tab as TabLayoutTab;
use SolutionForest\TabLayoutPlugin\Schemas\Components\LivewireContainer;
use SolutionForest\TabLayoutPlugin\Schemas\Components\TabContentContainer;
use SolutionForest\TabLayoutPlugin\Widgets\TabsWidget as BaseWidget;

class DummyTabs extends BaseWidget
{
    protected function schema(): array
    {
        return [

            TabLayoutTab::make('Label 1')
                ->icon('heroicon-o-bell') 
                ->badge('39')
                ->schema([

                    // Display Livewire component
                    LivewireContainer::make(\Filament\Widgets\AccountWidget::class),

                    // Display HTML
                    str('
## This is dummy HTML code inside a tab

- This is a bullet point
- Another bullet point

TabLayoutTab::make('Label 1')
    ->icon('heroicon-o-bell') 
    ->badge('39')
    ->schema([
        // ...
    ]),

protected function schema(): array
{
    return [
        TabLayoutTab::make('Label 1')
            ->icon('heroicon-o-bell')
            ->badge('39')
            ->schema([
                LivewireContainer::make(\Filament\Widgets\AccountWidget::class),
                
                // Display Livewire component with data
                LivewireContainer::make(ViewProductCategory::class)
                    // The Data of target component
                    ->data(['record' => 1]),    
            ]),

        TabLayoutTab::make('Label 2')
            ->schema([
                LivewireContainer::make(\Filament\Widgets\FilamentInfoWidget::class),
            ]),
    ];
}

// In App\Resources\UserResource\ListUsers.php

class ListUsers extends ListRecords
{
    protected function getHeaderWidgets(): array
    {
        return [
            \App\Filament\Widgets\DummyTabs::class,
        ];
    }
}

use SolutionForest\TabLayoutPlugin\Components\Tabs;
use SolutionForest\TabLayoutPlugin\Widgets\TabsWidget as BaseWidget;

class DummyTabs extends BaseWidget
{
    public static function tabs(Tabs $tabs): Tabs
    {
        return $tabs
            // Dynamic: Use a callback to determine the active tab 
            ->activeTab(function (self $livewire, Tabs $component): int {
                return 2; // Second tab will be active
            })
            // Static: Set a specific tab as active by order
            ->activeTab(2); // Second tab will be active
    }
}

use SolutionForest\TabLayoutPlugin\Components\Tabs;
use SolutionForest\TabLayoutPlugin\Components\Tabs\Tab as TabLayoutTab;
use SolutionForest\TabLayoutPlugin\Widgets\TabsWidget as BaseWidget;

class DummyTabs extends BaseWidget
{
    // Define the property that will store the active tab
    public $activeTab = '';

    // Enable Livewire query string binding
    public function queryString()
    {
        return ['activeTab'];
    }

    public static function tabs(Tabs $tabs): Tabs
    {
        return $tabs
            ->id('dummy-tabs') // Required: unique ID for the tab group
            // Dynamic: Use a callback to get the query parameter name
            ->persistTabInQueryString(function ($component, $livewire) {
                return 'activeTab'; // Property name to sync with URL
            })
            // Static: Direct property name for URL persistence
            ->persistTabInQueryString('activeTab');
    }
    
    protected function schema(): array
    {
        return [
            TabLayoutTab::make(label: 'Tab 1', id: 'sample-1')
                ->schema([
                    // Tab 1 content...
                ]),
            TabLayoutTab::make(label: 'Tab 2', id: 'sample-2')
                ->schema([
                    // Tab 2 content...
                ]),
        ];
    }
}

use SolutionForest\TabLayoutPlugin\Components\Tabs;

class DummyTabs extends BaseWidget
{
    public static function tabs(Tabs $tabs): Tabs
    {
        return $tabs
            ->contained(false);
    }
}

namespace App\Filament\Tabs\Components;

use Filament\Widgets\FilamentInfoWidget as ComponentTabComponent;
use SolutionForest\TabLayoutPlugin\Components\Tabs\TabLayoutComponent;

class FilamentInfoWidget extends TabLayoutComponent
{
    protected ?string $component = ComponentTabComponent::class;

    public function getData(): array
    {
        return [
            // Data to assign to component
        ];
    }
}

protected function schema(): array
{
    return [
        ...
        TabLayoutTab::make('Label 3')
            ->schema([
                \App\Filament\Tabs\Components\FilamentInfoWidget::make()
                    // ->data([]),  // Also can assign data here
            ]),
    ];
}

bash
php artisan vendor:publish --tag="tab-layout-plugin-views"

bash
php artisan tab-layout:component FilamentInfoWidget Filament\Widgets\FilamentInfoWidget