Projects

github.com/youra-h

List item

@see PHP class

@see JavaScript

@see Google package

PHP

use yh\mdc\components\ListItem;
use yh\mdc\components\base\Vars;
 
echo ListItem::one([
    'heightItem' => Vars::NORMAL,
    'checkbox' => true,
    'header' => 'List 1',
    'items' => [
        [
            'text' => 'Item 1',
            'helper' => 'item helper',
            'meta' => 'button',
            'checked' => true
        ],
        [
            'text' => 'Item 2',
            'helper' => 'item helper',
            'separator' => true,
        ],
        [
            'text' => 'Item 3',
            'helper' => 'item helper',
        ]
    ]
])
    ->setOptions([
        'style' => 'margin-bottom: 10px'
    ])
    ->setId('list1')
    ->render();
 
echo ListItem::group([
    'items' => [
        [
            'heightItem' => Vars::NORMAL,
            'radio' => true,
            'header' => 'Group radio',
            'items' => [
                [
                    'text' => 'Item 1',
                    'helper' => 'item helper',
                    'checked' => true
                ],
                [
                    'text' => 'Item 2',
                    'separator' => true,
                ],
            ]
        ],
        [
            'heightItem' => Vars::LARGE,
            'single' => true,
            'header' => 'Group icon',      
            'items' => [
                [
                    'text' => 'Item 1',
                    'icon' => 'favorite'
                ],
                [
                    'text' => 'Item 2',
                    'icon' => 'settings'
                ],
            ]
        ],
        [
            'heightItem' => Vars::NORMAL,
            'avatar' => true,
            'header' => 'Group avatar',
            'items' => [
                [
                    'text' => 'Item 1',
                    'icon' => 'favorite'
                ],
                [
                    'text' => 'Item 2',
                    'icon' => 'settings'
                ],
            ]
        ]
    ]
]);
 

JavaScript

app.controls.add('list1','list',{"values":[1,2,3]});
app.controls.add('button1','button',[]);
app.controls.add('list-60e8253834bee','list',[]);
app.controls.add('list-60e8253834d9b','list',{"singleSelection":true});
app.controls.add('list-60e8253834f08','list',[]);
 
const list = app.controls.item('list1');
    list.listen('MDCList:action', event => {
        alert(event.detail.index);
    });
 
app.controls.item('button1').listen('click', () => {        
    const message = `list-value: ${list.value}\nlist-text: ${list.text}\nselected-index: ${list.selectedIndex}`;
    alert(message);
});

Samples