Projects

github.com/youra-h

Textfield

@see PHP class

@see JavaScript

@see Google package

PHP

use yh\mdc\components\base\Vars;
use yh\mdc\components\TextField;
use yh\mdc\components\ItemIconButton;
 
echo TextField::one('Phone')
    ->setProperty([
        'height' => Vars::NORMAL,
        'helper' => 'Required entry phone in the format +7 999 999 99 99',
        'required' => true,
        'useNativeMessage' => true,
        'buttonClear' => true,
        'icons' => [
            ['icon' => 'phone', 'position' => ItemIconButton::LEADING, 'role' => 'button']
        ],
        'prefix' => '+7',
        'suffix' => '🤡'
    ])
    ->setId('TextField1')
    ->render();
 
echo '<br>';
 
echo TextField::one('TextField outlined')
    ->setProperty([
        'height' => Vars::NORMAL,
        'template' => TextField::OUTLINED,
        'helper' => 'Min length 6 symbols',
        'minLength' => 6,
        'useNativeMessage' => true,
        'icons' => [
            ['icon' => 'visibility', 'role' => 'button', 'toggle' => 'visibility_off']
        ],
    ])
    ->setId('TextField2')
    ->render();
 
echo '<br>';
 
echo TextField::one('TextField label top')
    ->setProperty([
        'height' => Vars::SMALL,
        'template' => TextField::OUTLINED,
        'labelTemplate' => TextField::ALIGN_TOP,
        'labelSize' => Vars::LARGE,
        'buttonClear' => true
    ])
    ->setId('TextField3')
    ->render();
 
echo '<br>';
 
echo TextField::one('TextField label left')
    ->setProperty([
        'height' => Vars::EXTRA_SMALL,
        'labelTemplate' => TextField::ALIGN_LEFT,
        'labelSize' => Vars::EXTRA_SMALL,
        'buttonClear' => true
    ])
    ->setId('TextField4')
    ->render();

JavaScript

app.controls.add('textField-60e88af6c261e-phone', 'iconButton', []);
app.controls.add('textField-60e88af6c261e-clear', 'iconButton', []);
app.controls.add('TextField1', 'textField', {
    "trailingIcon.clear": true, "required": true,
    "helperMessage.useNativeMessage": true
});
app.controls.add('textField-60e88af6c34e9-visibility', 'iconButton', []);
app.controls.add('TextField2', 'textField', { "minLength": 6, "helperMessage.useNativeMessage": true });
app.controls.add('textField-60e88af6c3562-clear', 'iconButton', []);
app.controls.add('TextField3', 'textField', { "trailingIcon.clear": true });
app.controls.add('textField-60e88af6c36f3-clear', 'iconButton', []);
app.controls.add('TextField4', 'textField', { "trailingIcon.clear": true });
 
let TextField2 = app.controls.item("TextField2");
TextField2.minLength = 5;
TextField2.trailingIcon.click(function () {
    if (this.parent.type === "text") {
        this.parent.type = "password";
    } else {
        this.parent.type = "text";
    }
    this.parent.focus();
}, TextField2.trailingIcon);

Samples