DEV Community

Wallace Maxters
Wallace Maxters

Posted on

Filament: Image Color Picker component

#laravel #filament #filamentphp

Image Color Picker for Filament 3

This library contains a custom form field to pick color from a image.

Install 

composer require wallacemaxters/filament-image-color-picker
Enter fullscreen mode Exit fullscreen mode

Usage

Basic Input Usage example:

use WallaceMaxters\FilamentImageColorPicker\ImageColorPicker; //  return $form->schema([ TextInput::make('image_url')->url()->live(), ImageColorPicker::make('color') ->columnSpanFull() ->image(fn ($get) => $get('image_url')), ]);
Enter fullscreen mode Exit fullscreen mode

Use ImageColorPicker as Action:

 Forms\Components\ColorPicker::make('color') ->suffixAction(fn ($get) => Forms\Components\Actions\Action::make('color-from-image') ->action(function ($set, array $data) { $set('color', $data['color']); }) ->icon('heroicon-o-eye-dropper') ->form([ ImageColorPicker::make('color') ->format('hsl') ->image(fn() => $get('image_url')) ]) ),
Enter fullscreen mode Exit fullscreen mode

Preview

Filament Image Color Picker Preview

Github Source

https://github.com/wallacemaxters/filament-image-color-picker/tree/master

Top comments (0)