README

使用这个库，您可以添加具有开/关按钮、标签、描述、图标和单位的控件。

用法

composer require hgh/yii-advance-input

控件

共有4个控件。控件可以使用一些常见和特定选项，我们将在未来看到它们。

文本
复选框
下拉菜单
文本区域

文本

此控件将提供一个具有text类型的HTML input标签。

用法

<?php
echo Text::widget([
    "name" => "test-name"
]);
?>

复选框

此控件将提供一个具有checkbox类型的HTML input标签。

<?php
echo Checkbox::widget([
    "name" => "test-name"
]);
?>

下拉菜单

此控件将提供一个HTML select标签。
此控件需要另一个必需的选项，称为items。这个items数组是select datalist的映射。换句话说，array元素的键将是option标签的value，而array元素的值将是option标签的value。下面是一个例子

<?php
echo Dropdown::widget([
    "name"  => "test-name",
    "items" => [
        "option1" => "value1",
        "option2" => "value2"
    ]
]);
?>

将生成

<select id="test-name" name="test-name">
    <option value="option1">value1</option>
    <option value="option2">value2</option>
</select>

文本区域

此控件将提供一个具有textarea类型的HTML textarea标签。

<?php  
echo Textarea::widget([  
  "name" => "test-name"  
]);  
?>

通用选项列表

以下列出所有控件都可以使用的常用选项。

名称
图标
单位
复选框
标签
描述
包装器选项
输入选项
复选框选项
模型和表单
rtl

下拉菜单选项

items

选项

名称

输入的主要名称，将放置在输入的name属性中。

PHP

<?php  
echo Text::widget([  
  "name" => "test-name"  
]);  
?>

预览

图标

可选
在输入前显示的图标类。这是一个class属性，它将被添加到i元素中。

PHP

<?php  
echo Text::widget([  
  "name" => "test-name",  
  "icon" => "fas fa-key"  
]);  
?>

预览

单位

每个输入都将接受特定的值。使用此选项，将附加一个单位框到输入。

PHP

<?php  
echo Text::widget([  
  "name" => "test-name",  
  "icon" => "fas fa-key",  
  "unit" => "$"  
]);  
?>

预览

复选框

使用此选项，您提供一个选项，允许用户不填写输入。如果复选框未选中，则将添加disabled属性到input。

注意
此类型的控件中，unit选项将不起作用。

PHP

<?php
echo Text::widget([
    "name"     => "test-name",
    "icon"     => "fas fa-key",
    "unit"     => "$",
    "checkbox" => true
]);
?>

预览

描述

如果您想描述字段的作用，可以使用此选项。使用此选项，将在标签后添加一个div。

PHP

<?php
echo Text::widget([
    "name"        => "test-name",
    "icon"        => "fas fa-key",
    "unit"        => "$",
    "checkbox"    => true,
    "label"       => "Price",
    "description" => "How much does it cost?"
]);
?>

预览

包装器选项

包装器的属性和值的映射。

PHP

<?php
echo Text::widget([
    "name"           => "test-name",
    "icon"           => "fas fa-key",
    "unit"           => "$",
    "checkbox"       => true,
    "label"          => "Price",
    "description"    => "How much does it cost?",
    "wrapperOptions" => ["style" => "border: 2px dashed red; padding : 10px;"]
]);
?>

预览

输入选项

输入的属性和值的映射。

PHP

<?php
echo Text::widget([
    "name"           => "test-name",
    "icon"           => "fas fa-key",
    "unit"           => "$",
    "checkbox"       => true,
    "label"          => "Price",
    "description"    => "How much does it cost?",
    "wrapperOptions" => ["style" => "border: 2px dashed red; padding : 10px;"],
    "inputOptions"   => ["style" => "border: 2px dashed green; background: yellow;"]
]);
?>

预览

复选框选项

复选框输入的属性和值的映射。

注意
复选框使用Bootstrap Toggle。支持所有Bootstrap Toggle选项。请访问Bootstrap Toggle。

PHP

<?php
echo Text::widget([
    "name"            => "test-name",
    "icon"            => "fas fa-key",
    "unit"            => "$",
    "checkbox"        => true,
    "label"           => "Price",
    "description"     => "How much does it cost?",
    "checkboxOptions" => ["data-on" => "enabled", "data-off" => "disabled"]
]);
?>

预览

模型和表单

这些控件也可以接收Yii2 模型。通过将您的模型传递到此选项，将使用您提供的form选项生成元素。form选项必须是Yii2的ActiveForm实例。有关更多信息，请访问：ActiveForm

注意使用model选项时，将自动生成label。它使用model属性的attributeLabel。如果没有标签，则不会生成标签框。另外，为了防止即使模型中存在attributeLabel也生成标签，将label选项设置为false。

PHP

<?php
$form = ActiveForm::begin();
$user = new User();
$user->username = "john.smith";
echo Text::widget([
    "name"  => "username",
    "icon"  => "fas fa-user",
    "model" => $user,
    "form"  => $form
]);
?>

预览

rtl

此控件也支持rtl页面。要将其用作rtl控件，只需将rtl选项设置为true。

PHP

<?php
echo Text::widget([
    "name"            => "test-name",
    "icon"            => "fas fa-key",
    "unit"            => "$",
    "checkbox"        => true,
    "label"           => "Price",
    "description"     => "How much does it cost?",
    "checkboxOptions" => ["data-on" => "enabled", "data-off" => "disabled"],
    "rtl"             => true
]);
?>

预览

items

《items》数组是《select》标签的《datalist》映射。换句话说，数组元素的《key》将是《option》标签的《value》，数组元素的《value》将是《option》标签的《value》