Color column

简介

颜色列(ColorColumn)允许你以支持的格式之一(HEX、HSL、RGB、RGBA)显示 CSS 颜色定义的颜色预览，通常使用拾色器字段输入。

use Filament\Tables\Components\ColorColumn;

ColorColumn::make('color')

允许将颜色复制到剪贴板

你可以让颜色可复制，通过点击预览将 CSS 值复制到剪贴板，并可选地指定自定义确认消息和时长(以毫秒计时)。该特性只有在应用启用 SSL 时有效。

use Filament\Tables\Components\ColorColumn;

ColorColumn::make('color')
    ->copyable()
    ->copyMessage('Copied!')
    ->copyMessageDuration(1500)

此外，你也可以传入一个布尔值，控制颜色是否可复制：

use Filament\Tables\Components\ColorColumn;

ColorColumn::make('color')
    ->copyable(FeatureFlag::active())

除了允许静态值之外，copyable()、copyMessage() 和 copyMessageDuration() 方法也可以接受函数来动态计算它们的值。你可以将多个 utility 作为参数注入到这些函数中。

Learn more about utility injection.

Utility	Type	Parameter	Description
Column	Filament\Tables\Columns\Column	$column	The current column instance.
Livewire	Livewire\Component	$livewire	The Livewire component instance.
Eloquent record	?Illuminate\Database\Eloquent\Model	$record	The Eloquent record for the current table row.
Row loop	stdClass	$rowLoop	The <a href="https://laravel.com/docs/blade#the-loop-variable" target="_blank">row loop</a> object for the current table row.
State	mixed	$state	The current value of the column, based on the current table row.
Table	Filament\Tables\Table	$table	The current table instance.

多色块换行

当显示多个色卡时，如果这些色卡可能在同一行中放不下，使用 wrap() 可以设置换行：

use Filament\Tables\Columns\ColorColumn;

ColorColumn::make('color')
    ->wrap()

TIP

换行的宽度受列标签影响，因此你需要使用简短的标签或者隐藏标签使得换行更紧凑。