Filament表格优化：如何使用ToggleIconColumn提升用户体验_网络技术

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

发布时间 - 2025-08-25 00:00:00 点击率：次

在开发 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'),
    ]);

自定义图标、颜色和大小

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 插件，相信它会给你带来惊喜。

# composer # css # ai # 继承 # JS # column # 自定义 # 是一个 # 安装完成后 # 如果你 # 管理系统 # 但在 # 我一直 # 可以使用 # 能找到 # 可以根据

相关栏目：【网站优化151355 】【网络推广146373 】【网络技术251813 】【 AI营销90571 】

上一篇：c++中如何实现字符串替换所有匹配项_c++循环替换子串方法

下一篇：php怎么绘漏斗图做转化统计_php实现漏斗图步骤【步骤】

相关栏目网站优化
网络推广
网络技术
AI营销

最新文章 Sublime怎么一键压缩JS代码 Su sublime如何在搜索中使用正则表达式 Sublime如何设置透明窗口效果 Su mysql如何设计商品表结构_mysql css属性背景图不显示怎么办_通过检查路如何使用Golang实现排序_Golan 农历闰月是怎么回事_为合回归年加一月调整塑造《刺客信条》艾吉奥传奇的编剧离开育碧 1英里等于多少公里 1mile和km的换 css grid布局中行和列是如何定义的 PS批量旋转和翻转图片，快速校正图片方向 C# Swagger UI自定义方法 C OPPO手机九宫格和全键盘怎么切换_OP Go语言如何实现用户登录注册_Golan 1节飞行速度多少公里每小时 1节是多少公纸嫁衣8千子树第五章庙门怎么开启庙门 Laravel 多行数据编辑表单中实现逐明日之后如何提升钓鱼等级明日之后提升钓支付宝怎样查年度账单_支付宝年度账单查看 C# 多线程UI更新Dispatcher

上一篇：c++中如何实现字符串替换所有匹配项_c++循环替换子串方法

下一篇：php怎么绘漏斗图做转化统计_php实现漏斗图步骤【步骤】