Languages

Version

Theme

后台面板 - 页面

操作

开始

操作(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,你也可以使用 secondarysuccesswarning 或者 danger:

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

你可以使用 size() 方法自定义按钮的大小,默认为 md,你可以改成 sm 或者 lg

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

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

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

模态框

操作(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(),
])

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

你可以自定义模态框标题(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')

自定义内容

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

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

默认情况下,自定义内容展示在模态框表单上面,不过你也可以使用 modalFooter() 方法将内容添加到表单下面:

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

条件性隐藏模态框

当转回到默认操作时,你可能需要条件性展示模态框,用以确认。可以使用 modalHidden() 达成该目标:

use Filament\Pages\Actions\Action;
 
Action::make('create')
->action('create')
->modalHidden(fn (): bool => $this->role !== 'admin')
->modalContent(view('filament.pages.actions.create'))

分组

你可以使用 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'])

刷新表单数据

如果你在 Edit 或 View 资源页中使用操作,你可以使用 refreshFormData() 方法在主表单中刷新数据:

use Filament\Pages\Actions\Action;
 
Action::make('approve')
->action(function () {
$this->record->approve();
 
$this->refreshFormData([
'status',
]);
})

该方法接收一个模型属性组成的数组,这些模型属性是你想在表单中刷新的数据。

Edit on GitHub

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

上一页
开始
下一页
Widgets