Documentation

• Tab Layout Plugin
  • Installation
  • Usage
  • Assign parameters to component
  • Changelog
  • Security Vulnerabilities
  • License

#Tab Layout Plugin

This plugin creates widgets with tab layout for Filament Admin.

Demo site : https://filament-cms-website-demo.solutionforest.net/admin

Demo username : [email protected]

Demo password : 12345678 Auto Reset every hour.

#Installation

You can install the package via composer:

composer require solution-forest/tab-layout-plugin

Optionally, you can publish the views using

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

#Usage

To build Tab widget:

php artisan make:filament-tab-widget DummyTabs

You will then define the child component 'schema()' to display inside:

use SolutionForest\TabLayoutPlugin\Components\Tabs\Tab as TabLayoutTab;
use SolutionForest\TabLayoutPlugin\Components\Tabs\TabContainer;
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([
                    TabContainer::make(\Filament\Widgets\AccountWidget::class)
                ]),
            TabLayoutTab::make('Label 2')
                ->schema([
                    TabContainer::make(\Filament\Widgets\AccountWidget::class)
                        ->columnSpan(1),
                    TabContainer::make(\Filament\Widgets\AccountWidget::class)
                        ->columnSpan(1),
                ])
                ->columns(2),
            TabLayoutTab::make('Go To Filamentphp (Link)')->url("https://filamentphp.com/", true),
        ];
    }
}

Tabs may have an icon and badge, which you can set using the icon() and badge() methods:

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

#Assign parameters to component

Additionally, you have the option to pass an array of data to your component.

protected function schema(): array
{
    return [
        TabLayoutTab::make('Label 1')
            ->icon('heroicon-o-bell')
            ->badge('39')
            ->schema([
                TabContainer::make(\Filament\Widgets\AccountWidget::class)
                TabContainer::make(ViewProductCategory::class)  //TARGET COMPONENT
                    ->data(['record' => 1]),    // TARGET COMPONENT'S DATA
            ]),
        TabLayoutTab::make('Label 2')
            ->schema([
                TabContainer::make(\Filament\Widgets\FilamentInfoWidget::class),
            ]),
    ];
}

In addition to using the TabContainer component, you can create your own custom tab layout components by extending the TabLayoutComponent class or using command php artisan tab-layout:component.

For example, the following PHP code defines a FilamentInfoWidget class that extends TabLayoutComponent and specifies a ComponentTabComponent as the tab component to use. The getData method can be used to populate the component with data.

<?php
 
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
        ];
    }
}

You can also use the php artisan tab-layout:component command to generate the code for a new tab layout component. For example, to generate a FilamentInfoWidget component, you can run the following command:

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

After creating your custom tab layout component by extending the TabLayoutComponent class, you can register it on the schema of a TabLayoutTab instance.

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

#Changelog

Please see CHANGELOG for more information on what has changed recently.

#Security Vulnerabilities

If you discover any security related issues, please email [email protected] instead of using the issue tracker.

#License

The MIT License (MIT). Please see License File for more information.