Skip to content

Razorsheep/nova-progressbar-card

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

25 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Nova ProgressBar Card

Latest Version on Packagist Total Downloads License

This package allows you to add progressbar cards to your resources and dashboards in Nova.

Example

DISCLAIMER:

This package is still work in progress. Feel free to help improve it.


Requirements


Installation

Just run:

composer require razorsheep/nova-progressbar-card

After this the setup will be complete and you can use the components listed here.


Basic Usage

// in App\Nova\Product
...
use Razorsheep\Nova\Cards\ProgressBar\ProgressBar;
...

/**
 * Get the cards available for the request.
 *
 * @param  \Illuminate\Http\Request  $request
 * @return array
 */
public function cards(Request $request)
{
    return [
        (new ProgressBar)->options(['title' => 'Translations', 'percentage' => 0.5]);
    ];
}

Advanced Options

Custom color

public function cards(Request $request)
{
    return [
        (new ProgressBar)->options([
            'title' => 'Translations',
            'percentage' => 0.5,
            'color' => '#123456',
        ]);
    ];
}

Animate Bar Color A -> B

public function cards(Request $request)
{
    return [
        (new ProgressBar)->options([
            'title' => 'Translations',
            'percentage' => 0.5,
            'colorFrom' => '#aaa',
            'colorTo' => '#bbb',
            'animateColor' => true,
        ]);
    ];
}

Stroke Width

public function cards(Request $request)
{
    return [
        (new ProgressBar)->options([
            'title' => 'Translations',
            'percentage' => 0.5,
            'strokeWidth' => 8,
        ]);
    ];
}

Semi Circle Type Progress Bar

public function cards(Request $request)
{
    return [
        (new ProgressBar)->options([
            'title' => 'Translations',
            'percentage' => 0.5,
            'type' => 'semi-circle',
        ]);
    ];
}

Feel free to come with suggestions for improvements.