imnpc/nova-tabs

Laravel Nova - 选项卡

2.2.4 2023-09-28 07:11 UTC

This package is auto-updated.

Last update: 2024-09-28 09:20:09 UTC


README

Nova Tabs, awesome resource tabs for Nova

Latest Version on Github

  1. 要求
  2. 安装
  3. 使用
    1. 选项卡面板
    2. 关系选项卡
    3. 在选项卡中组合字段和关系
    4. 选项卡中的操作
    5. 编辑视图上的选项卡
  4. 选项卡对象
  5. 自定义
    1. 选项卡
    2. 默认搜索
    3. 显示超过5个项目
    4. 选项卡更改全局事件
  6. 升级到V2

要求

  • php: ^7.4 | ^8
  • laravel/nova: ^4

对于Laravel Nova版本3,请使用nova-tabs v1。

安装

您可以通过composer将包安装到使用Nova的Laravel应用程序中

composer require eminiarts/nova-tabs

使用

选项卡面板

image

您可以将资源字段分组到选项卡中。

// in app/Nova/Resource.php

use Eminiarts\Tabs\Traits\HasTabs;
use Eminiarts\Tabs\Tabs;
use Eminiarts\Tabs\Tab;

class User extends Resource
{
    use HasTabs;
    
    public function fields(Request $request)
    {
       return [
         Tabs::make('Some Title', [
            Tab::make('Balance', [
                Number::make('Balance', 'balance'),
                Number::make('Total', 'total'),
            ]),
            Tab::make('Other Info', [
                Number::make('Paid To Date', 'paid_to_date')
            ]),
         ]),
      ];
    }
 }

每个实例的第一个选项卡将被自动选择。

关系选项卡

image 这些有点过时,因为搜索和创建按钮现在显示在面板下方,而不是在选项卡面板中。

// in app/Nova/Resource.php

use Eminiarts\Tabs\Tabs;
use Laravel\Nova\Fields\HasMany;
use Eminiarts\Tabs\Traits\HasTabs;

class User extends Resource
{
    use HasTabs;
    
    public function fields(Request $request)
    {
        return [
           Tabs::make('Relations', [
                HasMany::make('Invoices'),
                HasMany::make('Notes'),
                HasMany::make('Contacts')
            ]),

        ];
    }
}

在选项卡中组合字段和关系

image

image

use Eminiarts\Tabs\Tabs;
use Laravel\Nova\Fields\HasMany;
use Eminiarts\Tabs\Traits\HasTabs;

use Laravel\Nova\Fields\ID;
use Laravel\Nova\Fields\Text;

class User extends Resource
{
    use HasTabs;
    
    public function fields(Request $request)
    {
          return [
              Tabs::make(__('Client Custom Details'), [
                  new Panel(__('Details'), [
                          ID::make('Id', 'id')->rules('required')->hideFromIndex(),
                          Text::make('Name', 'name'),
                  ]),
                  HasMany::make('Invoices')
              ]),
         ];
    }
}

选项卡中的操作

如果您的模型使用了 Laravel\Nova\Actions\Actionable 特性,您可以将操作放入选项卡中,如下所示

// in app/Nova/Resource.php

use Eminiarts\Tabs\Tabs;
use Eminiarts\Tabs\Tab;
use Eminiarts\Tabs\Traits\HasTabs;
use Eminiarts\Tabs\Traits\HasActionsInTabs; // Add this Trait
use Laravel\Nova\Actions\ActionResource; // Import the Resource

class Client extends Resource
{
    use HasTabs;
    use HasActionsInTabs; // Use this Trait

    public function fields(Request $request)
    {
        return [
            Tabs::make('Client Custom Details', [
                Tab::make('Address', [
                    ID::make('Id', 'id'),
                    Text::make('Name', 'name')->hideFromDetail(),
                ]),
                Tab::make('Invoices', [
                    HasMany::make('Invoices'),
                ]),
                Tab::make('Actions', [
                    $this->actionfield(), // Add Actions whererver you like.
                ]),
            ]),
        ];
    }
}

编辑视图上的选项卡

image

从Nova 4开始,选项卡总是显示在编辑视图中。

选项卡对象

从v1.4.0开始,可以使用Tab类而不是数组来表示您的选项卡。

自定义

显示超过5个项目

默认情况下,任何HasManyBelongsToManyMorphMany字段在索引中显示5个项目。您可以使用Nova的内置静态属性$perPageViaRelationship在相应的资源上显示更多(或更少)。

选项卡更改全局事件

Nova Tabs在加载选项卡和用户点击选项卡时发出事件,使用Nova事件总线。开发者可以监听名为nova-tabs-changed的事件,其中包含2个参数作为有效负载:选项卡面板名称和选项卡名称本身。

订阅此事件的组件示例

export default {
    mounted () {
        Nova.$on('nova-tabs-changed', (panel, tab) => {
            if (panel === 'Client Details' && tab === 'address') {
                this.$nextTick(() => this.map.updateSize())
            }
        })
    }
}

升级到2.0.0

  • 破坏性变更
    • 移除了selectFirstTab,第一个选项卡总是首先显示。
    • 即使您有其他面板,选项卡也会始终显示在顶部,并具有工具栏。
    • tabsOnEdit已消失,非关系选项卡将始终在编辑中显示。
    • 我没有使用dusk,因此也没有检查其测试,它们可能已损坏。
    • 添加了Eminiarts\Tabs\Traits\HasTabs以覆盖Laravel\Nova\ResolveFields中的Nova 4默认面板方法。
    • 将Eminiarts\Tabs\ActionsInTabs移动到Eminiaarts\Tabs\Traits\HasActionsInTabs。
    • 为Tab添加了position方法以修复关系选项卡最后显示的问题。

鸣谢

横幅是通过https://banners.beyondco.de/创建的