README

在开发 Advanced Tables (以前称为 Filter Sets) 时，这是一个付费的 Filament 插件，允许您将现有的过滤器保存到一个易于访问的过滤器集中。在此过程中，切换图标列应运而生。

切换图标列是 Filament 的交互式切换列和图标列的组合，允许在表格中切换图标的开/关，不同的图标和颜色代表其不同的状态。

需要注意的是，Filament 当前提供的切换列对大多数人来说是一个更明显、更直观的 UX，甚至支持在切换按钮中添加图标。然而，对一些人来说，如我，切换图标列将为您的表格提供一种增加视觉区分的绝佳方式。

安装

您可以通过 composer 安装此包

composer require archilex/filament-toggle-icon-column

可选地，您可以使用以下命令发布视图

php artisan vendor:publish --tag="filament-toggle-icon-column-views"

Filament v3 推荐开发者创建一个自定义主题以更好地支持插件的附加 Tailwind 类。在您创建自定义主题后，将切换图标列的视图添加到您 新主题的 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

用法

use Archilex\ToggleIconColumn\Columns\ToggleIconColumn;

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

自定义图标

您可以根据每个状态自定义表示的图标。目前支持 Heroicons v2

use Archilex\ToggleIconColumn\Columns\ToggleIconColumn;
 
ToggleIconColumn::make('is_locked')
    ->onIcon('heroicon-s-lock-open')
    ->offIcon('heroicon-o-lock-closed')

自定义大小

默认图标大小为 lg，但您可以自定义大小为 xs、sm、md、lg 或 xl

use Archilex\ToggleIconColumn\Columns\ToggleIconColumn;
 
ToggleIconColumn::make('is_locked')
    ->size('xl')

自定义颜色

您可以根据 开启/关闭 状态自定义图标颜色。这些可以是 primary、secondary、success、info、warning、danger 或 secondary

use Archilex\ToggleIconColumn\Columns\ToggleIconColumn;
 
ToggleIconColumn::make('is_locked')
    ->onColor('primary')
    ->offColor('secondary')

自定义悬停颜色

默认情况下，悬停颜色将是 开启/关闭 颜色的反色。这些也可以自定义为 primary、secondary、success、info、warning、danger 或 secondary

use Archilex\ToggleIconColumn\Columns\ToggleIconColumn;
 
ToggleIconColumn::make('is_locked')
    ->hoverColor('success')

对于进一步的定制，您可以调用一个 Closure。

use Archilex\ToggleIconColumn\Columns\ToggleIconColumn;
 
ToggleIconColumn::make('is_locked')
    ->hoverColor(fn (Model $record) => $record->is_locked ? 'text-gray-300' : 'text-success-500'),

其他选项

由于 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()

测试

composer test

变更日志

请参阅 CHANGELOG 了解最近更改的详细信息。

贡献

请参阅 CONTRIBUTING 了解详细信息。

安全漏洞

请参阅我们的安全策略了解如何报告安全漏洞。

其他 Filament 插件

查看我的其他 Filament 插件

高级表格（之前称为筛选集）：让您的用户将筛选器、搜索、列顺序等组合成方便且易于访问的筛选集。
堆叠图像列：在 Filament 表格中显示多个图像作为堆叠。

致谢

许可证

MIT 许可证（MIT）。有关更多信息，请参阅许可证文件。

archilex / filament-toggle-icon-column

维护者

详细信息