徽章列
概述
徽章列(BadgeColumn)用于渲染彩色徽章:
use Filament\Tables\Columns\BadgeColumn;
BadgeColumn::make('status')
->enum([
'draft' => 'Draft',
'reviewing' => 'Reviewing',
'published' => 'Published',
])
自定义颜色
徽章可以有颜色。颜色值可以是 danger
、gray
、info
、primary
、success
或 warning
:
use Filament\Tables\Columns\BadgeColumn;
BadgeColumn::make('status')
->colors([
'primary',
'gray' => 'draft',
'warning' => 'reviewing',
'success' => 'published',
'danger' => 'rejected',
])
你可以使用回调函数激活颜色,该回调接收单单元格的 $state
作为参数:
use Filament\Tables\Columns\BadgeColumn;
BadgeColumn::make('status')
->colors([
'primary',
'gray' => 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 'gray';
})
添加图标:
徽章也可以有图标:
use Filament\Tables\Columns\BadgeColumn;
BadgeColumn::make('status')
->icons([
'heroicon-m-x-mark',
'heroicon-m-document' => 'draft',
'heroicon-m-arrow-path' => 'reviewing',
'heroicon-m-truck' => 'published',
])
此外,你可以使用闭包条件性地显示图标:
use Filament\Tables\Columns\BadgeColumn;
BadgeColumn::make('status')
->icons([
'heroicon-m-x-mark',
'heroicon-m-document' => static fn ($state): bool => $state === 'draft',
'heroicon-m-arrow-path' => static fn ($state): bool => $state === 'reviewing',
'heroicon-m-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-m-truck';
}
return 'heroicon-m-x-mark';
})
使用 iconPosition()
你可以设置图标位置:
use Filament\Tables\Columns\BadgeColumn;
BadgeColumn::make('status')
->icons([
'heroicon-m-x-mark',
'heroicon-m-document' => 'draft',
'heroicon-m-arrow-path' => 'reviewing',
'heroicon-m-truck' => 'published',
])
->iconPosition('after') // `before` or `after`
格式化文本
文本列中的所有格式化选项,都可用于徽章列中。