dillingham / nova-button
Nova按钮包
- dev-master
- 1.0.11
- 1.0.10
- 1.0.9
- 1.0.8
- 1.0.7
- 1.0.6
- 1.0.5
- 1.0.4
- 1.0.3
- 1.0.2
- 1.0.1
- 1.0
- 0.0.4
- 0.0.3
- v0.0.2
- v0.0.1
- dev-dependabot/npm_and_yarn/json5-1.0.2
- dev-dependabot/npm_and_yarn/express-4.18.2
- dev-dependabot/npm_and_yarn/qs-and-express-6.11.0
- dev-dependabot/npm_and_yarn/decode-uri-component-0.2.2
- dev-dependabot/npm_and_yarn/loader-utils-1.4.2
- dev-dependabot/npm_and_yarn/eventsource-1.1.1
- dev-dependabot/npm_and_yarn/async-2.6.4
- dev-dependabot/npm_and_yarn/minimist-1.2.6
- dev-dependabot/npm_and_yarn/url-parse-1.5.10
- dev-dependabot/npm_and_yarn/follow-redirects-1.14.8
- dev-dependabot/npm_and_yarn/path-parse-1.0.7
- dev-dependabot/npm_and_yarn/ws-6.2.2
- dev-dependabot/npm_and_yarn/dns-packet-1.3.4
- dev-dependabot/npm_and_yarn/browserslist-4.16.6
This package is auto-updated.
Last update: 2024-09-20 06:49:52 UTC
README
感谢使用此包并做出贡献的每个人。
我已经很多年没有使用Nova了,所以我无法维护它。
不过我很高兴看到活跃的分支!
Nova包,用于在索引、详情和透镜视图中渲染按钮。
使用按钮来触发后端事件、导航Nova路由或访问链接。
安装
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
示例
使用按钮与透镜一起使用以获得非常专注的用户体验
<?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')
望远镜检查
作者
你好 👋,我是 Brian Dillingham,Nova 包及其它包的创建者 等等
希望你觉得它很有用。随时欢迎提出反馈。
在推特上关注我: @sir_brian_d