README

重要

我们将存档此项目，因为 filament3 现在支持标签了。 https://beta.filamentphp.com/docs/3.x/infolists/layout/tabs

标签布局插件

此插件为 Filament Admin 创建具有标签布局的部件。

演示网站： https://filament-cms-website-demo.solutionforest.net/admin

演示用户名： demo@solutionforest.net

演示密码： 12345678 每小时自动重置。

安装

您可以通过 composer 安装此包

composer require solution-forest/tab-layout-plugin

可选地，您可以使用以下命令发布视图：

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

使用方法

要构建 Tab 小部件

php artisan make:filament-tab-widget DummyTabs

然后您将定义内部的子组件 'schema()'

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

标签可以有图标和徽章，您可以使用 icon() 和 badge() 方法来设置

Tab::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([
                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),
            ]),
    ];
}

除了使用 TabContainer 组件外，您还可以通过扩展 TabLayoutComponent 类或使用命令 php artisan tab-layout:component 来创建自己的自定义标签布局组件。

例如，以下 PHP 代码定义了一个扩展 TabLayoutComponent 的 FilamentInfoWidget 类，并指定了 ComponentTabComponent 作为要使用的标签组件。可以使用 getData 方法用数据填充组件。

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

您还可以使用 php artisan tab-layout:component 命令生成新标签布局组件的代码。例如，要生成 FilamentInfoWidget 组件，您可以运行以下命令

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

通过扩展 TabLayoutComponent 类创建自定义标签布局组件后，您可以在 TabLayoutTab 实例的架构上注册它。

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

变更日志

有关最近更改的更多信息，请参阅 CHANGELOG

安全漏洞

如果您发现任何与安全相关的问题，请通过电子邮件 info+package@solutionforest.net 而不是使用问题跟踪器。

许可

MIT 许可证 (MIT)。有关更多信息，请参阅许可文件

解决方案森林 / 标签布局插件

维护者

详情