在开发 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 ArchilexToggleIconColumnColumnsToggleIconColumn;return $table ->columns([ ToggleIconColumn::make('is_active'), ]);自定义图标、颜色和大小
Typewise.app
面向客户服务和销售团队的AI写作解决方案。
Toggle Icon Column 提供了丰富的自定义选项，可以根据需要调整图标、颜色和大小。
自定义图标：
use ArchilexToggleIconColumnColumnsToggleIconColumn;ToggleIconColumn::make('is_locked') ->onIcon('heroicon-s-lock-open') ->offIcon('heroicon-o-lock-closed');自定义大小：
use ArchilexToggleIconColumnColumnsToggleIconColumn;ToggleIconColumn::make('is_locked') ->size('xl');自定义颜色：
use ArchilexToggleIconColumnColumnsToggleIconColumn;ToggleIconColumn::make('is_locked') ->onColor('primary') ->offColor('secondary');自定义悬停颜色：
use ArchilexToggleIconColumnColumnsToggleIconColumn;ToggleIconColumn::make('is_locked') ->hoverColor('success');其他选项
ToggleIconColumn 继承自 Filament 的
Column类，因此可以使用许多其他方法，例如：
use ArchilexToggleIconColumnColumnsToggleIconColumn;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 插件，相信它会给你带来惊喜。
以上就是Filament表格优化：如何使用ToggleIconColumn提升用户体验的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/840500.html
微信扫一扫 
支付宝扫一扫 
