Color picker

#概述

拾色器(ColorPicker)组件允许你以一系列格式选择颜色。

默认情况下，组件使用 16 进制格式：

use Filament\Forms\Components\ColorPicker;
 
ColorPicker::make('color')
use Filament\Forms\Components\ColorPicker;

ColorPicker::make('color')

#设置颜色格式

虽然默认为 16 进制格式，你也可以使用其他格式：

use Filament\Forms\Components\ColorPicker;
 
ColorPicker::make('hsl_color')
    ->hsl()
 
ColorPicker::make('rgb_color')
    ->rgb()
 
ColorPicker::make('rgba_color')
    ->rgba()
use Filament\Forms\Components\ColorPicker;

ColorPicker::make('hsl_color')
    ->hsl()

ColorPicker::make('rgb_color')
    ->rgb()

ColorPicker::make('rgba_color')
    ->rgba()

#拾色器验证

你可以使用 Laravel 的验证规则对拾色器的值进行验证：

use Filament\Forms\Components\ColorPicker;
 
ColorPicker::make('hex_color')
    ->regex('/^#([a-f0-9]{6}|[a-f0-9]{3})\b$/')
 
ColorPicker::make('hsl_color')
    ->hsl()
    ->regex('/^hsl\(\s*(\d+)\s*,\s*(\d*(?:\.\d+)?%)\s*,\s*(\d*(?:\.\d+)?%)\)$/')
 
ColorPicker::make('rgb_color')
    ->rgb()
    ->regex('/^rgb\((\d{1,3}),\s*(\d{1,3}),\s*(\d{1,3})\)$/')
 
ColorPicker::make('rgba_color')
    ->rgba()
    ->regex('/^rgba\((\d{1,3}),\s*(\d{1,3}),\s*(\d{1,3}),\s*(\d*(?:\.\d+)?)\)$/')
use Filament\Forms\Components\ColorPicker;

ColorPicker::make('hex_color')
    ->regex('/^#([a-f0-9]{6}|[a-f0-9]{3})\b$/')

ColorPicker::make('hsl_color')
    ->hsl()
    ->regex('/^hsl\(\s*(\d+)\s*,\s*(\d*(?:\.\d+)?%)\s*,\s*(\d*(?:\.\d+)?%)\)$/')

ColorPicker::make('rgb_color')
    ->rgb()
    ->regex('/^rgb\((\d{1,3}),\s*(\d{1,3}),\s*(\d{1,3})\)$/')

ColorPicker::make('rgba_color')
    ->rgba()
    ->regex('/^rgba\((\d{1,3}),\s*(\d{1,3}),\s*(\d{1,3}),\s*(\d*(?:\.\d+)?)\)$/')

Edit on GitHub

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