flatroy / nova-progressbar-field
A Laravel Nova progress bar field.
Installs: 39 561
Dependents: 1
Suggesters: 0
Security: 0
Stars: 8
Watchers: 1
Forks: 4
Open Issues: 2
Language:Vue
Requires
- php: ^7.4|^8.0
README
This package allows you to add progressbar fields to your resources and dashboards in Nova.
It basically takes a field with a decimal value between 0 and 1 and shows it as a percentage progress bar.
To edit a field, we recommend using the standard Number (\Laravel\Nova\Fields\Number) field.
DISCLAIMER:
This package is still work in progress. Feel free to help improve it.
Requirements
Installation
Just run:
composer require flatroy/nova-progressbar-field
After this the setup will be complete, you can use the components listed here.
Basic Usage
// in App\Nova\User ... use Flatroy\FieldProgressbar\FieldProgressbar; use Laravel\Nova\Fields\Number; ... /** * Get the fields displayed by the resource. * * @param \Laravel\Nova\Http\Requests\NovaRequest $request * @return array */ public function fields(NovaRequest $request) { return [ Number::make(__('Score'), 'score') ->min(0.01) ->max(1) ->step(0.01) ->onlyOnForms(), FieldProgressbar::make(__('Score'), 'score') ->sortable(), ]; }
Advanced Options
Custom color
public function cards(NovaRequest $request) { return [ FieldProgressbar::make('Awesomeness') ->options([ 'color' => '#FFEA82', ]), ]; }
Animate Bar Color A -> B
public function cards(NovaRequest $request) { return [ FieldProgressbar::make('Awesomeness') ->options([ 'fromColor' => '#FFEA82', 'toColor' => '#40BF55', 'animateColor' => true, ]), ]; }
Custom text and hide field label
public function cards(NovaRequest $request) { return [ FieldProgressbar::make('Awesomeness') ->hideLabel() ->subtitleInDetail('custom subtitle'), ]; }
Custom width (small, medium or large)
public function cards(NovaRequest $request) { return [ FieldProgressbar::make('Awesomeness') ->options([ 'width' => 'medium', ]), ]; }
Feel free to come with suggestions for improvements.
Packages based on this package: nova-progressbar-field by Signifly