README

使用标签页引导用户完成任务的多个步骤向导小部件。基于lukepzak的表单向导（使用标签页）（见http://bootsnipp.com/snippets/featured/form-wizard-using-tabs）。

安装

通过以下方式安装此扩展：通过composer。

运行以下命令：

php composer.phar require --prefer-dist drsdre/yii2-wizardwidget "*"

或在您的composer.json文件的require部分添加以下内容：

"drsdre/yii2-wizardwidget": "*"

向导配置

• id: 字符串 向导小部件的html id
• steps: 数组 向导步骤的定义。数组键将用作步骤的超链接。

每个步骤可以有以下参数

• title: 字符串（必需） 步骤标题（当鼠标悬停在步骤图标上时显示）
• icon: 字符串（必需） 步骤图标代码（见Glyphicon或Font awesome代码）
• content: 字符串（必需） 步骤页面的HTML内容
• skippable: 布尔值（可选） 允许跳过步骤
• buttons: 数组（可选） 每个步骤的按钮配置
• complete_content: 字符串（可选） 完成步骤的HTML内容
• start_step: 字符串（可选） 向导初始化时的起始步骤

在每一步可以配置四个不同的按钮（按钮的显示取决于步骤在序列中的位置）

• prev:（在第一个步骤上不显示）
• next:（在最后一个步骤上不显示）
• skip:（当skippable被设置时显示）
• save:（在最后一个步骤上显示）

每个按钮可以配置为

• title: 字符串（可选） 按钮上显示的标题
• options: 数组（可选） HTML选项（见Yii2 HTML辅助器文档）

或

• html: 字符串（可选） 使用HTML代码添加您自己的按钮定义（例如，在步骤后保存数据）

用法

扩展安装后，在您的代码中使用它，如下所示：

<?php
$wizard_config = [
	'id' => 'stepwizard',
	'steps' => [
		1 => [
			'title' => 'Step 1',
			'icon' => 'glyphicon glyphicon-cloud-download',
			'content' => '<h3>Step 1</h3>This is step 1',
			'buttons' => [
				'next' => [
					'title' => 'Forward', 
					'options' => [
						'class' => 'disabled'
					],
				 ],
			 ],
		],
		2 => [
			'title' => 'Step 2',
			'icon' => 'glyphicon glyphicon-cloud-upload',
			'content' => '<h3>Step 2</h3>This is step 2',
			'skippable' => true,
		],
		3 => [
			'title' => 'Step 3',
			'icon' => 'glyphicon glyphicon-transfer',
			'content' => '<h3>Step 3</h3>This is step 3',
		],
	],
	'complete_content' => "You are done!", // Optional final screen
	'start_step' => 2, // Optional, start with a specific step
];
?>

<?= \drsdre\wizardwidget\WizardWidget::widget($wizard_config); ?>