• Tabs Widget

Tabs Widget

Plugin information

by alan lam

Admin panel Widget

This plugin creates widgets with tab layouts for Filament Admin.

Support

#tabs-widget on Discord

Views

3017

License

MIT

Documentation

Tab Layout Plugin

Latest Version on Packagist Total Downloads

This plugin creates widgets with tab layout for Filament Admin.

filament-tab-1

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),
]),
];
}

tab-example-1 tab-example-2

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.