Ranting field for the Filament forms
Installation
You can install the package via composer:
composer require yepsua/filament-rating-field
Optionally, you can publish the views using
php artisan vendor:publish --tag="filament-rating-field-views"
Usage
use Yepsua\Filament\Forms\Components\Rating
...
protected function getFormSchema(): array
{
return [
...
Rating::make('rating')
...
];
}
...
By default the range values goes from 1 to 5 and the icon displayed is heroicon-o-star
The rating fields provides several option to customize its behavior. Next some of the more used for:
Disabled
use Yepsua\Filament\Forms\Components\Rating
...
protected function getFormSchema(): array
{
return [
...
Rating::make('rating')
->disabled()
...
];
}
...
Min and max values
use Yepsua\Filament\Forms\Components\Rating
...
protected function getFormSchema(): array
{
return [
...
Rating::make('rating')
->min(5)
->max(10)
...
];
}
...
Custom icons and colors
use Yepsua\Filament\Forms\Components\Rating
...
protected function getFormSchema(): array
{
return [
...
Rating::make('rating')
->icons('heroicon-o-moon', 'heroicon-s-sun')
->color('orange')
...
];
}
...
Custom size
use Yepsua\Filament\Forms\Components\Rating
...
protected function getFormSchema(): array
{
return [
...
Rating::make('rating')
->size(10)
...
];
}
...
No mouse effects
Disable the mouseenter and mouseleave animation.
use Yepsua\Filament\Forms\Components\Rating
...
protected function getFormSchema(): array
{
return [
...
Rating::make('rating')
->effects(false)
...
];
}
...
Clearable
Allow the user to clear the rating selection.
use Yepsua\Filament\Forms\Components\Rating
...
protected function getFormSchema(): array
{
return [
...
Rating::make('rating')
->clearable()
->clearIconColor('red')
->clearIconTooltip('Clear')
...
];
}
...
Cursors
The value of the cursor is based on the Tailwind cursor. The prefix cursor- its not required in the value.
use Yepsua\Filament\Forms\Components\Rating
...
protected function getFormSchema(): array
{
return [
...
Rating::make('rating')
->cursor('default')
->clearIconTooltip('none')
...
];
}
...
Tooltips
use Yepsua\Filament\Forms\Components\Rating
...
protected function getFormSchema(): array
{
return [
...
Rating::make('rating')
->options([
'Acceptable',
'Good',
'Very Good',
'Excellent',
])
...
];
}
...
Field options.
- ->color(): Set the icon colors for the rating field.
- ->disabledColor(): Set the icon color when the field is disabled.
- ->clearIconColor(): Set the color for the clear icon.
- ->icon(): Set the icon for the default items.
- ->selectedIcon(): Set the solid icon for the selected items.
- ->clearIcon(): Set the icon for the clear action.
- ->min(): Set the min value for the rating field. Default: 1
- ->max(): Set the max value for the rating field. Default: 5
- ->width(): Set the width value for each item in the field: Default: 6
- ->height(): Set the height value for each item in the field: Default: 6
- ->size(): Set the same value for the width and height properties.
- ->effects(): Enable\Disable the mouseenter and mouseleave effects. Default: true (enabled)
- ->clearable(): Add a extra icon at the end of the rating icons. Default: false
- ->cursor(): Set the default cursor
- ->disabledCursor(): Set the cursor to be displayed when the field is disabled
- ->clearIconTooltip(): Set the tooltip for the clear icon.
You can review the default value for the options above and others in the class App\Forms\Components\Rating
Testing
composer test
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
License
The MIT License (MIT). Please see License File for more information.
145 Sep 20, 2022
16 Dec 20, 2022
82 Dec 31, 2022
151 Dec 27, 2022
1 May 17, 2022
1 Feb 10, 2022
12 Dec 15, 2022
16 Sep 7, 2022
2 Aug 6, 2022
12 Apr 25, 2022
10 Jul 10, 2022
4 Jan 3, 2022
214 Nov 21, 2022
1 Feb 7, 2022
1 May 27, 2022
3 Aug 19, 2022
3 Dec 15, 2022
135 Dec 22, 2022