定制 kraenkvisuell/nova-tabs 二次开发

按需修改功能、优化性能、对接业务系统,提供一站式技术支持

邮箱:yvsm@zunyunkeji.com | QQ:316430983 | 微信:yvsm316

kraenkvisuell/nova-tabs

Composer 安装命令:

composer require kraenkvisuell/nova-tabs

包简介

Laravel Nova - Tabs

关键字:

README 文档

README

Latest Version on Github

This is a fork from https://github.com/eminiarts/nova-tabs. All the credit for this package goes to them.

We just forked it because development seems to have halted on the repo, and we needed to make some urgent changes. We intend to maintain this package, though, and when we are satisfied with its status, we might throw it up on novapackages (as yet another Laravel Nova Tabs Package).

  1. Installation
  2. Usage
    1. Tabs Panel
    2. Tabs Panel with Toolbar
    3. Relationship Tabs
    4. Combine Fields and Relations in Tabs
    5. Actions in Tabs
    6. Tabs on Edit View
  3. Customization
  4. Upgrade to 1.0.0

Installation

You can install the package in to a Laravel app that uses Nova via composer:

composer require kraenkvisuell/nova-tabs

Usage

Tabs Panel

image

You can group Fields of a Resource into Tabs.

// in app/Nova/Resource.php

use Kraenkvisuell\Tabs\Tabs;

public function fields()
{
    return [

        new Tabs('Tabs', [
            'Balance'    => [
                Number::make('Balance', 'balance'),
                Number::make('Total', 'total'),
            ],
            'Other Info' => [
                Number::make('Paid To Date', 'paid_to_date'),
            ],
        ]),

    ];
}

Tabs with Toolbar

If you are only using Tabs without another default Panel, you can set withToolbar to true.

image

// in app/Nova/Resource.php

use Kraenkvisuell\Tabs\Tabs;

public function fields(Request $request)
    {
        return [

            (new Tabs('Contact Details', [
                'Address' => [
                    ID::make('Id', 'id')->rules('required'),
                    Text::make('Email', 'email')->sortable(),
                    Text::make('Phone', 'phone')->sortable(),
                ],

                'Relations' => [
                    BelongsTo::make('User'),
                    MorphTo::make('Contactable')->types([
                        Client::class,
                        Invoice::class,
                    ]),
                ]
            ]))->withToolbar(),

        ];
    }

Relationship Tabs

image

You can also group Relations into Tabs. Make sure to use the AvailableTabFields Trait in your Nova Resource.

// in app/Nova/Resource.php

use Kraenkvisuell\Tabs\Tabs;

class User extends Resource
{
    public function fields(Request $request)
    {
        return [

           new Tabs('Relations', [
                HasMany::make('Invoices'),
                HasMany::make('Notes'),
                HasMany::make('Contacts')
            ]),

        ];
    }

}

Combine Fields and Relations in Tabs

image

image

use Kraenkvisuell\Tabs\Tabs;

public function fields(Request $request)
{
    return [

        (new Tabs(__('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 Kraenkvisuell\Tabs\Tabs;
use Kraenkvisuell\Tabs\ActionsInTabs; // Add this Trait
use Laravel\Nova\Actions\ActionResource; // Import the Resource

class Client extends Resource
{
    use ActionsInTabs; // Use this Trait

    public function fields(Request $request)
    {
        return [

            (new Tabs('Client Custom Details', [
                'Address'  => [
                    ID::make('Id', 'id'),
                    Text::make('Name', 'name')->hideFromDetail(),
                ],
                'Invoices' => [
                    HasMany::make('Invoices'),
                ],
                'Actions'  => [
                    MorphMany::make(__('Actions'), 'actions', ActionResource::class), // Acc Actions whererver you like.
                ],
            ]))->withToolbar(),

        ];
    }
}

Tabs on Edit View

image

If you want to show Tabs on the Edit View, use the TabsOnEdit Trait in your Resource.

// in app/Nova/Resource.php

use Kraenkvisuell\Tabs\Tabs;
use Kraenkvisuell\Tabs\TabsOnEdit; // Add this Trait

class Client extends Resource
{
    use TabsOnEdit; // Use this Trait
    //...
}

Customization

By default, the Tabs component moves the search input and the create button to the tabs. If you have a lot of tabs, you can move them back down to its own line:

// in app/Nova/Resource.php

use Kraenkvisuell\Tabs\Tabs;

class User extends Resource
{

    public function fields(Request $request)
    {
        return [

            (new Tabs('Relations', [
                HasMany::make('Invoices')
            ]))->defaultSearch(true),

        ];
    }
}

Set ->defaultSearch(true) to revert it to its default.

image

Upgrade to 1.0.0

Thanks to dkulyk/nova-tabs the Package got a lot simpler.

  • No need to use a Trait anymore. Remove all AvailableTabFields Traits in your Resources.
  • Everything is in Tabs now. There is no TabsPanel anymore. Remove all TabsPanels and adjust your Fields according to this Readme.

kraenkvisuell/nova-tabs 适用场景与选型建议

kraenkvisuell/nova-tabs 是一款 基于 Vue 开发的 Composer 扩展包,目前已累计 6 次下载、GitHub Stars 达 0, 最近一次更新时间为 2024 年 01 月 26 日, 在 PHP 生态内属于活跃度较高的组件。

它主要适用于以下技术方向: 「nova」 「laravel」 等业务场景。在实际项目中,围绕这些方向常见需要落地的问题包括:接口对接、性能调优、并发安全、与既有框架(Laravel / ThinkPHP / Yii / Webman 等)的兼容适配,以及生产环境的日志埋点与稳定性保障。

我们在过去多个企业项目中使用过 kraenkvisuell/nova-tabs 或与其功能相近的方案,如果你在选型或落地过程中遇到问题,例如 版本兼容、二次改造、私有化封装、与内部系统对接、生产 BUG 排查,欢迎联系我们协助评估。

围绕 kraenkvisuell/nova-tabs 我们能提供哪些服务?
定制开发 / 二次开发

基于 kraenkvisuell/nova-tabs 在你已有业务上做功能扩展、字段裁剪、UI 适配、与内部账号 / 权限 / 日志系统的深度对接。

BUG 修复 & 性能优化

线上偶发问题、内存泄漏、慢查询、并发异常等排查修复;针对高流量场景做缓存、队列、索引层面的调优。

项目外包 & 长期维护

承接完整的项目从需求 → 设计 → 开发 → 上线 → 长期运维;也可按月提供技术保姆服务。

yvsm@zunyunkeji.com QQ:316430983 微信:yvsm316 西安尊云信息科技 · 专注 PHP / Go / 分布式系统研发

统计信息

  • 总下载量: 6
  • 月度下载量: 0
  • 日度下载量: 0
  • 收藏数: 0
  • 点击次数: 17
  • 依赖项目数: 1
  • 推荐数: 0

GitHub 信息

  • Stars: 0
  • Watchers: 0
  • Forks: 143
  • 开发语言: Vue

其他信息

  • 授权协议: MIT
  • 更新时间: 2024-01-26