README

为 Bootstrap 5 设计的 Yii2 表单向导小部件

功能

• Bootstrap 5
• 客户端验证，可以选择单独验证每个步骤

安装

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

运行以下命令之一

php composer.phar require --prefer-dist sandritsch91/yii2-form-wizard

或者添加

"sandritsch91/yii2-form-wizard": "*"

到您的 composer.json 文件的 require 部分

使用方法

use sandritsch91\yii2-form-wizard\FormWizard;

echo FormWizard::widget([
    // required
    'model' => $model,                                                          // The model to be used in the form
    'tabOptions' => [                                                           // These are the options for the Bootstrap Tab widget                                        
        'items' => [
            [
                'label' => 'Step 1',                                            // The label of the tab, if omitted, a default-label will be used (Step 1, Step 2, ...)
                'content' => $this->render('_step1', ['model' => $model]),      // Either the content of the tab
            ],
            [
                'label' => 'Step 2',
                'view' => '/test/_step2',                                       // or a view to be rendered. $model and $form are passed to the view
                'params' => ['a' => 1, 'b' => 2]                                // Pass additional parameters to the view
            ]
        ],
        'navType' => 'nav-pills'
    ],
    // optional
    'validateSteps' => [                                                        // Optional, pass the fields to be validated for each step.                 
        ['name', 'surname'],
        [],                                                                     // Leave array empty if no validation is needed  
        ['email', 'password']
    ],
    'options' => [],                                                            // Wizard-container html options
    'formOptions' => [],                                                        // Form html options
    'buttonOptions' => [                                                        // Button html options
        'previous' => [
            'class' => ['btn', 'btn-secondary'],
            'data' => [
                'formwizard' => 'previous'                                      // If you change this, make sure the clientOptions match
            ]
        ],
        'next' => [...],
        'finish' => [...]
    ],
    'clientOptions' => [                                                        // Client options for the form wizard, if you need to change them
        // 'finishSelector' => '...',
        // 'nextSelector' => '...',
        // 'previousSelector' => '...',
        // 'keepPosition' => true                                               // Keep scroll position on step change.
                                                                                // Set to false to disable, or pass a selector if you have a custom scroll container.
                                                                                // Defaults to true.
    ],
    'clientEvents' => [                                                         // Client events for the form wizard
        // 'onNext' => 'function () {...}',
        // 'onPrevious' => 'function () {...}',
        // 'onFinish' => 'function (){...}'
    ]
]);

贡献

欢迎贡献。

如果您有任何问题、想法、建议或错误，请提交一个问题。

测试

此软件包使用 codeception 进行测试。要运行测试，请运行以下命令

php.exe .\vendor\bin\codecept run 运行所有测试套件

单元测试

在存储库的根目录中运行 php.exe .\vendor\bin\codecept run Unit。

功能测试

在存储库的根目录中运行 php.exe .\vendor\bin\codecept run Functional。

验收测试

要运行验收测试，需要满足一些要求

对于 Windows：

• 安装 Java 运行时环境
• 安装 Node.js
• 安装 selenium-standalone: npm install -g selenium-standalone
• 启动 selenium-standalone: selenium-standalone install && selenium-standalone start
• 在服务器或通过 ./yii serve 在本地托管 yii2 应用程序
  • 将此插件作为依赖项添加到您的 composer.json 并更新依赖项
  • 站点必须可通过 http://formwizard.com/ 访问
  • 在 SiteController 中添加一个 action actionTest，如下所述
  • 此操作必须返回一个视图文件，如下所述
  • 运行 php.exe .\vendor\bin\codecept run Acceptance

对于 Linux
以前从未做过，但我认为它与 Windows 设置相似。

SiteController 中的操作

public function actionTest(): string
{
    include __DIR__ . '/../vendor/sandritsch91/yii2-widget-form-wizard/tests/Support/Data/models/User.php';

    $model = new User();

    if (Yii::$app->request->post() && $model->load(Yii::$app->request->post()) && $model->validate()) {
        return 'success';
    }

    return $this->render('test', [
        'model' => new User()
    ]);
}

操作的返回视图

/** @var User $model */

use sandritsch91\yii2\formwizard\FormWizard;
use sandritsch91\yii2\formwizard\tests\Support\Data\models\User;

$wizard = FormWizard::widget([
    'model' => $model,
    'tabOptions' => [
        'options' => [
            'class' => 'mb-3'
        ],
        'items' => [
            [
                'label' => 'Step 1',
                'view' => '@app/vendor/sandritsch91/yii2-widget-form-wizard/tests/Support/Data/views/site/step1',
                'linkOptions' => [
                    'id' => 'step1-link',,
                    'params' => [
                        'test' => 'some test variable'
                    ]
                ]
            ],
            [
                'label' => 'Step 2',
                'view' => '@app/vendor/sandritsch91/yii2-widget-form-wizard/tests/Support/Data/views/site/step2',
                'linkOptions' => [
                    'id' => 'step2-link',
                ]
            ],
            [
                'label' => 'Step 3',
                'view' => '@app/vendor/sandritsch91/yii2-widget-form-wizard/tests/Support/Data/views/site/step3',
                'linkOptions' => [
                    'id' => 'step3-link',
                ]
            ]
        ],
        'navType' => 'nav-pills'
    ],
    'validateSteps' => [
        ['firstname', 'lastname'],
        ['username', 'password', 'password_validate'],
        ['email']
    ],
    'clientOptions' => [
        'keepPosition' => true
    ]
]);

echo \yii\helpers\Html::tag('div', $wizard, [
    'class' => 'col-4'
]);

初始安装后，您只需启动 selenium-standalone 服务器 selenium-standalone start 并在存储库的根目录中运行测试 php.exe .\vendor\bin\codecept run Acceptance。

如果您不想设置应用程序，只需通过运行 php.exe .\vendor\bin\codecept run Unit,Functional 运行单元测试和功能测试，我可以在您提交拉取请求后修改并运行验收测试。