项目作者: H-Gh

项目描述 :
Using this library, You can add widgets which have, on/off button, label, description, icon and unit.
高级语言: PHP
项目地址: git://github.com/H-Gh/yii-advance-input.git
创建时间: 2019-07-10T11:30:36Z
项目社区:https://github.com/H-Gh/yii-advance-input

开源协议:MIT License

下载


Yii advance input

Using this library, You can add widgets which have, on/off button, label, description, icon and unit.

help

MIT Version Code size

Usage

  1. composer require hgh/yii-advance-input

Widgets

There are 4 widget. There are common and specific options that widgets can use them that we will see them in future.

Text

This widget will provide a HTML input tag with type of text.

usage

  1. <?php
  2. echo Text::widget([
  3. "name" => "test-name"
  4. ]);
  5. ?>

Checkbox

This widget will provide a HTML input tag with type of checkbox.

  1. <?php
  2. echo Checkbox::widget([
  3. "name" => "test-name"
  4. ]);
  5. ?>

Dropdown

This widget will provide a HTML select tag.
This widget needs another required option which is called items. The items array is a map for select datalist. In another word, key of array elements will be value of option tag and value of array elements will be option tag value. See bellow:

  1. <?php
  2. echo Dropdown::widget([
  3. "name" => "test-name",
  4. "items" => [
  5. "option1" => "value1",
  6. "option2" => "value2"
  7. ]
  8. ]);
  9. ?>

will produce:

  1. <select id="test-name" name="test-name">
  2. <option value="option1">value1</option>
  3. <option value="option2">value2</option>
  4. </select>

Textarea

This widget will provide a HTML textarea tag.

  1. <?php
  2. echo Textarea::widget([
  3. "name" => "test-name"
  4. ]);
  5. ?>

General options list

Main common options that all widgets can use is listed below.

Dropdown options

Options

name

The main name of input which will place into name attribute of input.

PHP
  1. <?php
  2. echo Text::widget([
  3. "name" => "test-name"
  4. ]);
  5. ?>
Preview

Just input


icon

optional
The icon class which will appear in a box right before input. This is a class attribute which will add to a i element.

PHP
  1. <?php
  2. echo Text::widget([
  3. "name" => "test-name",
  4. "icon" => "fas fa-key"
  5. ]);
  6. ?>
Preview

Input with icon


unit

Every input will accept specific values. Using this option, a unit box will append to input.

PHP
  1. <?php
  2. echo Text::widget([
  3. "name" => "test-name",
  4. "icon" => "fas fa-key",
  5. "unit" => "$"
  6. ]);
  7. ?>
Preview

with unit


checkbox

Using this option, you provide an option which allows users to not filling input. If checkbox is not checked, an disabled attribute will add to input.

Notice
unit options will not work on this type of widget.

PHP
  1. <?php
  2. echo Text::widget([
  3. "name" => "test-name",
  4. "icon" => "fas fa-key",
  5. "unit" => "$",
  6. "checkbox" => true
  7. ]);
  8. ?>
Preview

with checkbox


label

A label for input.

PHP
  1. <?php
  2. echo Text::widget([
  3. "name" => "test-name",
  4. "icon" => "fas fa-key",
  5. "unit" => "$",
  6. "checkbox" => true,
  7. "label" => "Price"
  8. ]);
  9. ?>
Preview

with label


description

If you want to describe what the field is for, you can use this option. Using this option, an div will add after label.

PHP
  1. <?php
  2. echo Text::widget([
  3. "name" => "test-name",
  4. "icon" => "fas fa-key",
  5. "unit" => "$",
  6. "checkbox" => true,
  7. "label" => "Price",
  8. "description" => "How much does it cost?"
  9. ]);
  10. ?>
Preview

with description


wrapperOptions

A map of attributes and their values for wrapper.

PHP
  1. <?php
  2. echo Text::widget([
  3. "name" => "test-name",
  4. "icon" => "fas fa-key",
  5. "unit" => "$",
  6. "checkbox" => true,
  7. "label" => "Price",
  8. "description" => "How much does it cost?",
  9. "wrapperOptions" => ["style" => "border: 2px dashed red; padding : 10px;"]
  10. ]);
  11. ?>
Preview

with wrapperOptions


inputOptions

A map of attributes and their values for input.

PHP
  1. <?php
  2. echo Text::widget([
  3. "name" => "test-name",
  4. "icon" => "fas fa-key",
  5. "unit" => "$",
  6. "checkbox" => true,
  7. "label" => "Price",
  8. "description" => "How much does it cost?",
  9. "wrapperOptions" => ["style" => "border: 2px dashed red; padding : 10px;"],
  10. "inputOptions" => ["style" => "border: 2px dashed green; background: yellow;"]
  11. ]);
  12. ?>
Preview

with inputOptions


checkboxOptions

A map of attributes and their values for checkbox input.

Notice
Checkbox use bootstrap toggle. All options of Bootstrap Toggle is supported. Visit Bootstrap Toggle.

PHP
  1. <?php
  2. echo Text::widget([
  3. "name" => "test-name",
  4. "icon" => "fas fa-key",
  5. "unit" => "$",
  6. "checkbox" => true,
  7. "label" => "Price",
  8. "description" => "How much does it cost?",
  9. "checkboxOptions" => ["data-on" => "enabled", "data-off" => "disabled"]
  10. ]);
  11. ?>
Preview

with checkboxOptions


model and form

These widgets can also receive Yii2 models. By passing your model into this option, elements will generate using form option that you provided. form option must be an instance of ActiveForm of Yii2. For more information visit: ActiveForm

Notice
By using model option, label will generate automatically. It use attributeLabel of property of model. If there is no label, label box will not generate. Also to prevent of label generation even if attributeLabel in model exists, set label option to false.

PHP
  1. <?php
  2. $form = ActiveForm::begin();
  3. $user = new User();
  4. $user->username = "john.smith";
  5. echo Text::widget([
  6. "name" => "username",
  7. "icon" => "fas fa-user",
  8. "model" => $user,
  9. "form" => $form
  10. ]);
  11. ?>
Preview

With model


rtl

This widgets, also support rtl pages. To use these as a rtl widget, just set rtl option true;

PHP
  1. <?php
  2. echo Text::widget([
  3. "name" => "test-name",
  4. "icon" => "fas fa-key",
  5. "unit" => "$",
  6. "checkbox" => true,
  7. "label" => "Price",
  8. "description" => "How much does it cost?",
  9. "checkboxOptions" => ["data-on" => "enabled", "data-off" => "disabled"],
  10. "rtl" => true
  11. ]);
  12. ?>
Preview

With model


items

The items array is a map for select datalist. In another word, key of array elements will be value of option tag and value of array elements will be option tag value

Notice
Checkbox use bootstrap toggle. All options of Bootstrap Toggle is supported. Visit Bootstrap Toggle.

PHP
  1. <?php
  2. echo Dropdown::widget([
  3. "name" => "test-name",
  4. "icon" => "fas fa-key",
  5. "unit" => "$",
  6. "checkbox" => true,
  7. "label" => "Price",
  8. "description" => "How much does it cost?",
  9. "checkboxOptions" => ["data-on" => "enabled", "data-off" => "disabled"],
  10. "items" => ["option1" => "value1", "option2" => "value2"]
  11. ]);
  12. ?>
Preview

Right to left