voidfire/nova-tabs

Another Laravel Nova Tabs Package

Another Laravel Nova Tabs Package

1. Installation
2. Usage
   1. Tabs Panel
   2. Tabs Panel with Toolbar
   3. Relationship Tabs
   4. Combine Fields and Relations in Tabs
3. Customization
4. Difference with eminiarts/nova-tabs

Installation

You can install the package in to a Laravel app that uses Nova via composer:

composer require dkulyk/nova-tabs

Usage

Tabs Panel

You can group Fields of a Resource into Tabs.

// in app/Nova/Resource.php

use DKulyk\Nova\Tabs;

public function fields()
{
    return [
        
        // ...
        
        new Tabs('Tabs', [
            new Panel('Balance', [
                Number::make('Balance', 'balance')->onlyOnDetail(),
                Number::make('Total', 'total')->onlyOnDetail(),
            ]),
            'Other Info' => [
                Number::make('Paid To Date', 'paid_to_date')->onlyOnDetail(),
            ],
        ]),
        
        // ...
        
    ];
}

Tabs Panel with Toolbar

If you are only using a Tabs without another default Panel, you can set the third argument showToolbar to true like in Panel.

// in app/Nova/Resource.php

use DKulyk\Nova\Tabs;

public function fields(Request $request)
{
    return [
        (new Tabs('Contact Details', [
            'Address' => [
                ID::make('Id', 'id')->rules('required'),
                Text::make('Email', 'email')->sortable(),
                Text::make('Phone', 'phone')->sortable(),
            ],

            'Relations' => [
                BelongsTo::make('User'),
                MorphTo::make('Contactable')->types([
                    Client::class,
                    Invoice::class,
                ]),
            ]
        ]))->showToolbar(),
    ];
}

Relationship Tabs

You can also group Relations into Tabs.

// in app/Nova/Resource.php

use DKulyk\Nova\Tabs;

public function fields(Request $request)
{
    return [

        // ...

        new Tabs('Relations', [
            HasMany::make('Invoices'),
            HasMany::make('Notes'),
            HasMany::make('Contacts')
        ]),

        // ...

    ];
}

Combine Fields and Relations in Tabs

use DKulyk\Nova\Tabs;

public function fields(Request $request)
{
    return [
        (new Tabs(__('Client Custom Details'), [
            new Panel(__('Details'), [
                    ID::make('Id', 'id')->rules('required')->hideFromIndex(),
                    Text::make('Name', 'name'),
            ]),
            HasMany::make('Invoices')
        ])
    ];
}

Customization

By default, the Tabs component moves the search input and the create button to the tabs. If you have a lot of tabs, you can move them back down to its own line:

// in app/Nova/Resource.php

use DKulyk\Nova\Tabs;

public function fields(Request $request)
{
    return [

        // ...

        (new Tabs('Relations', [
            HasMany::make('Invoices')
        ]))->defaultSearch(true),

        // ...

    ];
}

Set ->defaultSearch(true) to revert it to its default.

Differenece with eminiarts/nova-tabs

1. No need to use trait.
2. Fields passed through a standard panel(standard authorization and visibility behavior).
3. Nested Panels and Listable fields become a new tabs.
4. Relations will loaded only when Tab will be open.