README

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

安装

通过以下方式安装此扩展是首选方法：通过 composer。

运行以下命令之一

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

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

"bogdik/yii2-wizardwidget": "*"

向导配置

• id: 字符串 向导小部件的HTML id
• noInitNext: 布尔值 禁用事件下一个按钮
• noInitPrev: 布尔值 禁用事件上一个按钮
• noInitSave: 布尔值 禁用事件保存按钮
• steps: 数组 向导步骤的定义。数组键将被用作步骤的超链接。

每个步骤可以有以下参数

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

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

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

每个按钮可以配置为

• title: 字符串（可选） 在按钮上显示的标题
• options: 数组（可选） HTML选项（见 Yii2 HTML helper documentation）

或

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