README

此包可以帮助您在视图的各种部分添加一些自定义占位符组件，如 custom-index-header、custom-index-toolbar、custom-detail-header、custom-detail-toolbar 等。它为此提供了更简单的API，并允许您多次使用这些 "占位符" 组件而不会相互覆盖。

支持此项目

要求

PHP (^8.1 或更高版本)
Laravel Nova (^4.0 或更高版本)

安装

使用composer安装此包

composer require shuvroroy/nova-dynamic-views

在 \App\Providers\NovaServiceProvider 的 tools 方法中注册工具

use ShuvroRoy\NovaDynamicViews\NovaDynamicViews;

...

public function tools()
{
    return [
        new NovaDynamicViews()
    ];
}

使用方法

假设您想向所有 index 视图的 toolbar 中添加一个自定义按钮。只需创建一个vue组件，就像您使用 custom-index-header 一样（如果您不知道如何创建自定义组件，请参阅 "创建自定义组件" 部分）。让我们称它为 my-index-toolbar-btn。现在您需要做的唯一事情是将它注册到您的 \App\Ņova\Resource 类中，在名为 customIndexToolbarComponents 的新方法中，该方法返回一个 \ShuvroRoy\NovaDynamicViews\CustomComponents 对象

public function customIndexToolbarComponents(): CustomComponents
{
    return CustomComponents::make()
       ->addItem('my-index-toolbar-btn');
}

就是这样。现在您应该在工具栏中看到您组件的内容。

提供额外数据

如果您想向组件添加额外数据（例如标签），例如不进行额外请求，只需将其添加到 addItem 方法的第二个参数（作为数组）中。

public function customIndexToolbarComponents(): CustomComponents
{
    return CustomComponents::make()
       ->addItem('my-index-toolbar-btn', [
           'label' => 'My label'
       ]); 
}

访问资源数据

您可以通过使用 $this 在所有方法中访问资源类。在 detail 和 edit 组件中，您可以通过 request('id') 访问当前模型的ID。因此，如果您需要在您的 customDetailHeaderComponents、customDetailToolbarComponents 或您的 customUpdateHeaderComponents 中使用模型本身，您可以像这样查询它

public function customDetailToolbarComponents(): CustomComponents
{
    $model = $this->model()->query()->where('id', request('id'))->first();

    //...
}

向容器添加 (tailwind) 类

如果您想向某个部分的容器 div 添加额外的 CSS 类（例如向 customIndexToolbarComponents 部分添加 flex w-full justify-end items-center mx-3），在 make 函数中添加 class（或使用 setClass 方法）

public function customIndexToolbarComponents(): CustomComponents
{
    return CustomComponents::make('flex w-full justify-end items-center mx-3')
       ->addItem('my-index-toolbar-btn'); 
}

完整使用示例

use ShuvroRoy\NovaDynamicViews\CustomComponents;

class Resource extends \Laravel\Nova\Resource 
{
    ...

    /**
     * Using the `custom-index-toolbar` placeholder component
     * 
     * @return CustomComponents
     */
    public function customIndexToolbarComponents(): CustomComponents
    {
        return CustomComponents::make('flex w-full justify-end items-center mx-3')
            ->addItem('my-index-toolbar-btn', [
                'title' => 'My first btn'
            ])
            ->addItem('my-index-toolbar-btn', [
                'title' => 'My second btn'
            ]);
    }

    /**
     * Using the `custom-detail-header` placeholder component
     * 
     * @return CustomComponents
     */
    public function customDetailHeaderComponents(): CustomComponents
    {
        $model = $this->model()->query()->where('id', request('id'))->first();
        
        return CustomComponents::make()
           ->addItem('my-other-component', [
                'id' => $model->id,
                'name' => $model->name    
           ]);
    }
}

仅在特定资源上使用

如果您只想在特定资源上显示此按钮，例如仅对用户显示，请将此方法添加到 \App\Nova\User 类中。

可用方法和区域

所有 custom-*-* nova 占位符都可作为驼峰命名法方法使用，后缀为 Components

✅ customIndexHeaderComponents
✅ customIndexToolbarComponents
✅ customDetailHeaderComponents
✅ customDetailToolbarComponents
✅ customCreateHeaderComponents
✅ customAttachHeaderComponents
✅ customUpdateAttachHeaderComponents
✅ customUpdateHeaderComponents
✅ customLensHeaderComponents

创建自定义组件

这只是对此的入门级文档。有关更多信息，请参阅 https://nova.laravel.net.cn/docs/4.0/customization/resource-tools.html

使用 artisan 创建新的资源工具

php artisan nova:resource-tool acme/my-index-toolbar-btn

并回答所有提示的问题。现在您可以在 customXXXComponents（例如 customIndexToolbarComponents）中使用此组件（位于 nova-components/my-index-toolbar-btn）

致谢

许可证

MIT许可证（MIT）。请参阅许可证文件获取更多信息。

shuvroroy / nova-dynamic-views

维护者

详情