Laravel Nova icon Nova Packages

Readme

Nova Tabs, awesome resource tabs for Nova


Latest Version on Github

  1. Requirements
  2. Installation
  3. Usage
    1. Tabs Panel
    2. Relationship Tabs
    3. Combine Fields and Relations in Tabs
    4. Actions in Tabs
    5. Tabs on Edit View
  4. Tab object
  5. Customization
    1. Tab
    2. Default search
    3. Display more than 5 items
    4. Tab change Global Event
  6. Upgrade to V2

Requirements

  • php: ^7.4 | ^8
  • laravel/nova: ^4

For Laravel Nova Version 3, please use nova-tabs v1 instead.

Installation

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

composer require eminiarts/nova-tabs

Usage

Tabs Panel

image

You can group fields of a resource into tabs.

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

Note: If use non-ascii char as title(ex: chinese), you should define the tab name with ascii char to avoid get empty slug string.

public function fields(Request $request)
{
    return [
      Tabs::make('Some Title', [
        Tab::make('頁籤一', [
            Number::make('Balance', 'balance'),
            Number::make('Total', 'total'),
        ])->name('tab-1'),
        
        Tab::make('頁籤二', [
            Number::make('Paid To Date', 'paid_to_date')
        ])->name('tab-2'),
      ]),
    ];
}

Relationship Tabs

image 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

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

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

Tabs on Edit View

image

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

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.
preload bool or Closure null If the result is truthy the tab will be rendered on the initial page load. This may affect initial page load performance, as any requests required by the tab's fields will also be executed.
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).

Tab change Global Event

Nova Tabs emits an event upon tabs loading and the user clicking on a tab, using Nova Event Bus. Developers can listen to the event called nova-tabs-changed, with 2 parameters as payload: The tab panel name and the tab name itself.

Example of a component that subscribes to this event:

export default {
    mounted () {
        Nova.$on('nova-tabs-changed', (panel, tab) => {
            if (panel === 'Client Details' && tab === 'address') {
                this.$nextTick(() => this.map.updateSize())
            }
        })
    }
}

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 default panel methods in Laravel\Nova\ResolveFields.
    • Moved Eminiarts\Tabs\ActionsInTabs to Eminiaarts\Tabs\Traits\HasActionsInTabs.
    • Added position method to Tab to fix relational tabs showing up last.

Credits

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

Reviews

Rated 5 stars out of 5

By Marco Bax on July 19, 2023

Superb package, features like these should be part of Nova itself!

Rated 3 stars out of 5

By Reza AB on August 31, 2022

It hides the edit button and action button on resource details and errors on showing "new Panel".

Rated 2 stars out of 5

By Tonny Siles on April 20, 2022

is this package compatible with nova 4.x ?

Rated 5 stars out of 5

By Mateus Galasso on May 20, 2021

Awesome package helped a lot

Rated 5 stars out of 5

By Armando on May 11, 2021

awesome!!

Rated 5 stars out of 5

By Mike on September 24, 2020

This package is great! However, it has a ton of open issues and many open PR requests with no major updates in almost a year. My fear is it's abandoned.

Back to Top
Added 6 years ago
Last updated 3 Years Ago
Version 2.2.3
Nova Version ^4.12
Composer
eminiarts/nova-tabs
GitHub stars 468
Packagist downloads 3,448,352

Favorites

114 users favorited

Rating

4.80
(out of 5)
★★★★★
★★★★
★★★
★★
39 ratings

Tags

Brought to you by Tighten

Issues/Feature Requests Stats Package Ideas