图标字段

Columns

图标字段通过渲染 Blade 图标组件,代表对应的内容:

use Filament\Tables\Columns\IconColumn;
 
IconColumn::make('is_featured')
->options([
'heroicon-o-x-circle',
'heroicon-o-pencil' => 'draft',
'heroicon-o-clock' => 'reviewing',
'heroicon-o-check-circle' => 'published',
])

你也可以传入一个回调函数用以激活一个选项,回调函数接收单元格的状态 $state 作为参数:

use Filament\Tables\Columns\IconColumn;
 
IconColumn::make('is_featured')
->options([
'heroicon-o-x-circle',
'heroicon-o-pencil' => fn ($state): bool => $state === 'draft',
'heroicon-o-clock' => fn ($state): bool => $state === 'reviewing',
'heroicon-o-check-circle' => fn ($state): bool => $state === 'published',
])

自定义颜色

你可以使用同样的语法,为图标设置颜色。比如 primarysecondarysuccesswarningdanger:

use Filament\Tables\Columns\IconColumn;
 
IconColumn::make('is_featured')
->options([
'heroicon-o-x-circle',
'heroicon-o-pencil' => 'draft',
'heroicon-o-clock' => 'reviewing',
'heroicon-o-check-circle' => 'published',
])
->colors([
'secondary',
'danger' => 'draft',
'warning' => 'reviewing',
'success' => 'published',
])

自定义大小

默认图标大小是 lg,不过你可以将大小自定义为 xssmmdlgxl

use Filament\Tables\Columns\IconColumn;
 
IconColumn::make('is_featured')
->options([
'heroicon-s-x-circle',
'heroicon-s-pencil' => 'draft',
'heroicon-s-clock' => 'reviewing',
'heroicon-s-check-circle' => 'published',
])
->size('md')

处理布尔值

图标字段可以使用 boolean() 方法,根据数据库字段内容的 true/false 展示打勾或者打叉图标:

use Filament\Tables\Columns\IconColumn;
IconColumn::make('is_featured')

自定义布尔值图标

可以自定义代表每个状态的图标。图标使用 Blade 模板名。默认安装了 Heroicons v1 图标:

use Filament\Tables\Columns\IconColumn;
IconColumn::make('is_featured')
->boolean()
->trueIcon('heroicon-o-badge-check')
->falseIcon('heroicon-o-x-circle')

自定义布尔值颜色

你可以自定义代表每个状态对应的图标颜色。可以是 primary, secondary, success, warningdanger:

use Filament\Tables\Columns\IconColumn;
IconColumn::make('is_featured')
->boolean()
->trueColor('primary')
->falseColor('warning')

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

喜欢Filament?

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

打赏