Filament表格优化：如何使用ToggleIconColumn提升用户体验

在开发 Filament 项目时，我一直希望能找到一种更直观、更美观的方式来展示和切换表格中的状态。Filament 默认的 Toggle Column 虽然功能强大，但在视觉上略显单调。我需要一种能够使用图标来表示状态，并且允许用户直接在表格中切换状态的解决方案。

这时，我发现了 archilex/filament-toggle-icon-column 插件。它完美地结合了 filament 的 toggle column 和 icon column 的优点，允许开发者使用不同的图标和颜色来表示不同的状态，并通过点击图标直接切换状态。

Composer在线学习地址：学习地址

安装 Toggle Icon Column

首先，使用 Composer 安装该插件：

<pre class="brush:php;toolbar:false;">composer require archilex/filament-toggle-icon-column

安装完成后，按照插件的说明，需要发布视图并更新 Tailwind CSS 配置，以确保插件的样式能够正确应用。

<pre class="brush:php;toolbar:false;">php artisan vendor:publish --tag="filament-toggle-icon-column-views"

然后，将插件的视图添加到你的 Filament 主题的

tailwind.config.js

文件中。例如，如果你的主题文件位于

resources/css/filament/admin/tailwind.config.js

，则添加以下内容：

<pre class="brush:php;toolbar:false;">content: [
    ...
    './vendor/archilex/filament-toggle-icon-column/**/*.php',
],

接下来，编译你的主题：

<pre class="brush:php;toolbar:false;">npm run build

最后，运行 Filament 升级命令：

<pre class="brush:php;toolbar:false;">php artisan filament:upgrade

使用 Toggle Icon Column

安装完成后，就可以在 Filament 表格中使用 Toggle Icon Column 了。以下是一个简单的例子：

<pre class="brush:php;toolbar:false;">use Archilex\ToggleIconColumn\Columns\ToggleIconColumn;

return $table
    ->columns([
        ToggleIconColumn::make('is_active'),
    ]);

自定义图标、颜色和大小

Toggle Icon Column 提供了丰富的自定义选项，可以根据需要调整图标、颜色和大小。

• 自定义图标：

  <pre class="brush:php;toolbar:false;">use Archilex\ToggleIconColumn\Columns\ToggleIconColumn;
  
  ToggleIconColumn::make('is_locked')
      ->onIcon('heroicon-s-lock-open')
      ->offIcon('heroicon-o-lock-closed');

• 自定义大小：

  <pre class="brush:php;toolbar:false;">use Archilex\ToggleIconColumn\Columns\ToggleIconColumn;
  
  ToggleIconColumn::make('is_locked')
      ->size('xl');

• 自定义颜色：

  <pre class="brush:php;toolbar:false;">use Archilex\ToggleIconColumn\Columns\ToggleIconColumn;
  
  ToggleIconColumn::make('is_locked')
      ->onColor('primary')
      ->offColor('secondary');

• 自定义悬停颜色：

  <pre class="brush:php;toolbar:false;">use Archilex\ToggleIconColumn\Columns\ToggleIconColumn;
  
  ToggleIconColumn::make('is_locked')
      ->hoverColor('success');

其他选项

ToggleIconColumn 继承自 Filament 的

Column

类，因此可以使用许多其他方法，例如：

<pre class="brush:php;toolbar:false;">use Archilex\ToggleIconColumn\Columns\ToggleIconColumn;

ToggleIconColumn::make('is_bookmarked')
    ->label('Bookmark status')
    ->translateLabel()
    ->alignCenter()
    ->disabled(fn () => ! auth()->user()->isAdmin())
    ->tooltip(fn (Model $record) => $record->is_bookmarked ? 'Unbookmark' : 'Bookmark')
    ->sortable();

总结

Toggle Icon Column 插件为 Filament 表格增加了一种更直观、更美观的交互方式。通过自定义图标、颜色和大小，可以轻松地将状态信息以视觉化的方式呈现给用户，从而提升用户体验。如果你正在使用 Filament 构建后台管理系统，不妨尝试一下 Toggle Icon Column 插件，相信它会给你带来惊喜。