Actions
触发按钮
概述
所有的 Action 都有一个触发按钮。当用户点击按钮时，动作便执行了 - 打开一个模态框、执行一个闭包函数或者重定向到一个 URL。
本页讲的是如何自定义触发按钮外观。
选择触发样式
开箱即用，操作触发器有 3 个样式 - “按钮”、“链接”及“图标按钮”。
“按钮”触发器有背景色、标签及可选的图标。通常，默认使用按钮样式，不过你页可以使用 button() 方法手动启用。
Action::make('edit') ->button()
“链接”触发器没有背景色。它必须有一个标签及一个可选的图标。它就像你文本中嵌入的链接一样。你可以使用 link() 方法切换到该样式：
Action::make('edit') ->link()
“图标按钮”触发器是一个带有图标的圆形按钮，不带标签。你可以使用 iconButton() 方法切换到该样式：
Action::make('edit') ->icon('heroicon-m-pencil-square') ->iconButton()
在移动端只使用图标按钮
你可能会在桌面端使用带标签的按钮样式，不过在移动端删除标签。这就将其转换成了图标按钮。你可以使用 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]))设置颜色
按钮有一个颜色来指示它们的重要性。可以是 danger、gray、info、primary、success 和 warning:
Action::make('delete') ->color('danger')
设置大小
按钮有三个尺寸 - sm、md 或 lg。使用 size() 方法可以修改操作触发器的大小：
use Filament\Support\Enums\ActionSize; Action::make('create') ->size(ActionSize::Large)
设置图标
按钮可能有图标，用来添加更多细节到 UI 中。你可以使用 icon() 方法设置图标。
Action::make('edit') ->url(fn (): string => route('posts.edit', ['post' => $this->post])) ->icon('heroicon-m-pencil-square')
你可以使用 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)
授权
你可以条件性显示或隐藏特定用户的操作。可以使用 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)
你也可以传递徽章使用颜色，这个值可以是 danger、gray、info、primary、success 及 warning：
use Filament\Actions\Action; Action::make('filter') ->iconButton() ->icon('heroicon-m-funnel') ->badge(5) ->badgeColor('success')
按钮样式轮廓
使用“按钮”触发器样式时，你可能希望使其不那么突出。你可以使用不同颜色，不过有时你会希望使其轮廓分明。你可以使用 outlined() 方法实现该功能：
use Filament\Actions\Action; Action::make('edit') ->url(fn (): string => route('posts.edit', ['post' => $this->post])) ->button() ->outlined()
添加额外的 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', ])Still need help? Join our Discord community or open a GitHub discussion