PHP code example of genealabs / laravel-multi-step-progressbar

1. Go to this page and download the library: Download genealabs/laravel-multi-step-progressbar library. Choose the download type require.

2. Extract the ZIP file and open the index.php.

3. Add this code to the index.php.
    
        
<?php
require_once('vendor/autoload.php');

/* Start to develop here. Best regards https://php-download.com/ */

    

genealabs / laravel-multi-step-progressbar example snippets


    <x-multi-step-progressbar
        :model="$record"
        :stepData="$stepData"
    ></x-multi-step-progressbar>

$stepData = collect()
    ->push((new ProgressbarItem)->fill([
        "step" => 1,
        "url" => route("wizards.record-analysis.edit", ["record" => $record, "step" => "1"]),
        "title" => "Create Document",
        "description" => "",
        "canJumpAhead" => true,
    ]))
    ->push((new ProgressbarItem)->fill([
        "step" => 2,
        "url" => route("wizards.record-analysis.edit", ["record" => $record, "step" => "2"]),
        "title" => "Search Sources",
        "description" => "",
        "canJumpAhead" => (bool) $record->title,
    ]))
    ->push((new ProgressbarItem)->fill([
        "step" => 3,
        "url" => route("wizards.record-analysis.edit", ["record" => $record, "step" => "3"]),
        "title" => "Create Source",
        "description" => "",
        "canJumpAhead" => ($record->source || $record->wherein),
    ]))
    // ...



return [
    "sprites" => [
        "hidden" => [
            "bar" => "",
        ],
        // not previously visited step
        "unvisited" => [
            "bar" => asset("images/assets/progress-bar/unactivated-bar.png"),
            "middle-pip" => asset("images/assets/progress-bar/unactivated-middle.png"),
            "last-pip" => asset("images/assets/progress-bar/unactivated-end.png"),
        ],
        // previously visited step
        "visited" => [
            "first-pip" => asset("images/assets/progress-bar/activated-start.png"),
            "bar" => asset("images/assets/progress-bar/activated-bar.png"),
            "middle-pip" => asset("images/assets/progress-bar/activated-middle.png"),
            "last-pip" => asset("images/assets/progress-bar/activated-end.png"),
        ],
        // current step, and previously visited
        "active" => [
            "first-pip" => asset("images/assets/progress-bar/active-current-start.png"),
            "middle-pip" => asset("images/assets/progress-bar/active-activated-middle.png"),
            "last-pip" => asset("images/assets/progress-bar/active-current-end.png"),
        ],
        // current and max visited step
        "max-active" => [
            "first-pip" => asset("images/assets/progress-bar/active-current-start.png"),
            "middle-pip" => asset("images/assets/progress-bar/active-current-middle.png"),
            "last-pip" => asset("images/assets/progress-bar/active-current-end.png"),
        ],
        // max step, not current, previously visited
        "max-visited" => [
            "middle-pip" => asset("images/assets/progress-bar/activated-current-middle.png"),
            "last-pip" => asset("images/assets/progress-bar/activated-current-end.png"),
        ],
    ]
];