README

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

安装

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

composer require zndron/nova-tabs

用法

标签面板

您可以将资源的字段分组到标签页中。

// in app/Nova/Resource.php

use Zndron\Tabs\Traits\HasTabs;
use Zndron\Tabs\Tabs;
use Zndron\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')
            ]),
         ]),
      ];
    }
 }

每个 Tabs 实例的第一个标签将自动选中。

关系标签页

这些有些过时，因为搜索和创建按钮现在显示在实际内容显示的下方面板中，而不是在标签面板中。

// in app/Nova/Resource.php

use Zndron\Tabs\Tabs;
use Laravel\Nova\Fields\HasMany;
use Zndron\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')
            ]),

        ];
    }
}

在标签页中组合字段和关系

use Zndron\Tabs\Tabs;
use Laravel\Nova\Fields\HasMany;
use Zndron\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 Zndron\Tabs\Tabs;
use Zndron\Tabs\Tab;
use Zndron\Tabs\Traits\HasTabs;
use Zndron\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.
                ]),
            ]),
        ];
    }
}

编辑视图中的标签页

从 Nova 4 开始，标签页始终在编辑视图中显示。

标签对象

从 v1.4.0 版本开始，您可以使用 Tab 类而不是数组来表示您的标签。

自定义

显示超过 5 项

默认情况下，任何 HasMany、BelongsToMany 和 MorphMany 字段在其索引中显示 5 项。您可以使用 Nova 内置的静态属性 $perPageViaRelationship 在相应的资源上显示更多（或更少）。

标签更改全局事件

Nova Tabs 在标签加载和用户点击标签时发出事件，使用 Nova Event Bus。开发者可以监听名为 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())
            }
        })
    }
}

zndron / nova-tabs

维护者

详细信息