触发按钮

#概述

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

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

#选择触发样式

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

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

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

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

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

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

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

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

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

#在移动端只使用图标按钮

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

Action::make('edit')
    ->icon('heroicon-m-pencil-square')
    ->button()
    ->labeledFrom('md')
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]))
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]))
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')
Action::make('delete')
    ->color('danger')

#设置大小

按钮有三个尺寸 - sm、md 或 lg。使用 size() 方法可以修改操作触发器的大小：

use Filament\Support\Enums\ActionSize;
 
Action::make('create')
    ->size(ActionSize::Large)
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')
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)
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))
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()

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

Action::make('delete')
    ->disabled(! auth()->user()->can('delete', $this->post))
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('save')
    ->action(fn () => $this->save())
    ->keyBindings(['command+s', 'ctrl+s'])

#添加徽章到按钮的角上

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

use Filament\Actions\Action;
 
Action::make('filter')
    ->iconButton()
    ->icon('heroicon-m-funnel')
    ->badge(5)
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')
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()
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',
    ])
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',
    ])
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