Logo

dev-resources.site

for different kinds of informations.

Filament: Image Color Picker component

Published at
11/20/2024
Categories
laravel
filament
filamentphp
Author
wallacemaxters
Categories
3 categories in total
laravel
open
filament
open
filamentphp
open
Author
14 person written this
wallacemaxters
open
Filament: Image Color Picker component

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

filament Article's
30 articles in total
Favicon
Multi select default selection i filament v3
Favicon
Filament: Image Color Picker component
Favicon
My First No-Code SaaS Took off - $8K in 40 days
Favicon
Add a sidebar with options in a Filament resource
Favicon
Filament: Modify login or logout response
Favicon
Filament Database Notification Sound
Favicon
Laravel Nova vs Filament: The Best Admin Panels
Favicon
Filament: Add icon to form buttons
Favicon
Filament Breezy: add new field to Personal Info component
Favicon
Filament: Delete Attachments when Deleting a Record
Favicon
Filament: Generate Resource from Existing DB Schema
Favicon
Filament Breezy: set storage disk for avatar
Favicon
Laravel Stats : Filament Charts.js pour faire les statistiques
Favicon
Filament How to redirect to list page after (create,update) using Trait
Favicon
How to solve Symfony\Component\Routing\Exception\RouteNotFoundException Route [filament.admin.resources.api-keys.index] not
Favicon
Apa itu Laravel Filament?
Favicon
Laravel Filament: get resource table data by authenticated id
Favicon
Change Default Colors in FilamentPHP
Favicon
How to Use Searchable in Laravel 10 Filament v3
Favicon
Filament: add a confirmation password field in a form
Favicon
TomatoPHP Filament Plugins
Favicon
Debug Filament Search Query
Favicon
Filament PHP Blade UI Components Visually Explained
Favicon
Filament Context Menu
Favicon
How to Extend a Filament Resource
Favicon
Linkeeper - Lesson 02 - Start playing with Filament
Favicon
Linkeeper - Lesson 01 - Installation
Favicon
Filament has SPA mode!
Favicon
Access parent component value from the Repeater in Filament
Favicon
Filament v3 - Multi-tenancy form component scoping

Featured ones: