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"),
],
]
];