yuoppp / nova-tabs

Laravel Nova Tabs Package

---

1. Installation
2. Usage
   1. Tabs Panel
   2. Relationship Tabs
   3. Combine Fields and Relations in Tabs
   4. Actions in Tabs
   5. Tabs on Edit View
3. Tab object
4. Customization
   1. Tab
   2. Default search
   3. Display more than 5 items
5. 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'),
               ],
           ]),
       ];
   }
}

or

// 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/