eminiarts / nova-tabs
Laravel Nova - Tabs.
Installs: 3 140 828
Dependents: 21
Suggesters: 0
Security: 0
Stars: 469
Watchers: 15
Forks: 140
Open Issues: 34
Requires
- php: ^7.4|^8
- ext-json: *
- laravel/nova: ^4.12
- nova-kit/nova-packages-tool: ^1.3
Requires (Dev)
- friendsofphp/php-cs-fixer: ^2
- orchestra/testbench: ^6
- roave/security-advisories: dev-latest
- dev-master
- 2.2.3
- 2.2.2
- 2.2.1
- 2.2.0
- 2.1.0
- 2.0.9
- 2.0.8
- 2.0.7
- 2.0.6
- 2.0.5
- 2.0.4
- 2.0.3
- 2.0.2
- 2.0.1
- 2.0.0
- v1.x-dev
- 1.5.1
- 1.5.0
- 1.4.6
- 1.4.5
- 1.4.4
- 1.4.3
- 1.4.2
- 1.4.1
- 1.4.0
- 1.3.1
- 1.3.0
- 1.2.3
- 1.2.2
- 1.2.1
- 1.2.0
- 1.1.1
- 1.1.0
- 1.0.6
- 1.0.5
- 1.0.4
- 1.0.3
- 1.0.2
- 1.0.1
- 1.0.0
- 0.3.2
- 0.3.1
- 0.3.0
- 0.2.0
- 0.1.1
- 0.1.0
- 0.0.3
- 0.0.2
- 0.0.1
- dev-improved-frontend-building
- dev-feature/tabs-object
- dev-bugfix/multiple-tabs
- dev-feature/improved-tabs
- dev-bugfix/issue-23
- dev-nova-3.12-fix
- dev-feature-custom-scrollbar
This package is auto-updated.
Last update: 2024-12-09 15:40:57 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.
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
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/