hipszkij/nova-tabs

Laravel Nova - 标签页.

v2.2.6 2023-11-30 16:01 UTC

This package is auto-updated.

Last update: 2024-09-30 01:47:24 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 Event Bus。开发人员可以监听名为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。
    • 添加了position方法到Tab以修复关系标签显示在最后的问题。

致谢

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