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',
    })
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 记录。

#自定义颜色

图标列也有一套图标颜色。颜色值可以是 danger、gray、info、primary、success 或者 warning：

use Filament\Tables\Columns\IconColumn;
 
IconColumn::make('status')
    ->color(fn (string $state): string => match ($state) {
        'draft' => 'info',
        'reviewing' => 'warning',
        'published' => 'success',
        default => 'gray',
    })
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 记录。

#自定义大小

图标默认大小是 IconColumnSize::Large，不过你可以将其自定义为 IconColumnSize::ExtraSmall、IconColumnSize::Small、IconColumnSize::Medium 、IconColumnSize::ExtraLarge 或 IconColumnSize::TwoExtraLarge：

use Filament\Tables\Columns\IconColumn;
 
IconColumn::make('status')
    ->size(IconColumn\IconColumnSize::Medium)
use Filament\Tables\Columns\IconColumn;

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

#处理布尔值

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

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

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

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

#自定义布尔值图标

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

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

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

#自定义布尔值颜色

你可以自定义代表每个状态的图标颜色。颜色值可以是 danger、gray、info、primary、success 或者 warning：

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

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

#多个图标换行

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

use Filament\Tables\Columns\IconColumn;
 
IconColumn::make('icon')
    ->wrap()
use Filament\Tables\Columns\IconColumn;

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

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

Edit on GitHub

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