Server : Apache/2.4.41 (Ubuntu) System : Linux absol.cf 5.4.0-198-generic #218-Ubuntu SMP Fri Sep 27 20:18:53 UTC 2024 x86_64 User : www-data ( 33) PHP Version : 7.4.33 Disable Function : pcntl_alarm,pcntl_fork,pcntl_waitpid,pcntl_wait,pcntl_wifexited,pcntl_wifstopped,pcntl_wifsignaled,pcntl_wifcontinued,pcntl_wexitstatus,pcntl_wtermsig,pcntl_wstopsig,pcntl_signal,pcntl_signal_get_handler,pcntl_signal_dispatch,pcntl_get_last_error,pcntl_strerror,pcntl_sigprocmask,pcntl_sigwaitinfo,pcntl_sigtimedwait,pcntl_exec,pcntl_getpriority,pcntl_setpriority,pcntl_async_signals,pcntl_unshare, Directory :  /var/www/html/libs/absol-acomp/demo/

Upload File : current_dir [ Writeable ] document_root [ Writeable ]

var __ = (o) => absol._(o).addTo(document.body);
var _ = absol._;


var variants = ['v0', 'tertiary', 'primary', 'secondary', 'light', 'link', 'danger'];

var grid = __({
    style: {
        display: "grid",
        gridTemplateColumns: `repeat(${variants.length} ,1fr)`,
        gap: '20px'
    }
});


['10px', '12px', '14px', '18px'].forEach((size) => {
    console.log('size', size);
    _(`<label style="grid-column: span ${variants.length}">${size}</label>`).addTo(grid);
    variants.forEach(variant => {
        _({
            child: {
                tag: 'flexiconbutton',
                style: {
                    'font-size': size,
                    variant: variant,
                },
                props: {
                    text: 'Quay lại(' + variant + ')',
                    icon: 'span.mdi.mdi-arrow-left'
                }
            }
        }).addTo(grid);
    });


    variants.forEach(variant => {
        _({
            child: [{
                tag: 'flexiconbutton',
                style: {
                    'font-size': size,
                    variant: variant,
                    margin: '0 0 10px 0px',
                },
                props: {
                    text: 'Quay lại(' + variant + ')',
                }
            }, 'br', {
                tag: 'flexiconbutton',
                style: {
                    'font-size': size,
                    variant: variant,
                },
                props: {
                    disabled: true,
                    text: 'Disabled(' + variant + ')',
                }
            }]
        }).addTo(grid);
    });


});


['v0', 'small', 'regular', 'large'].forEach((size) => {
    console.log('size', size);
    _(`<label style="grid-column: span ${variants.length}">${size}</label>`).addTo(grid);
    variants.forEach(variant => {
        _({
            child: {
                tag: 'flexiconbutton',
                style: {
                    size: size,
                    variant: variant,
                },
                props: {
                    text: 'Quay lại(' + variant + ')',
                    icon: 'span.mdi.mdi-arrow-left'
                }
            }
        }).addTo(grid);
    });


    variants.forEach(variant => {
        _({
            child: [{
                tag: 'flexiconbutton',
                style: {
                    size: size,
                    variant: variant,
                    margin: '0 0 10px 0px',
                },
                props: {
                    text: 'Quay lại(' + variant + ')',
                }
            }, 'br', {
                tag: 'flexiconbutton',
                style: {
                    size: size,
                    variant: variant,
                },
                props: {
                    disabled: true,
                    text: 'Disabled(' + variant + ')',
                }
            }]
        }).addTo(grid);
    });

});