在开发 Filament 项目时，我一直希望能找到一种更直观、更美观的方式来展示和切换表格中的状态。Filament 默认的 Toggle Column 虽然功能强大，但在视觉上略显单调。我需要一种能够使用图标来表示状态，并且允许用户直接在表格中切换状态的解决方案。
这时，我发现了 archilex/filament-toggle-icon-column 插件。它完美地结合了 filament 的 toggle column 和 icon column 的优点，允许开发者使用不同的图标和颜色来表示不同的状态，并通过点击图标直接切换状态。
Composer在线学习地址：学习地址
安装 Toggle Icon Column
首先，使用 Composer 安装该插件：
composer require archilex/filament-toggle-icon-column
安装完成后，按照插件的说明，需要发布视图并更新 Tailwind CSS 配置，以确保插件的样式能够正确应用。
php artisan vendor:publish --tag="filament-toggle-icon-column-views"
然后，将插件的视图添加到你的 Filament 主题的
tailwind.config.js文件中。例如，如果你的主题文件位于
resources/css/filament/admin/tailwind.config.js，则添加以下内容：
content: [
...
'./vendor/archilex/filament-toggle-icon-column/**/*.php',
],接下来，编译你的主题：
npm run build
最后，运行 Filament 升级命令：
php artisan filament:upgrade
使用 Toggle Icon Column
安装完成后，就可以在 Filament 表格中使用 Toggle Icon Column 了。以下是一个简单的例子：
use Archilex\ToggleIconColumn\Columns\ToggleIconColumn;
return $table
->columns([
ToggleIconColumn::make('is_active'),
]);自定义图标、颜色和大小
Yes!Sun基于PHP+MYSQL技术，体积小巧、应用灵活、功能强大，是一款为企业网站量身打造的WEB系统。其创新的设计理念，为企业网的开发设计及使用带来了全新的体验：支持前沿技术：动态缓存、伪静态、静态生成、友好URL、SEO设置等提升网站性能、用户体验、搜索引擎友好度的技术均为Yes!Sun所支持。易于二次开发：采用独创的平台化理念，按需定制项目中的各种元素，如：产品属性、产品相册、新闻列表
Toggle Icon Column 提供了丰富的自定义选项，可以根据需要调整图标、颜色和大小。
-
自定义图标：
use Archilex\ToggleIconColumn\Columns\ToggleIconColumn; ToggleIconColumn::make('is_locked') ->onIcon('heroicon-s-lock-open') ->offIcon('heroicon-o-lock-closed'); -
自定义大小：
use Archilex\ToggleIconColumn\Columns\ToggleIconColumn; ToggleIconColumn::make('is_locked') ->size('xl'); -
自定义颜色：
use Archilex\ToggleIconColumn\Columns\ToggleIconColumn; ToggleIconColumn::make('is_locked') ->onColor('primary') ->offColor('secondary'); -
自定义悬停颜色：
use Archilex\ToggleIconColumn\Columns\ToggleIconColumn; ToggleIconColumn::make('is_locked') ->hoverColor('success');
其他选项
ToggleIconColumn 继承自 Filament 的
Column类，因此可以使用许多其他方法，例如：
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 插件，相信它会给你带来惊喜。
