alkurn/yii2-stepform

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

安装: 99

依赖项: 0

建议者: 0

安全: 0

星星: 0

关注者: 2

分支: 0

公开问题: 0

类型:yii2-extension

dev-master 2018-03-15 13:24 UTC

This package is not auto-updated.

Last update: 2024-09-21 09:25:20 UTC


README

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

安装

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

运行以下命令:

php composer.phar require --prefer-dist alkurn/yii2-stepform "*"

"alkurn/yii2-stepform": "*"

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

Stepform 配置

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

每个步骤可以有以下参数

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

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

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

每个按钮都可以配置以下内容

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

<?= \alkurn\stepform\stepform::widget($wizard_config); ?>