跳到主要内容
版本:3.x

Icon column

概述

图标列字段用来渲染表示其内容的图标

use Filament\Tables\Columns\IconColumn;

IconColumn::make('status')
->icon(fn (string $state): string => match ($state) {
'draft' => 'heroicon-o-pencil',
'reviewing' => 'heroicon-o-clock',
'published' => 'heroicon-o-check-circle',
})

该函数中,$state 是列字段的值,$record 可用于访问 Eloquent 记录。

Icon column

自定义颜色

图标列也有一套图标颜色。颜色值可以是 dangergrayinfoprimarysuccess 或者 warning

use Filament\Tables\Columns\IconColumn;

IconColumn::make('status')
->color(fn (string $state): string => match ($state) {
'draft' => 'info',
'reviewing' => 'warning',
'published' => 'success',
default => 'gray',
})

该函数中,$state 是列字段的值,$record 可用于访问 Eloquent 记录。

Icon column with color

自定义大小

图标默认大小是 IconColumnSize::Large,不过你可以将其自定义为 IconColumnSize::ExtraSmallIconColumnSize::SmallIconColumnSize::MediumIconColumnSize::ExtraLargeIconColumnSize::TwoExtraLarge

use Filament\Tables\Columns\IconColumn;

IconColumn::make('status')
->size(IconColumn\IconColumnSize::Medium)
Medium-sized icon column

处理布尔值

使用 boolean() 方法,图标列可以基于数据库字段内容显示勾或叉:

use Filament\Tables\Columns\IconColumn;

IconColumn::make('is_featured')
->boolean()

如果模型类的字段已经强制转换为 boolboolean,Filament 可以检测到,你无需手动调用 boolean()

Icon column to display a boolean

自定义布尔值图标

你可以自定义代表每个状态的图标。图标为 Blade 组件名。默认情况下,安装了 Heroicons

use Filament\Tables\Columns\IconColumn;

IconColumn::make('is_featured')
->boolean()
->trueIcon('heroicon-o-check-badge')
->falseIcon('heroicon-o-x-mark')
Icon column to display a boolean with custom icons

自定义布尔值颜色

你可以自定义代表每个状态的图标颜色。颜色值可以是 dangergrayinfoprimarysuccess 或者 warning

use Filament\Tables\Columns\IconColumn;

IconColumn::make('is_featured')
->boolean()
->trueColor('info')
->falseColor('warning')
Icon column to display a boolean with custom colors

多个图标换行

当显示多个图标时,如果这些图标不能放在一行,使用 wrap() 可以设置换行:

use Filament\Tables\Columns\IconColumn;

IconColumn::make('icon')
->wrap()

注意:换行的宽度(width)受列标签影响,因此你需要使用简单的标签或者隐藏标签使得换行更紧凑。