README

安装

composer require genealabs/laravel-multi-step-progressbar

实现

进度条通过Blade组件实现

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

模型

$record 模型代表存储在各个表单中提交的信息的模型。它将被传递到在 $stepData 中定义的每个步骤的视图中，并可用于在每个步骤中填写表单。它具体包含什么完全取决于您。

步骤数据

$stepData 是 ProgressbarItem 模型实例的集合。

数据点

每个步骤都有以下属性

• 步骤：步骤的编号，按顺序呈现。
• URL：加载给定步骤的视图的URL。
• 标题：将在进度条中显示的活动步骤上显示。留空不显示任何内容。
• 描述：将在进度条中显示的活动步骤上显示。留空不显示任何内容。
• 可以跳过：指定用户是否可以在填写完毕后跳转到该步骤。

集合

您可以根据以下方式创建此集合

$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),
    ]))
    // ...

配置

<?php

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