nova-tabs: A PHP repository from yuoppp

Installation
Usage
Tab object
Customization
Upgrade to 1.0.0

Installation

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

composer require eminiarts/nova-tabs

Usage

Tabs Panel

You can group fields of a resource into tabs, you can use an array or a Tab object (as of 1.4.0)::

// in app/Nova/Resource.php

use Eminiarts\Tabs\Traits\HasTabs;
use Eminiarts\Tabs\Tabs;

class User extends Resource
{
    use HasTabs;
    
    public function fields(Request $request)
    {
       return [
   
           new Tabs('Some Title', [
               'Balance'    => [
                   Number::make('Balance', 'balance'),
                   Number::make('Total', 'total'),
               ],
               'Other Info' => [
                   Number::make('Paid To Date', 'paid_to_date'),
               ],
           ]),
       ];
   }
}

// 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')
            ]),
         ]),
      ];
    }
 }

The first tab in every Tabs instance will be auto-selected.

Relationship Tabs

These are a bit outdated, as the search and create buttons now show within the panel down where the actual content is displayed, not in the tab panel.

// 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')
            ]),

        ];
    }
}

Combine Fields and Relations in Tabs

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')
              ]),
         ];
    }
}

Actions in Tabs

If your Model uses the Laravel\Nova\Actions\Actionable Trait you can put the Actions into a Tab like this:

// 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 ActionsInTabs; // 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.
                ]),
            ]),
        ];
    }
}

Tabs on Edit View

Tabs are always shown on edit view as of Nova 4.

Tab object

As of v1.4.0 it's possible to use a Tab class instead of an array to represent your tabs.

Property	Type	Default	Description
name	`string`	`null`	The name of the tab, used for the slug. Defaults to the title if not set
showIf	`bool` or `Closure`	`null`	If the result is truthy the tab will be shown. `showIf` takes priority over `showUnless` and if neither are set, `true` is assumed.
showUnless	`bool` or `Closure`	`null`	If the result is falsy the tab will be shown. `showIf` takes priority over `showUnless` and if neither are set, `true` is assumed.
bodyClass	`string` or `array`	Empty array	A string or string array of classes to add to the tab's body. This sets the `bodyClass` property, if you want to append you can use `addBodyClass` instead.

Customization

Display more than 5 items

By default, any HasMany, BelongsToMany and MorphMany fields show 5 items in their index. You can use Nova's built-in static property $perPageViaRelationship on the respective resource to show more (or less).

Upgrade to 2.0.0

Breaking changes
- Removed selectFirstTab, first tab is always displayed first.
- Even if you have other panels, tabs will always show up first and has the toolbar.
- TabsOnEdit is gone and non relational tabs will simply always display on edit.
- I don't use dusk, so didn't check the tests for it either, they might be broken.
- Added Eminiarts\Tabs\Traits\HasTabs to overwrite Nova 4's panelsWithDefaultLabel method in Laravel\Nova\ResolveFields to enable tabs on edit pages.
- Moved Eminiarts\Tabs\ActionsInTabs to Eminiaarts\Tabs\Traits\HasActionsInTabs

Credits

Banner was created with https://banners.beyondco.de/

yuoppp/nova-tabs