unox/nova-tabs

Laravel Nova - 选项卡

安装: 102

依赖: 0

建议: 0

安全: 0

星标: 0

关注者: 0

分支: 139

dev-master 2023-05-30 12:03 UTC

This package is auto-updated.

Last update: 2024-09-09 15:24:27 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的事件,事件负载有两个参数:选项卡面板名称和选项卡名称本身。

订阅此事件的组件示例

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移动到Eminiarts\Tabs\Traits\HasActionsInTabs。
    • 为Tab添加了position方法,以修复关系选项卡最后显示的问题。

致谢

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