Badge字段

Columns

徽章字段(Badge Column)使用彩色徽章渲染单元格内容:

use Filament\Tables\Columns\BadgeColumn;
 
BadgeColumn::make('status')
->enum([
'draft' => 'Draft',
'reviewing' => 'Reviewing',
'published' => 'Published',
])

自定义颜色

徽章可以设置颜色。如 primarysuccesswarning 或者 danger:

use Filament\Tables\Columns\BadgeColumn;
 
BadgeColumn::make('status')
->colors([
'primary',
'secondary' => 'draft',
'warning' => 'reviewing',
'success' => 'published',
'danger' => 'rejected',
])

你可以使用回调函数激活颜色,回调函数接收单元格状态 $state 作为参数:

use Filament\Tables\Columns\BadgeColumn;
 
BadgeColumn::make('status')
->colors([
'primary',
'secondary' => static fn ($state): bool => $state === 'draft',
'warning' => static fn ($state): bool => $state === 'reviewing',
'success' => static fn ($state): bool => $state === 'published',
'danger' => static fn ($state): bool => $state === 'rejected',
])

或者基于 $record$state 动态计算颜色:

use Filament\Tables\Columns\BadgeColumn;
 
BadgeColumn::make('status')
->color(static function ($state): string {
if ($state === 'published') {
return 'success';
}
 
return 'secondary';
})

添加图标

徽章也可以有图标:

use Filament\Tables\Columns\BadgeColumn;
 
BadgeColumn::make('status')
->icons([
'heroicon-o-x',
'heroicon-o-document' => 'draft',
'heroicon-o-refresh' => 'reviewing',
'heroicon-o-truck' => 'published',
])

此外,你可以使用闭包选择性地显示图标:

use Filament\Tables\Columns\BadgeColumn;
 
BadgeColumn::make('status')
->icons([
'heroicon-o-x',
'heroicon-o-document' => static fn ($state): bool => $state === 'draft',
'heroicon-o-refresh' => static fn ($state): bool => $state === 'reviewing',
'heroicon-o-truck' => static fn ($state): bool => $state === 'published',
])

或者根据 $record$state 动态计算颜色:

use Filament\Tables\Columns\BadgeColumn;
 
BadgeColumn::make('status')
->icon(static function ($state): string {
if ($state === 'published') {
return 'heroicon-o-truck';
}
 
return 'heroicon-o-x';
})

可以使用 iconPosition() 方法设置图标位置:

use Filament\Tables\Columns\BadgeColumn;
 
BadgeColumn::make('status')
->icons([
'heroicon-o-x',
'heroicon-o-document' => 'draft',
'heroicon-o-refresh' => 'reviewing',
'heroicon-o-truck' => 'published',
])
->iconPosition('after') // `before` or `after`

格式化文本

文本字段中的所有格式化选项,同样适用于徽章字段。

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

喜欢Filament?

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

打赏