README

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

安装

通过composer安装此扩展是首选方式。

运行

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

或添加

"coolanole/yii2-wizardwidget": "*"

到你的composer.json文件的require部分。

向导配置

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

每个步骤可以有以下参数

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

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

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

每个按钮都可以配置

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

或

• html: 字符串 optional 使用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
];
?>

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