bbs-lab/nova-tabs

Laravel Nova - 标签

v2.2.5 2024-07-01 13:57 UTC

This package is auto-updated.

Last update: 2024-08-31 14:20: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')
            ]),
         ]),
      ];
    }
 }

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

关系标签

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 移动到 Eminiaarts\Tabs\Traits\HasActionsInTabs。
    • 为标签添加了位置方法,以修复关系标签最后显示的问题。

致谢

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