图标字段

图标字段通过渲染 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',
    ])
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 和 $record 作为参数：

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

IconColumn::make('is_featured')
    ->options([
        'heroicon-o-x-circle',
        'heroicon-o-pencil' => fn ($state, $record): bool => $record->status === 2,
        'heroicon-o-clock' => fn ($state): bool => $state === 'reviewing',
        'heroicon-o-check-circle' => fn ($state): bool => $state === 'published',
    ])

#自定义颜色

你可以使用同样的语法，为图标设置颜色。比如 primary、secondary、success、warning 或 danger:

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',
    ])
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，不过你可以将大小自定义为 xs、sm、md、lg 或 xl：

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')
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')
    ->boolean()
use Filament\Tables\Columns\IconColumn;

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

#自定义布尔值图标

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

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

IconColumn::make('is_featured')
    ->boolean()
    ->trueIcon('heroicon-o-badge-check')
    ->falseIcon('heroicon-o-x-circle')

#自定义布尔值颜色

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

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

IconColumn::make('is_featured')
    ->boolean()
    ->trueColor('primary')
    ->falseColor('warning')

Edit on GitHub

Still need help? Join our Discord community or open a GitHub discussion