README

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

安装

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

运行以下命令之一：

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

或者

"drsdre/yii2-wizardwidget": "*"

将以下内容添加到您的composer.json文件的require部分。

向导配置

• 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); ?>