公告: 旧版文档请移步 -> http://v2.laravel-filament.cn/docs

Languages

Version

Theme

Actions

触发按钮

概述

所有的 Action 都有一个触发按钮。当用户点击按钮时,动作便执行了 - 打开一个模态框、执行一个闭包函数或者重定向到一个 URL。

本页讲的是如何自定义触发按钮外观。

选择触发样式

开箱即用,操作触发器有 4 个样式 - “按钮”、“链接”、“图标按钮”和“徽章”。

“按钮”触发器有背景色、标签及可选的图标。通常,默认使用按钮样式,不过你页可以使用 button() 方法手动启用。

Action::make('edit')
->button()
Button trigger

“链接”触发器没有背景色。它必须有一个标签及一个可选的图标。它就像你文本中嵌入的链接一样。你可以使用 link() 方法切换到该样式:

Action::make('edit')
->link()
Link trigger

“图标按钮”触发器是一个带有图标的圆形按钮,不带标签。你可以使用 iconButton() 方法切换到该样式:

Action::make('edit')
->icon('heroicon-m-pencil-square')
->iconButton()
Icon button trigger

"徽章(Badge)" 触发器有背景色、标签和可选的图标。你可以使用 badge() 将徽章作为触发器:

Action::make('edit')
->badge()
Badge trigger

在移动端只使用图标按钮

你可能会在桌面端使用带标签的按钮样式,不过在移动端删除标签。这就将其转换成了图标按钮。你可以使用 labeledFrom() 方法, 传入你希望添加标签的响应式临界点来实现该功能。

Action::make('edit')
->icon('heroicon-m-pencil-square')
->button()
->labeledFrom('md')

设置图标

默认情况下, 触发按钮的标签是由其名称生成。你也可以使用 label() 方法自定义标签:

Action::make('edit')
->label('Edit post')
->url(fn (): string => route('posts.edit', ['post' => $this->post]))

可选地,你可以使用 translateLabel() 方法利用 Laravel 的本地化特性自动翻译标签。

Action::make('edit')
->translateLabel() // Equivalent to `label(__('Edit'))`
->url(fn (): string => route('posts.edit', ['post' => $this->post]))

设置颜色

按钮有一个颜色来指示它们的重要性。可以是 dangergrayinfoprimarysuccesswarning:

Action::make('delete')
->color('danger')
Red trigger

设置大小

按钮有三个尺寸 - smmdlg。使用 size() 方法可以修改操作触发器的大小:

use Filament\Support\Enums\ActionSize;
 
Action::make('create')
->size(ActionSize::Large)
Large trigger

设置图标

按钮可能有图标,用来添加更多细节到 UI 中。你可以使用 icon() 方法设置图标。

Action::make('edit')
->url(fn (): string => route('posts.edit', ['post' => $this->post]))
->icon('heroicon-m-pencil-square')
Trigger with icon

你可以使用 iconPosition() 方法修改图标的位置使之放在标签之后:

use Filament\Support\Enums\IconPosition;
 
Action::make('edit')
->url(fn (): string => route('posts.edit', ['post' => $this->post]))
->icon('heroicon-m-pencil-square')
->iconPosition(IconPosition::After)
Trigger with icon after the label

授权

你可以条件性显示或隐藏特定用户的操作。可以使用 visible()hidden() 方法,实现该功能:

Action::make('edit')
->url(fn (): string => route('posts.edit', ['post' => $this->post]))
->visible(auth()->user()->can('update', $this->post))
 
Action::make('edit')
->url(fn (): string => route('posts.edit', ['post' => $this->post]))
->hidden(! auth()->user()->can('update', $this->post))

这个功能可用于授权特定操作给有权限的用户。

禁用按钮

如果想要禁用按钮而非隐藏,你可以使用 disabled() 方法:

Action::make('delete')
->disabled()

你可以传入一个布尔值条件性地禁用按钮:

Action::make('delete')
->disabled(! auth()->user()->can('delete', $this->post))

注册键盘绑定

你可以将键盘快捷键附加到触发按钮上。这一行为使用与 Mousetrap 一样的 Key Code:

use Filament\Actions\Action;
 
Action::make('save')
->action(fn () => $this->save())
->keyBindings(['command+s', 'ctrl+s'])

添加徽章到按钮的角上

你可以添加徽章到按钮的角上,显示任何你想展示的。比如,统计数或状态指示器:

use Filament\Actions\Action;
 
Action::make('filter')
->iconButton()
->icon('heroicon-m-funnel')
->badge(5)
Trigger with badge

你也可以传递徽章使用颜色,这个值可以是 dangergrayinfoprimarysuccesswarning

use Filament\Actions\Action;
 
Action::make('filter')
->iconButton()
->icon('heroicon-m-funnel')
->badge(5)
->badgeColor('success')
Trigger with green badge

按钮样式轮廓

使用“按钮”触发器样式时,你可能希望使其不那么突出。你可以使用不同颜色,不过有时你会希望使其轮廓分明。你可以使用 outlined() 方法实现该功能:

use Filament\Actions\Action;
 
Action::make('edit')
->url(fn (): string => route('posts.edit', ['post' => $this->post]))
->button()
->outlined()
Outlined trigger button

添加额外的 HTML 属性

你可以传递额外的 HTML 属性给按钮,使其合并到外部 DOM 元素。把属性名作为数组键、属性值作为数组值,将一个属性数组传递给 extraAttributes() 方法:

use Filament\Actions\Action;
 
Action::make('edit')
->url(fn (): string => route('posts.edit', ['post' => $this->post]))
->extraAttributes([
'title' => 'Edit this post',
])

如果你以字符串传入 CSS 类,这些类会与已经应用到该按钮的其他 HTML 元素的默认类合并:

use Filament\Actions\Action;
 
Action::make('edit')
->url(fn (): string => route('posts.edit', ['post' => $this->post]))
->extraAttributes([
'class' => 'mx-auto my-8',
])
Edit on GitHub

Still need help? Join our Discord community or open a GitHub discussion

上一页
概述
下一页
模态框