dillingham/nova-button

Nova按钮包


README

感谢使用此包并做出贡献的每个人。

我已经很多年没有使用Nova了,所以我无法维护它。

不过我很高兴看到活跃的分支!

Latest Version on Github Total Downloads Twitter Follow

Nova包,用于在索引、详情和透镜视图中渲染按钮。

使用按钮来触发后端事件、导航Nova路由或访问链接。

nova-button

安装

composer require dillingham/nova-button

用法

use NovaButton\Button;
public function fields(Request $request)
{
    return [
        ID::make('ID', 'id')->sortable(),
        Text::make('Name', 'name'),
        Button::make('Notify'),
    ];
}

快速链接: 按钮样式 | 事件文本/样式 | 导航 | CSS类 | 透镜示例

后端事件

默认情况下,点击按钮将通过ajax触发后端事件。

默认事件:NovaButton\Events\ButtonClick

事件将接收触发它的资源模型及其键

  • $event->resource = model
  • $event->key = "notify"

添加自定义键

Button::make('Notify', 'notify-some-user')

添加自定义事件

Button::make('Notify')->event('App\Events\NotifyRequested')

您在EventServiceProvider中注册监听器

Nova路由

您也可以选择导航到Nova的任何路由

Button::make('Text')->route('vuejs-route-name', ['id' => 1])
Button::make('Text')->index('App\Nova\User')
Button::make('Text')->detail('App\Nova\User', $this->user_id)
Button::make('Text')->create('App\Nova\User')
Button::make('Text')->edit('App\Nova\User', $this->user_id)
Button::make('Text')->lens('App\Nova\User', 'users-without-confirmation')

您还可以启用资源过滤器

Button::make('Text')->index('App\Nova\Order')->withFilters([
    'App\Nova\Filters\UserOrders' => $this->user_id,
    'App\Nova\Filters\OrderStatus' => 'active',
])

链接

Button::make('Text')->link('https://nova.laravel.net.cn')
Button::make('Text')->link('https://nova.laravel.net.cn', '_self')

可见性

您可能需要根据模型值显示或隐藏按钮

Button::make('Activate')->visible($this->is_active == false),
Button::make('Deactivate')->visible($this->is_active == true),

另外,通过canSee()和hideFromIndex()等字段授权以及显示/隐藏字段等来隐藏

重新加载

事件触发后,重新加载页面。

Button::make('Notify')->reload()

如果您点击很多按钮,重新加载将等待所有按钮完成。

如果发生错误,则不会重新加载页面。

确认

对于破坏性操作,您可以要求确认

Button::make('Cancel Account')->confirm('Are you sure?'),
Button::make('Cancel Account')->confirm('title', 'content'),

按钮状态

当使用事件时,您希望为最终用户提供视觉反馈。

这对于长时间运行的监听器特别有用。

Button::make('Remind User')->loadingText('Sending..')->successText('Sent!')

默认值定义在nova-button配置中。当您想要为特定资源更改时添加方法

按钮样式

此包使用tailwind-css类/默认:link

Button::make('Confirm')->style('primary')

每个键都会添加来自nova-button配置的类

'primary' => 'btn btn-default btn-primary'

样式配置

发布nova-button配置以添加/编辑可用的样式和默认值

php artisan vendor:publish --tag=nova-button -- force

按钮类

您还可以手动添加类

Button::make('Refund')->classes('some-class')

还可以样式化以下CSS类

.nova-button
.nova-button-{resource-name}
.nova-button-success
.nova-button-error
.nova-button-loading

示例

使用按钮与透镜一起使用以获得非常专注的用户体验

lens-button

<?php

namespace App\Nova\Lenses;

class UsersWithoutConfirmation extends Lens
{
    public static function query(LensRequest $request, $query)
    {
        return $query
            ->select(['users.id', 'users.name'])
            ->whereNull('email_verified_at');
    }

    public function fields(Request $request)
    {
        return [
            ID::make('ID', 'id'),
            Text::make('Name', 'name'),
            Button::make('Mark As Confirmed'),
        ];
    }
}

在您的EventServiceProvider中注册对\NovaButton\Events\ButtonClick的监听器

<?php

namespace App\Listeners;

class ConfirmUser
{
    public function handle($event)
    {
        if ($event->key == 'mark-as-confirmed') {
            $event->resource->email_verified_at = now();
            $event->resource->save();
        }
    }
}

当您为此监听器注册事件时,不需要进行key检查

Button::make('Confirm')->event('App\Events\ConfirmClick')

望远镜检查

event-triggered

作者

你好 👋,我是 Brian Dillingham,Nova 包及其它包的创建者 等等

希望你觉得它很有用。随时欢迎提出反馈。

在推特上关注我: @sir_brian_d