hgh/yii-advance-input

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

Maintainers

Details

github.com/H-Gh/yii-advance-input

Homepage

Source

Issues

Installs: 2

Dependents: 0

Suggesters: 0

Security: 0

Stars: 1

Watchers: 1

Forks: 1

Open Issues: 0

1.0.3 2019-07-11 04:02 UTC

Requires

MIT d066b57105930433543a0d666a5a03cb9619b9e4

  • Hamed Ghasempour <hamedghasempour.woop@gmail.com>

phpjqueryjavascriptyii2

This package is auto-updated.

Last update: 2024-12-11 15:49:14 UTC

README

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

help

MIT Version Code size

Usage

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

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

Checkbox

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

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

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:

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

will produce:

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

Textarea

This widget will provide a HTML textarea tag.

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

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
<?php  
echo Text::widget([  
  "name" => "test-name"  
]);  
?>
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
<?php  
echo Text::widget([  
  "name" => "test-name",  
  "icon" => "fas fa-key"  
]);  
?>
Preview

Input with icon

unit

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

PHP
<?php  
echo Text::widget([  
  "name" => "test-name",  
  "icon" => "fas fa-key",  
  "unit" => "$"  
]);  
?>
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
<?php
echo Text::widget([
    "name"     => "test-name",
    "icon"     => "fas fa-key",
    "unit"     => "$",
    "checkbox" => true
]);
?>
Preview

with checkbox

label

A label for input.

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

with description

wrapperOptions

A map of attributes and their values for wrapper.

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;"]
]);
?>
Preview

with wrapperOptions

inputOptions

A map of attributes and their values for input.

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

With model

rtl

This widgets, also support rtl pages. To use these as a rtl widget, just set rtl option 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
]);
?>
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
<?php
echo Dropdown::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"],
    "items"           => ["option1" => "value1", "option2" => "value2"]
]);
?>
Preview

Right to left