This package will help you to create tabs in your resource detail & form page.
- PHP (^8.1 or higher)
- Laravel Nova (^4.12 or higher)
Require the package with composer
composer require shuvroroy/nova-tabs
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.
<?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 are always shown on edit view as of Nova 4 for now.
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. |
showHeadingForRelationships | array |
array |
This is show a headings for individual relationship field based on array attribute value |
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).
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())
}
})
}
}
The MIT License (MIT). Please see License File for more information.