imnpc / nova-tabs
Laravel Nova - 选项卡
2.2.4
2023-09-28 07:11 UTC
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
This package is auto-updated.
Last update: 2024-09-28 09:20:09 UTC
README
要求
php: ^7.4 | ^8
laravel/nova: ^4
对于Laravel Nova版本3,请使用nova-tabs v1。
安装
您可以通过composer将包安装到使用Nova的Laravel应用程序中
composer require eminiarts/nova-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') ]), ]), ]; } }
每个
关系选项卡
这些有点过时,因为搜索和创建按钮现在显示在面板下方,而不是在选项卡面板中。
// 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') ]), ]; } }
在选项卡中组合字段和关系
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') ]), ]; } }
选项卡中的操作
如果您的模型使用了 Laravel\Nova\Actions\Actionable
特性,您可以将操作放入选项卡中,如下所示
// 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. ]), ]), ]; } }
编辑视图上的选项卡
从Nova 4开始,选项卡总是显示在编辑视图中。
选项卡对象
从v1.4.0开始,可以使用Tab
类而不是数组来表示您的选项卡。
自定义
显示超过5个项目
默认情况下,任何HasMany
、BelongsToMany
和MorphMany
字段在索引中显示5个项目。您可以使用Nova的内置静态属性$perPageViaRelationship
在相应的资源上显示更多(或更少)。
选项卡更改全局事件
Nova Tabs在加载选项卡和用户点击选项卡时发出事件,使用Nova事件总线。开发者可以监听名为nova-tabs-changed
的事件,其中包含2个参数作为有效负载:选项卡面板名称和选项卡名称本身。
订阅此事件的组件示例
export default { mounted () { Nova.$on('nova-tabs-changed', (panel, tab) => { if (panel === 'Client Details' && tab === 'address') { this.$nextTick(() => this.map.updateSize()) } }) } }
升级到2.0.0
- 破坏性变更
- 移除了selectFirstTab,第一个选项卡总是首先显示。
- 即使您有其他面板,选项卡也会始终显示在顶部,并具有工具栏。
- tabsOnEdit已消失,非关系选项卡将始终在编辑中显示。
- 我没有使用dusk,因此也没有检查其测试,它们可能已损坏。
- 添加了Eminiarts\Tabs\Traits\HasTabs以覆盖Laravel\Nova\ResolveFields中的Nova 4默认面板方法。
- 将Eminiarts\Tabs\ActionsInTabs移动到Eminiaarts\Tabs\Traits\HasActionsInTabs。
- 为Tab添加了position方法以修复关系选项卡最后显示的问题。
鸣谢
横幅是通过https://banners.beyondco.de/创建的