Badge字段

• 自定义颜色
• 添加图标
• 格式化文本
• 允许将文本复制到剪切板

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

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

#自定义颜色

徽章可以设置颜色。如 primary、success、warning 或者 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`

#格式化文本

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

#允许将文本复制到剪切板

你可以让文本可复制。比如点击单元格将文本复制到剪切板，并指定自定义确认消息及持续时间(毫秒)。该特性只有在 开启 SSL 时有效。

use Filament\Tables\Columns\BadgeColumn;
BadgeColumn::make('email')
    ->copyable()
    ->copyMessage('Email address copied')
    ->copyMessageDuration(1500)