README

Important

We will archive this project since filament3 supports tabs now. https://beta.filamentphp.com/docs/3.x/infolists/layout/tabs

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 : demo@solutionforest.net

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 info+package@solutionforest.net instead of using the issue tracker.

License

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

solution-forest / tab-layout-plugin

Maintainers

Details