Skip to content

bworksio/nova-tabs

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

11 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Another Laravel Nova Tabs Package

Latest Version on Github Total Downloads Become a Patron!

  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

image

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.

image

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

image

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

image

image

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.

image

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.

About

Another Laravel Nova Tabs Package

Resources

Stars

Watchers

Forks

Packages

No packages published

Languages

  • Vue 58.3%
  • PHP 37.8%
  • JavaScript 3.7%
  • CSS 0.2%