Projects

github.com/youra-h

Select

@see PHP class

@see JavaScript

@see Google package

PHP

use yh\mdc\components\Select;
use yh\mdc\components\base\Vars;
 
echo Select::one('Select filled')
    ->setProperty([
        'height' => Vars::NORMAL,
        'items' => [
            10,
            20,
            30,
            40
        ],
    ])
    ->setOptions([
        'style' => 'margin-bottom: 10px'
    ])
    ->setId('select1')
    ->render();
 
echo Select::one('Select outlined')
    ->setProperty([
        'height' => Vars::NORMAL,
        'template' => Select::OUTLINED,
        'items' => [
            [
                'text' => 'Text 1',
                'icon' => 'favorite',
                'value' => 0
            ],
            [
                'text' => 'Text 2',
                'icon' => 'settings',
                'value' => 1
            ]
        ],
    ])
    ->setOptions([
        'style' => 'margin-bottom: 10px'
    ])
    ->setId('select2')
    ->render();
 
echo Select::one('Select label top')
    ->setProperty([
        'height' => Vars::SMALL,
        'template' => Select::OUTLINED,
        'labelTemplate' => Select::ALIGN_TOP,
        'items' => [
            [
                'text' => 'Text 1',
                'icon' => 'favorite',
                'value' => 0
            ],
            [
                'text' => 'Text 2',
                'icon' => 'settings',
                'value' => 1
            ]
        ],
    ])
    ->setOptions([
        'style' => 'margin-bottom: 10px'
    ])
    ->setId('select3')
    ->render();
 
echo Select::one('Select label left')
    ->setProperty([
        'height' => Vars::EXTRA_SMALL,
        'labelTemplate' => Select::ALIGN_LEFT,
        'items' => [
            [
                'text' => 'Text 1',
                'icon' => 'favorite',
                'value' => 0
            ],
            [
                'text' => 'Text 2',
                'icon' => 'settings',
                'value' => 1
            ]
        ],
    ])
    ->setOptions([
        'style' => 'margin-bottom: 10px'
    ])
    ->setId('select4')
    ->render();

JavaScript

app.controls.add('select1','select',[]);
app.controls.add('select2','select',[]);
app.controls.add('select3','select',[]);
app.controls.add('select4','select',[]);

Samples