shuvroroy / nova-tabs
A tool for Laravel Nova which allows you to create tabs in your resource detail & form page.
Installs: 29 118
Dependents: 0
Suggesters: 0
Security: 0
Stars: 8
Watchers: 1
Forks: 2
Open Issues: 8
Requires
- php: ^8.1
- laravel/nova: ^4.12
README
This package will help you to create tabs in your resource detail & form page.
Support For This Project
Requirements
- PHP (^8.1 or higher)
- Laravel Nova (^4.12 or higher)
Installation
Require the package with composer
composer require shuvroroy/nova-tabs
Usage
Tabs Panel
You can group fields of a resource into tabs.
<?php use App\Nova\Resource; use Laravel\Nova\Fields\Avatar; use Laravel\Nova\Fields\HasMany; use Laravel\Nova\Fields\ID; use Laravel\Nova\Fields\Line; use Laravel\Nova\Fields\Stack; use Laravel\Nova\Fields\Text; use Laravel\Nova\Fields\Trix; use Laravel\Nova\Http\Requests\NovaRequest; use ShuvroRoy\NovaTabs\Tab; use ShuvroRoy\NovaTabs\Tabs; use ShuvroRoy\NovaTabs\Traits\HasActionsInTabs; use ShuvroRoy\NovaTabs\Traits\HasTabs; class User extends Resource { use HasTabs, HasActionsInTabs; public function fields(Request $request) { return [ Tabs::make('Author', [ Tab::make(__('Author Details'), [ ID::make()->sortable(), Avatar::make(__('Photo'), 'photo') ->disk('public') ->indexWidth(50) ->detailWidth(200) ->squared() ->disableDownload() ->showOnPreview(), Stack::make('Name', [ Line::make(__('Name'), 'name') ->asHeading(), Line::make(__('Email'), 'email') ->asSmall() ])->onlyOnIndex(), Text::make(__('Name'), 'name') ->sortable() ->rules('required', 'max:255') ->hideFromIndex() ->showOnPreview(), Text::make(__('Email'), 'email') ->sortable() ->rules('required', 'email', 'max:255') ->creationRules('unique:authors,email') ->updateRules('unique:authors,email,{{resourceId}}') ->hideFromIndex() ->showOnPreview(), HasMany::make(__('Posts'), 'posts', Post::class), ])->showHeadingForRelationships(['posts']), Tab::make(__('Additional Information'), [ Trix::make(__('Bio'), 'bio') ->alwaysShow() ->showOnPreview(), Text::make(__('Github Handle'), 'github_handle') ->sortable() ->rules('required', 'max:255') ->showOnPreview(), Text::make(__('Twitter Handle'), 'twitter_handle') ->sortable() ->rules('required', 'max:255') ->showOnPreview(), ]), ]), ]; } }
The first tab in every Tabs
instance will be auto-selected.
Combine Fields and Relations in Tabs
<?php use ShuvroRoy\NovaTabs\Tab; use ShuvroRoy\NovaTabs\Tabs; use ShuvroRoy\NovaTabs\Traits\HasActionsInTabs; use ShuvroRoy\NovaTabs\Traits\HasTabs; use Laravel\Nova\Fields\HasMany; use Laravel\Nova\Fields\ID; use Laravel\Nova\Fields\Text; class User extends Resource { use HasTabs, HasActionsInTabs; public function fields(Request $request) { return [ Tabs::make(__('Client Custom Details'), [ Tab::make(__('Details'), [ ID::make('Id', 'id')->rules('required')->hideFromIndex(), Text::make('Name', 'name'), HasMany::make('Invoices', 'invoices'), ])->showHeadingForRelationships(['invoices']), ]), ]; } }
Tabs on Edit View
Tabs are always shown on edit view as of Nova 4 for now.
Tab object
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()) } }) } }
Credits
License
The MIT License (MIT). Please see License File for more information.