README

此包可以帮助你在资源详情页和表单页创建标签。

支持此项目

需求

PHP (^8.1 或更高版本)
Laravel Nova (^4.12 或更高版本)

安装

使用composer安装包

composer require shuvroroy/nova-tabs

使用方法

标签面板

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

<?php

use App\Nova\Resource;
use Laravel\Nova\Fields\Avatar;
use Laravel\Nova\Fields\HasMany;
use Laravel\Nova\Fields\ID;
use Laravel\Nova\Fields\Line;
use Laravel\Nova\Fields\Stack;
use Laravel\Nova\Fields\Text;
use Laravel\Nova\Fields\Trix;
use Laravel\Nova\Http\Requests\NovaRequest;
use ShuvroRoy\NovaTabs\Tab;
use ShuvroRoy\NovaTabs\Tabs;
use ShuvroRoy\NovaTabs\Traits\HasActionsInTabs;
use ShuvroRoy\NovaTabs\Traits\HasTabs;

class User extends Resource
{
    use HasTabs, HasActionsInTabs;

    public function fields(Request $request)
    {
        return [
            Tabs::make('Author', [
                Tab::make(__('Author Details'), [
                    ID::make()->sortable(),

                    Avatar::make(__('Photo'), 'photo')
                        ->disk('public')
                        ->indexWidth(50)
                        ->detailWidth(200)
                        ->squared()
                        ->disableDownload()
                        ->showOnPreview(),

                    Stack::make('Name', [
                        Line::make(__('Name'), 'name')
                            ->asHeading(),
                        Line::make(__('Email'), 'email')
                            ->asSmall()
                    ])->onlyOnIndex(),

                    Text::make(__('Name'), 'name')
                        ->sortable()
                        ->rules('required', 'max:255')
                        ->hideFromIndex()
                        ->showOnPreview(),

                    Text::make(__('Email'), 'email')
                        ->sortable()
                        ->rules('required', 'email', 'max:255')
                        ->creationRules('unique:authors,email')
                        ->updateRules('unique:authors,email,{{resourceId}}')
                        ->hideFromIndex()
                        ->showOnPreview(),

                    HasMany::make(__('Posts'), 'posts', Post::class),
                ])->showHeadingForRelationships(['posts']),
                
                Tab::make(__('Additional Information'), [
                    Trix::make(__('Bio'), 'bio')
                        ->alwaysShow()
                        ->showOnPreview(),

                    Text::make(__('Github Handle'), 'github_handle')
                        ->sortable()
                        ->rules('required', 'max:255')
                        ->showOnPreview(),

                    Text::make(__('Twitter Handle'), 'twitter_handle')
                        ->sortable()
                        ->rules('required', 'max:255')
                        ->showOnPreview(),
                ]),
           ]),
       ];
    }
 }

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

在标签中组合字段和关系

<?php

use ShuvroRoy\NovaTabs\Tab;
use ShuvroRoy\NovaTabs\Tabs;
use ShuvroRoy\NovaTabs\Traits\HasActionsInTabs;
use ShuvroRoy\NovaTabs\Traits\HasTabs;
use Laravel\Nova\Fields\HasMany;
use Laravel\Nova\Fields\ID;
use Laravel\Nova\Fields\Text;

class User extends Resource
{
    use HasTabs, HasActionsInTabs;

    public function fields(Request $request)
    {
          return [
              Tabs::make(__('Client Custom Details'), [
                  Tab::make(__('Details'), [
                      ID::make('Id', 'id')->rules('required')->hideFromIndex(),
                      Text::make('Name', 'name'),

                      HasMany::make('Invoices', 'invoices'),
                  ])->showHeadingForRelationships(['invoices']),
              ]),
         ];
    }
}

编辑视图中的标签

目前，由于Nova 4的原因，标签总是显示在编辑视图中。

标签对象

可以使用Tab类代替数组来表示你的标签。

自定义

显示超过5个项目

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

标签更改全局事件

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

鸣谢

许可证

MIT许可证（MIT）。请参阅许可证文件以获取更多信息。

shuvroroy / nova-tabs

维护者

详细信息