操作

Pages

开始

操作(Actions) 是展示在页面头部的按钮,允许用户在页面中运行 Livewire 方法或者访问 URL。

使用 getActions() 方法,可以在页面中定义操作。

use Filament\Pages\Actions\Action;
 
protected function getActions(): array
{
return [
Action::make('settings')->action('openSettingsModal'),
];
}
 
public function openSettingsModal(): void
{
$this->dispatchBrowserEvent('open-settings-modal');
}

操作按钮的标签是基于操作名称生成。你可以使用 label() 方法重写:

use Filament\Pages\Actions\Action;
 
protected function getActions(): array
{
return [
Action::make('settings')
->label('Settings')
->action('openSettingsModal'),
];
}

你也可以使用 url() 方法然让按钮打开一个 URL 链接:

use Filament\Pages\Actions\Action;
 
protected function getActions(): array
{
return [
Action::make('settings')
->label('Settings')
->url(route('settings')),
];
}

操作有颜色 color() 方法。默认为 primary,你也可以使用 secondary, success, warning 或者 danger:

use Filament\Pages\Actions\Action;
 
protected function getActions(): array
{
return [
Action::make('settings')->color('secondary'),
];
}

操作按钮也可以使用 icon() 方法,传入任何 Blade 组件名。默认情况下,安装了 Blade Heroicons,因此你可以开箱即用使用 Heroicon 中的图标。同时,你也可以创建你自己定义的icon组件或者安装其他图标库。

use Filament\Pages\Actions\Action;
 
protected function getActions(): array
{
return [
Action::make('settings')->icon('heroicon-s-cog'),
];
}

你可以使用 size() 方法自定义按钮的大小:

use Filament\Pages\Actions\Action;
 
protected function getActions(): array
{
return [
Action::make('settings')
->label('Settings')
->url(route('settings'))
->size('lg'), // `sm`, `md` or `lg`
];
}

模态框

操作(Action)可能在运行前要确认或者生成信息,你可以在操作执行之前打开模态框来实现。

确认模态框

你可以使用 requiresConfirmation() 方法要求操作执行前进行确认操作。这个功能对于破坏性操作,比如删除记录,尤其有用。

use Filament\Pages\Actions\Action;
 
Action::make('delete')
->action(fn () => $this->record->delete())
->requiresConfirmation()

注意: 当设置了 url() 来代替 action() 后,确认模态框将不可用。因此,你应该在 action() 使用回调函数进行URL重定向。

自定义表单

你也可以在模态框中渲染表单,用以在操作运行前从用户侧收集额外信息。

你可以使用表单构造器中的组件,创建自定义模态框表格。表单中的数据可以通过 action() 回调函数的 $data 参数获取:

use App\Models\User;
use Filament\Forms;
use Filament\Pages\Actions\Action;
 
Action::make('updateAuthor')
->action(function (array $data): void {
$this->record->author()->associate($data['authorId']);
$this->record->save();
})
->form([
Forms\Components\Select::make('authorId')
->label('Author')
->options(User::query()->pluck('name', 'id'))
->required(),
])

填入默认数据

使用 mountUsing() 方法,你可以在表单中填入默认数据:

use App\Models\User;
use Filament\Forms;
use Filament\Pages\Actions\Action;
 
Action::make('updateAuthor')
->mountUsing(fn (Forms\ComponentContainer $form) => $form->fill([
'authorId' => $this->record->author->id,
]))
->action(function (array $data): void {
$this->record->author()->associate($data['authorId']);
$this->record->save();
})
->form([
Forms\Components\Select::make('authorId')
->label('Author')
->options(User::query()->pluck('name', 'id'))
->required(),
])

自定义内容

你可以自定义模态框中要渲染的内容,你可以在 modalContent() 方法中传入 Blade 视图指定自定义内容:

use Filament\Pages\Actions\Action;
 
Action::make('advance')
->action(fn () => $this->record->advance())
->modalContent(view('filament.pages.actions.advance'))

设置模态框标题, 副标题以及按钮标签

你可以自定义模态框标题(heading)、副标题(subheading)以及按钮标签

use Filament\Pages\Actions\Action;
 
Action::make('delete')
->action(fn () => $this->record->delete())
->requiresConfirmation()
->modalHeading('Delete posts')
->modalSubheading('Are you sure you\'d like to delete these posts? This cannot be undone.')
->modalButton('Yes, delete them')

分组

你可以使用 ActionGroup 对象,将多个 Action 聚合到一个下拉按钮中:

use Filament\Pages\Actions;
protected function getActions(): array
{
return [
Actions\ActionGroup::make([
Actions\ViewAction::make(),
Actions\EditAction::make(),
Actions\DeleteAction::make(),
]),
];
}

按键绑定

你可以将快捷键绑定到操作。这里使用和Mousetrap的按键编码:

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

需要帮助? 加入论坛 或者打开 GitHub讨论

喜欢Filament?

Filament 中文文档由 laravel-filament.cn 翻译整理。站长用爱发电,希望为英文阅读不畅的朋友提供快速掌握Filament框架的途径。文档的翻译,社区的运营维护都需要时间精力上的付出。如果文档社区使你受益,如果你想支持站长...

打赏