颜色字段

颜色字段让你可以通过CSS颜色定义预览颜色，一般使用一种支持的格式(HEX, HSL, RGB, RGBA)通过拾色器字段进行输入。

use Filament\Tables\Columns\ColorColumn
 
ColorColumn::make('color')
use Filament\Tables\Columns\ColorColumn

ColorColumn::make('color')

#允许将颜色复制到剪贴板

你可以将其设置成可复制。这样的话，点击预览时，便会将CSS值复制到剪贴板中，并可指定自定义确认消息和持续时长(ms)。该特性只有在SSL启用时有效。

use Filament\Tables\Columns\ColorColumn
 
ColorColumn::make('color')
    ->copyable()
    ->copyMessage('Color code copied')
    ->copyMessageDuration(1500)
use Filament\Tables\Columns\ColorColumn

ColorColumn::make('color')
    ->copyable()
    ->copyMessage('Color code copied')
    ->copyMessageDuration(1500)

#自定义复制到剪贴板的文本

使用 copyableState() 方法，你可以自定义复制到剪贴板的文本：

use Filament\Tables\Columns\ColorColumn;
 
ColorColumn::make('color')
    ->copyable()
    ->copyableState(fn (string $state): string => "Color: {$state}")
use Filament\Tables\Columns\ColorColumn;

ColorColumn::make('color')
    ->copyable()
    ->copyableState(fn (string $state): string => "Color: {$state}")

本函数中，你可以使用 $record 函数访问整条记录：

use App\Models\Post;
use Filament\Tables\Columns\ColorColumn;
 
ColorColumn::make('color')
    ->copyable()
    ->copyableState(fn (Post $record): string => "Color: {$record->color}")
use App\Models\Post;
use Filament\Tables\Columns\ColorColumn;

ColorColumn::make('color')
    ->copyable()
    ->copyableState(fn (Post $record): string => "Color: {$record->color}")

Edit on GitHub

Still need help? Join our Discord community or open a GitHub discussion