README

一个用于在不同视图中渲染按钮的Nova扩展包。

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

此包是dillingham/nova-button的延续。

我创建了此分支，因为原始包似乎已被放弃（截至撰写时的最后发布日期为2020年9月16日），而且对我来说它非常有用，所以我不想让它无人维护。我还注意到，问题区域和拉取请求中仍有活动，我不想让它们被忽视。

此包仍为开源，所以我鼓励大家继续贡献！如果您想联系我， 请随时联系！

版本

对于Nova 4，必须做出某些更改，这使得包与Nova 3不向后兼容。因此，该包被拆分为多个版本。请参阅下表以确定您需要哪个版本。

请注意： main分支始终是最新主要版本。

要求

安装

您可以通过运行以下命令来安装此包

composer require dnwjn/nova-button:^4.0

要发布配置文件，请运行以下命令

php artisan vendor:publish --tag="nova-button-config"

用法

use Dnwjn\NovaButton\Button;

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

确认

您可以为破坏性行为要求确认

Button::make('Cancel Account')->confirm('Are you sure?'),
Button::make('Cancel Account')->confirm('Confirmation', 'Are you sure you want to cancel your account?'),
Button::make('Cancel Account')->confirm('Confirmation', 'Are you sure you want to cancel your account?', 'Cancel'),

重新加载

在所有事件完成后，您可以重新加载页面。

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

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

如果发生错误，页面将不会重新加载。

Laravel事件

默认情况下，点击按钮将通过AJAX触发事件。

默认事件：Dnwjn\NovaButton\Events\ButtonClick。

该事件将接收触发事件的键，如果有的话，还会接收资源模型

$event->key = 'notify'
$event->resource = \Illuminate\Database\Eloquent\Model|null

您可以覆盖键

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

也可以覆盖事件

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

您可以通过创建监听器并在您的EventServiceProvider中注册它来监听事件。

JavaScript事件

默认情况下，点击按钮将通过Nova.$emit触发事件。

默认事件：Dnwjn\NovaButton\Events\ButtonClick。

然后可以通过Nova.$on捕获该事件，并将接收触发键和任何可选参数。

您可以指定键和可选参数

Button::make('Notify', 'notify-some-user')
    ->emit('notification', ['article_id' => 1, 'which' => 'tags'])

您可以通过在Vue组件或JavaScript中创建监听器来监听事件

Nova.$on('notification', (e) => {
    // e.article_id = 1
    // e.which = 'tags'
})

文本

标题

您可以设置按钮的标题属性

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

索引名称

您可以设置按钮的索引名称，该名称在索引视图中作为表头显示

Button::make('Notify')->indexName('Actions')

默认设置为按钮名称。您也可以传递null以不设置索引名称。

状态

可见性

您可以根据条件显示按钮

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

或者，如果您只想让特定用户看到按钮

Button::make('Notify')->visible($request->user()->can('notifyUser', $this))

当然，您也可以使用Nova内置方法，例如用于授权或将可见性限制到特定视图。

如果您想在创建或更新视图中显示按钮，可以直接使用Nova内置的方法。

Button::make('Notify')->showOnCreating()->showOnUpdating()

禁用

您可以禁用该按钮。

Button::make('Notify')->disabled()
Button::make('Notify')->disabled($this->is_complete === false)

反馈

在使用事件时，您可能希望向最终用户提供视觉反馈。这对于长时间运行的监听器特别有用。

Button::make('Notify')
    ->loadingText('Sending...')
    ->successText('Sent!')
    ->errorText('Something went wrong...')

有3个事件，对于每个事件，您都可以提供文本和样式。

默认值定义在配置文件中。

Nova路由

您还可以选择导航到任何Nova路由。

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

您还可以设置查询参数。

Button::make('Text')
    ->route('home')
    ->withParams(['referrer' => 'nova'])

您还可以使用资源的过滤器。

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

链接

您可以配置按钮以打开外部链接。

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

类

按钮使用以下类，您可以根据喜好进行样式设置。

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

您还可以向按钮添加更多类。

// One class
Button::make('Notify')->classes('some-class')

// Or multiple classes
Button::make('Notify')->classes('some-class', 'another-class')

样式

此包使用tailwind-css类。默认使用的类是link类。

您可以定义按钮应使用的类。

Button::make('Delete')->style('danger')

默认可用的类如下。

传递的键指的是配置文件中定义的其中一个类。您可以自由更改这些类或添加自己的类。

变更日志

有关最近更改的更多信息，请参阅变更日志。

贡献

有关详细信息，请参阅贡献指南。

鸣谢

dnwjn

原始包的作者：dillingham

许可证

MIT许可证（MIT）。有关更多信息，请参阅许可证文件。

dnwjn / nova-button

维护者

详细信息