elsayed85/nova-tabs

Laravel Nova - 标签

dev-master 2023-01-14 10:42 UTC

This package is auto-updated.

Last update: 2024-09-14 14:21:19 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的事件,其中包含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/创建的