README

RTL & Dark Mode Supported 🎉

If you want Filament field to choose and select an Image from a group of images with a Radio button This is Image Radio button to replacing traditional radio buttons with images selection.

Installation

You can install the package via composer:

composer require alkoumi/filament-image-radio-button

for fiament 4

1- create custom theme Filament Docs

2- then add

@source '../../../../vendor/alkoumi/filament-image-radio-button/resources/views/**/*.blade.php';

to the created theme.

3- Then register the theme in your xxxPanelProvider ->viteTheme('resources/css/filament/main/theme.css')

4- Then npm run build

Important

1- OPTIONS

The radio buttom has options then the scenario Here is you have Model Report and you want to choose a design of a report

so options here must return return Report::pluck('file', 'id')->toArray(); the options will be like

[ 1 => report1.jpg , 2 => report2.jpg] then the user will choose the design.

2- Images

You must define where you stored the images in filesystems disks somthing like local or public so in this example I am using ->disk('reports') So the component can find the images files

    'local' => [
        'driver' => 'local',
        'root' => storage_path('app/private'),
        'serve' => true,
        'throw' => false,
    ],

    'public' => [
        'driver' => 'local',
        'root' => storage_path('app/public'),
        'url' => env('APP_URL') . '/storage',
        'visibility' => 'public',
        'throw' => false,
    ],

    'reports' => [
        'driver' => 'local',
        'root' => storage_path('app/public/reports'),
        'url' => env('APP_URL') . '/reports',
        'visibility' => 'public',
        'throw' => false,
    ],

Usage in basic scenario

use Alkoumi\FilamentImageRadioButton\Forms\Components\ImageRadioGroup;

ImageRadioGroup::make('report_id')
                    ->disk('reports')
                    ->options(fn () => Report::pluck('file', 'id')->toArray()),

Usage in advanced scenario

use Alkoumi\FilamentImageRadioButton\Forms\Components\ImageRadioGroup;

ImageRadioGroup::make('report_id')
                    ->animation(true)
                    ->required()
                    ->label(__('Report Design'))
                    ->disk('reports')
                    ->options(fn (Get $get) => Report::whereType($get('type_id'))->pluck('file', 'id')->toArray())
                    ->afterStateUpdated(fn(Get $get, Set $set, ?string $state) => $set('reportdesign', ['report' => Report::find($state), 'date' => explode(' ', $get('report_date'))[0]])) 
                    ->live(),

Screenshots

Changelog

Please see CHANGELOG for more information on what has changed recently.

Contributing

Please see CONTRIBUTING for details.

Security Vulnerabilities

Please review our security policy on how to report security vulnerabilities.

Credits

• Mohamed alkoumi
• All Contributors

License

The MIT License (MIT). Please see License File for more information.