README

Stacked Image Column 允许您在 Filament 表格中作为堆叠显示多张图片。

屏幕截图

安装

您可以通过 composer 安装此包

composer require archilex/filament-stacked-image-column

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

php artisan vendor:publish --tag="filament-stacked-image-column-views"

用法

通常您会使用 Stacked Image Column 来展示图片之间的关系。关系的名称首先出现，然后是一个点，最后是显示的列名

use Archilex\StackedImageColumn\Columns\StackedImageColumn;

return $table
    ->columns([
        StackedImageColumn::make('orderItems.image'),
    ]);

使用分隔符

您可以通过传递分隔符到 separator() 来使用分隔的字符串，而不是使用关系

StackedImageColumn::make('product_images')
    ->separator(',')

自定义图片

由于 StackedImageColumn 继承自 Filament 的 ImageColumn，因此您有权限访问大多数相同的方法

StackedImageColumn::make('images')
    ->circular()
    ->width(20)

设置限制

您可以通过传递 limit() 来设置您想要显示的图片数量限制

StackedImageColumn::make('orderItems.image')
    ->circular()
    ->limit(3)

显示剩余图片数量

当您设置限制时，您也可以通过传递 showRemaining() 来显示剩余图片的数量。

StackedImageColumn::make('orderItems.image')
    ->circular()
    ->limit(3)
    ->showRemaining()

默认情况下，showRemaining() 会将剩余图片的数量显示为堆叠在其他图片上的数字。如果您希望将数量显示在图片之后，可以使用 showRemainingAfterStack()。您还可以通过使用 remainingTextSize('xs') 来设置文本大小；

自定义环宽

默认环宽为 ring-3，但您可以将环宽自定义为 0、1、2 或 4，分别对应 tailwinds 的 ring-widths：ring-0、ring-1、ring-2 和 ring-4。

StackedImageColumn::make('users.avatar')
    ->circular()
    ->ring(3)

自定义重叠

默认重叠为 -space-x-1，但您可以将重叠自定义为 0、1、2、3 或 4，分别对应 tailwinds 的 space-x 选项：space-x-0、-space-x-1、-space-x-2、-space-x-3 和 -space-x-4。

StackedImageColumn::make('users.avatar')
    ->circular()
    ->overlap(3)

测试

composer test

变更日志

请查看CHANGELOG，了解更多最近的变化。

贡献

请查看CONTRIBUTING 获取详细信息。

安全漏洞

请审查我们的安全策略，了解如何报告安全漏洞。

鸣谢

其他 Filament 插件

查看我的其他 Filament 插件

Filter Sets：将您的筛选器、搜索查询、列顺序和列搜索查询保存到易于访问的筛选器集中
Toggle Icon Column：在 Filament 表格中显示可切换的图标。

许可证

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

archilex / filament-stacked-image-column

维护者

详细信息