Icon column

#简介

图标列字段用来渲染字段状态的图标：

use Filament\Tables\Columns\IconColumn;
use Filament\Support\Icons\Heroicon;

IconColumn::make('status')
    ->icon(fn (string $state): string => match ($state) {
        'draft' => Heroicon::OutlinedPencil,
        'reviewing' => Heroicon::OutlinedClock,
        'published' => Heroicon::OutlinedCheckCircle,
    })

icon() 方法可以将多个 utility 作为参数注入到该函数中。

Learn more about utility injection.

Utility	Type	Parameter	Description
Column	Filament\Tables\Columns\Column	$column	The current column instance.
Livewire	Livewire\Component	$livewire	The Livewire component instance.
Eloquent record	?Illuminate\Database\Eloquent\Model	$record	The Eloquent record for the current table row.
Row loop	stdClass	$rowLoop	The row loop object for the current table row.
State	mixed	$state	The current value of the column, based on the current table row.
Table	Filament\Tables\Table	$table	The current table instance.

#自定义颜色

使用 color() 方法，你可以修改图标的颜色：

use Filament\Tables\Columns\IconColumn;

IconColumn::make('status')
    ->color('success')

通过传入函数到 color() 中，你可以基于字段的状态自定义颜色：

use Filament\Tables\Columns\IconColumn;

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

color() 方法可以将多个 utility 作为参数注入到该函数中。

Learn more about utility injection.

Utility	Type	Parameter	Description
Column	Filament\Tables\Columns\Column	$column	The current column instance.
Livewire	Livewire\Component	$livewire	The Livewire component instance.
Eloquent record	?Illuminate\Database\Eloquent\Model	$record	The Eloquent record for the current table row.
Row loop	stdClass	$rowLoop	The row loop object for the current table row.
State	mixed	$state	The current value of the column, based on the current table row.
Table	Filament\Tables\Table	$table	The current table instance.

#自定义大小

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

use Filament\Tables\Columns\IconColumn;
use Filament\Support\Enums\IconSize;

IconColumn::make('status')
    ->size(IconSize::Medium)

除了允许静态值之外，size() 方法也可以接受函数来动态计算其值。你可以将多个 utility 作为参数注入到函数中。

Learn more about utility injection.

Utility	Type	Parameter	Description
Column	Filament\Tables\Columns\Column	$column	The current column instance.
Livewire	Livewire\Component	$livewire	The Livewire component instance.
Eloquent record	?Illuminate\Database\Eloquent\Model	$record	The Eloquent record for the current table row.
Row loop	stdClass	$rowLoop	The row loop object for the current table row.
State	mixed	$state	The current value of the column, based on the current table row.
Table	Filament\Tables\Table	$table	The current table instance.

#处理布尔值

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

use Filament\Tables\Columns\IconColumn;

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

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

此外，你也可以传入一个布尔值，控制图标是否为布尔值：

use Filament\Tables\Columns\IconColumn;

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

除了允许静态值之外，boolean() 方法也可以接受函数来动态计算其值。你可以将多个 utility 作为参数注入到函数中。

Learn more about utility injection.

Utility	Type	Parameter	Description
Column	Filament\Tables\Columns\Column	$column	The current column instance.
Livewire	Livewire\Component	$livewire	The Livewire component instance.
Eloquent record	?Illuminate\Database\Eloquent\Model	$record	The Eloquent record for the current table row.
Row loop	stdClass	$rowLoop	The row loop object for the current table row.
State	mixed	$state	The current value of the column, based on the current table row.
Table	Filament\Tables\Table	$table	The current table instance.

#自定义布尔值图标

你可以自定义代表每个状态的图标：

use Filament\Tables\Columns\IconColumn;
use Filament\Support\Icons\Heroicon;

IconColumn::make('is_featured')
    ->boolean()
    ->trueIcon(Heroicon::OutlinedCheckBadge)
    ->falseIcon(Heroicon::OutlinedXMark)

除了允许静态值之外，trueIcon() 和 falseIcon() 方法也可以接受函数来动态计算它们的值。你可以将多个 utility 作为参数注入到这些函数中。

Learn more about utility injection.

Utility	Type	Parameter	Description
Column	Filament\Tables\Columns\Column	$column	The current column instance.
Livewire	Livewire\Component	$livewire	The Livewire component instance.
Eloquent record	?Illuminate\Database\Eloquent\Model	$record	The Eloquent record for the current table row.
Row loop	stdClass	$rowLoop	The row loop object for the current table row.
State	mixed	$state	The current value of the column, based on the current table row.
Table	Filament\Tables\Table	$table	The current table instance.

#自定义布尔值颜色

你可以自定义代表每个状态的图标颜色：

use Filament\Tables\Columns\IconColumn;

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

除了允许静态值之外，trueColor() 和 falseColor() 方法也可以接受函数来动态计算它们的值。你可以将多个 utility 作为参数注入到这些函数中。

Learn more about utility injection.

Utility	Type	Parameter	Description
Column	Filament\Tables\Columns\Column	$column	The current column instance.
Livewire	Livewire\Component	$livewire	The Livewire component instance.
Eloquent record	?Illuminate\Database\Eloquent\Model	$record	The Eloquent record for the current table row.
Row loop	stdClass	$rowLoop	The row loop object for the current table row.
State	mixed	$state	The current value of the column, based on the current table row.
Table	Filament\Tables\Table	$table	The current table instance.

#多个图标换行

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

use Filament\Tables\Columns\IconColumn;

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

Edit on GitHub

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