bbs-lab / nova-tabs
Laravel Nova - Tabs.
Requires
- php: ^8.1
- ext-json: *
- laravel/nova: ^4.12
- nova-kit/nova-packages-tool: ^1.3.1
- spatie/laravel-package-tools: ^1.16
Requires (Dev)
- guzzlehttp/guzzle: ^7.0.1
- larastan/larastan: ^2.9
- laravel/pint: ^1.4.0
- mockery/mockery: ^1.5
- nova-kit/nova-devtool: ^1.0
- nunomaduro/collision: ^8.1.1||^7.10.0
- orchestra/testbench: ^6.0 || ^7.6 || ^8.0 || ^9.0
- orchestra/testbench-dusk: ^6.0 || ^7.6 || ^8.0 || ^9.0
- pestphp/pest: ^2.34
- pestphp/pest-plugin-arch: ^2.7
- pestphp/pest-plugin-laravel: ^2.3
- phpstan/extension-installer: ^1.3
- phpstan/phpstan-deprecation-rules: ^1.1
- phpstan/phpstan-phpunit: ^1.3
- spatie/laravel-ignition: ^2.4
- spatie/laravel-ray: ^1.36
This package is auto-updated.
Last update: 2024-10-31 00:34:37 UTC
README
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
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.
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 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
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.
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/