Files
kit/tests/cheatsheetTest.php
T
2023-08-14 20:57:39 +03:00

1768 lines
78 KiB
PHP

<?require($_SERVER["DOCUMENT_ROOT"]."/bitrix/modules/main/include/prolog_before.php");?>
<?
if(\Bitrix\Main\Loader::includeModule('wt.core')) {
app()->service()->assets()->setPlugins([
'kit:config',
'kit:flex-kit',
'kit:core',
'kit:bsCore',
'kit:collapse',
'kit:site',
'kit:toolkit',
'kit:theme',
])->render();
}
$APPLICATION->ShowHead();
?>
<script>
kit.ready(['popover', 'datepicker'], function () {
});
</script>
<div class="kit-wrapper">
<h1 style="text-align: center;">BX.KIT FRONT-END FRAMEWORK</h1>
<h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit</h1>
<h2>Lorem ipsum dolor sit amet, consectetur adipisicing elit</h2>
<h3>Lorem ipsum dolor sit amet, consectetur adipisicing elit</h3>
<h4>Lorem ipsum dolor sit amet, consectetur adipisicing elit</h4>
<h5>Lorem ipsum dolor sit amet, consectetur adipisicing elit</h5>
<h6>Lorem ipsum dolor sit amet, consectetur adipisicing elit</h6>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis eos esse excepturi explicabo fugit labore laborum quaerat quasi voluptatibus? A ab earum explicabo labore nobis nostrum optio perspiciatis provident, quam.</p>
<h2>Tooltip</h2>
<div class="flex-line-wrap flex-col-count" style="--flex-col-count: 5">
<div class="flex-list-item">
<?
service()->templater()->render('kit:button', [
'LABEL' => 'Tooltip on top',
'CLASS' => '',
'ATTR' => [
'data-bs-toggle' => 'tooltip',
'data-bs-placement' => 'top',
'title' => 'Tooltip on top'
]
]);
?>
</div>
<div class="flex-list-item">
<?
service()->templater()->render('kit:button', [
'LABEL' => 'Tooltip on end',
'CLASS' => '',
'ATTR' => [
'data-bs-toggle' => 'tooltip',
'data-bs-placement' => 'right',
'title' => 'Tooltip on end'
]
]);
?>
</div>
<div class="flex-list-item">
<?
service()->templater()->render('kit:button', [
'LABEL' => 'Tooltip on bottom',
'CLASS' => '',
'ATTR' => [
'data-bs-toggle' => 'tooltip',
'data-bs-placement' => 'bottom',
'title' => 'Tooltip on bottom'
]
]);
?>
</div>
<div class="flex-list-item">
<?
service()->templater()->render('kit:button', [
'LABEL' => 'Tooltip on start',
'CLASS' => '',
'ATTR' => [
'data-bs-toggle' => 'tooltip',
'data-bs-placement' => 'left',
'title' => 'Tooltip on start'
]
]);
?>
</div>
<div class="flex-list-item">
<?
service()->templater()->render('kit:button', [
'LABEL' => 'Tooltip with HTML',
'CLASS' => '',
'ATTR' => [
'data-bs-toggle' => 'tooltip',
'data-bs-html' => 'true',
'title' => '<em>Tooltip</em> <u>with</u> <b>HTML</b>'
]
]);
?>
</div>
</div>
<h2>Popover</h2>
<div class="flex-line-wrap flex-col-count" style="--flex-col-count: 5">
<div class="flex-list-item">
<?
service()->templater()->render('kit:button', [
'LABEL' => 'Popover on top',
'CLASS' => '',
'ATTR' => [
'data-bs-toggle' => 'popover',
'data-bs-placement' => 'top',
'data-bs-content' => 'Top popover',
'data-bs-container' => 'body',
]
]);
?>
</div>
<div class="flex-list-item">
<?
service()->templater()->render('kit:button', [
'LABEL' => 'Popover on right',
'CLASS' => '',
'ATTR' => [
'data-bs-toggle' => 'popover',
'data-bs-placement' => 'right',
'data-bs-content' => 'Right popover',
'data-bs-container' => 'body',
]
]);
?>
</div>
<div class="flex-list-item">
<?
service()->templater()->render('kit:button', [
'LABEL' => 'Popover on bottom',
'CLASS' => '',
'ATTR' => [
'data-bs-toggle' => 'popover',
'data-bs-placement' => 'bottom',
'data-bs-content' => 'Bottom popover',
'data-bs-container' => 'body',
]
]);
?>
</div>
<div class="flex-list-item">
<?
service()->templater()->render('kit:button', [
'LABEL' => 'Popover on left',
'CLASS' => '',
'ATTR' => [
'data-bs-toggle' => 'popover',
'data-bs-placement' => 'left',
'data-bs-content' => 'Left popover',
'data-bs-container' => 'body',
]
]);
?>
</div>
<div class="flex-list-item">
<?
service()->templater()->render('kit:button', [
'LABEL' => htmlspecialchars('<HTML> & header'),
'CLASS' => '',
'ATTR' => [
'data-bs-toggle' => 'popover',
'data-bs-content' => 'And here\'s some amazing content. It\'s very engaging. <em>Right</em>?',
'data-bs-container' => 'body',
'data-bs-html' => 'true',
'title' => '<em>Tooltip</em> <u>with</u> <b>HTML</b>'
]
]);
?>
</div>
<div class="flex-list-item">
<?
service()->templater()->render('kit:button', [
'LABEL' => 'trigger focus',
'CLASS' => '',
'ATTR' => [
'data-bs-toggle' => 'popover',
'data-bs-content' => 'And here\'s some amazing content. It\'s very engaging. <em>Right</em>?',
'data-bs-container' => 'body',
'data-bs-html' => 'true',
'data-bs-trigger' => 'focus',
'title' => '<em>Tooltip</em> <u>with</u> <b>HTML</b>'
]
]);
?>
</div>
</div>
<h2>Modals</h2>
<div class="d-flex justify-content-between flex-wrap">
<?
service()->templater()->render('kit:button', [
'LABEL' => 'Vertically centered scrollable modal',
'CLASS' => 'kit-button--primary kit-button--bordered',
'ATTR' => [
'data-bs-toggle' => 'modal',
'data-bs-target' => '#exampleModalCenteredScrollable',
],
]);
?>
</div>
<?
service()->templater()->render('kit:modal', [
'ID' => 'exampleModalCenteredScrollable',
'TITLE' => 'Modal title',
'BODY' => '<p>This is some placeholder content to show the scrolling behavior for modals. We use repeated line breaks to demonstrate how content can exceed minimum inner height, thereby showing inner scrolling. When content becomes longer than the prefedined max-height of modal, content will be cropped and scrollable within the modal.</p>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<p>This content should appear at the bottom after you scroll.</p>',
'FOOTER' => '<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>',
]);
?>
<h2>Input type color</h2>
<div class="flex-list" style="--col-count: 3">
<div class="flex-list-item"><?
service()->templater()->render('kit:input', [
'TYPE' => 'color',
'HINT' => 'color picker by xu-ui',
'NAME' => 'color',
'VALUE' => '#1a8cff',
'LABEL' => 'color',
]); ?>
</div>
</div>
<h2>Input type tel</h2>
<div class="flex-list" style="--col-count: 3">
<div class="flex-list-item"><?
service()->templater()->render('kit:input', [
'TYPE' => 'tel',
'HINT' => 'phone',
'NAME' => 'phone',
'VALUE' => '+7800',
'LABEL' => 'phone',
]); ?>
</div>
<div class="flex-list-item"><?
service()->templater()->render('kit:input', [
'TYPE' => 'tel',
'HINT' => 'phone',
'NAME' => 'phone',
'VALUE' => '',
'LABEL' => 'phone',
]); ?>
</div>
</div>
<h2>Input type number</h2>
<div class="flex-list" style="--col-count: 3">
<div class="flex-list-item"><?
service()->templater()->render('kit:input', [
'TYPE' => 'number',
'HINT' => 'number',
'NAME' => 'number',
'VALUE' => '10',
'PLACEHOLDER' => 'number',
'LABEL' => 'number',
]); ?>
</div>
</div>
<h2>Select</h2>
<div class="flex-list" style="--col-count: 3">
<div class="flex-list-item"><?
service()->templater()->render('kit:select', [
'HINT' => 'text hint',
'NAME' => 'select',
'LABEL' => 'select',
'OPTIONS' => [
[
'ID' => '1',
'NAME' => 'Значение выпадающего списка 1',
],
[
'ID' => '2',
'NAME' => 'Значение выпадающего списка 2',
],
[
'ID' => '3',
'NAME' => 'Значение выпадающего списка 3',
],
[
'ID' => '4',
'NAME' => 'Значение выпадающего списка 4',
],
[
'ID' => '5',
'NAME' => 'Значение выпадающего списка 5',
],
]
]); ?>
</div>
</div>
<h2>Input type checkbox</h2>
<div class="flex-list" style="--col-count: 3">
<div class="flex-list-item"><?
service()->templater()->render('kit:input', [
'TYPE' => 'checkbox',
'HINT' => 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut blanditiis, consectetur hic illum in itaque, labore libero molestiae nisi, placeat possimus quasi quia quis ratione tempora voluptas voluptatum? Eaque, voluptatem.',
'NAME' => 'agreement2',
'VALUE' => 'Y',
'CHECKED' => true,
'LABEL' => 'Lorem ipsum dolor sit amet, consectetur adipisicing elit',
]); ?>
</div>
<div class="flex-list-item"><?
service()->templater()->render('kit:input', [
'CLASS' => 'kit-field--check-mark-material',
'TYPE' => 'checkbox',
'HINT' => 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut blanditiis, consectetur hic illum in itaque, labore libero molestiae nisi, placeat possimus quasi quia quis ratione tempora voluptas voluptatum? Eaque, voluptatem.',
'NAME' => 'agreement',
'VALUE' => 'Y',
'LABEL' => 'kit-field--check-mark-material',
]); ?>
</div>
<div class="flex-list-item"><?
service()->templater()->render('kit:input', [
'CLASS' => 'kit-field--check-mark-stroke',
'TYPE' => 'checkbox',
'HINT' => 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut blanditiis, consectetur hic illum in itaque, labore libero molestiae nisi, placeat possimus quasi quia quis ratione tempora voluptas voluptatum? Eaque, voluptatem.',
'NAME' => 'agreement',
'VALUE' => 'Y',
'LABEL' => 'kit-field--check-mark-stroke',
]); ?>
</div>
</div>
<h2>Input type radio</h2>
<div class="flex-list" style="--col-count: 3">
<div class="flex-list-item"><?
service()->templater()->render('kit:input', [
'TYPE' => 'radio',
'HINT' => 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut blanditiis, consectetur hic illum in itaque, labore libero molestiae nisi, placeat possimus quasi quia quis ratione tempora voluptas voluptatum? Eaque, voluptatem.',
'NAME' => 'radio',
'VALUE' => 'radio1',
'CHECKED' => true,
'LABEL' => 'Lorem ipsum dolor sit amet, consectetur adipisicing elit',
]); ?>
</div>
<div class="flex-list-item"><?
service()->templater()->render('kit:input', [
'TYPE' => 'radio',
'HINT' => 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut blanditiis, consectetur hic illum in itaque, labore libero molestiae nisi, placeat possimus quasi quia quis ratione tempora voluptas voluptatum? Eaque, voluptatem.',
'NAME' => 'radio',
'VALUE' => 'radio2',
'LABEL' => 'Lorem ipsum dolor sit amet, consectetur adipisicing elit',
]); ?>
</div>
<div class="flex-list-item"><?
service()->templater()->render('kit:input', [
'TYPE' => 'radio',
'HINT' => 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut blanditiis, consectetur hic illum in itaque, labore libero molestiae nisi, placeat possimus quasi quia quis ratione tempora voluptas voluptatum? Eaque, voluptatem.',
'NAME' => 'radio',
'VALUE' => 'radio3',
'LABEL' => 'Lorem ipsum dolor sit amet, consectetur adipisicing elit',
]); ?>
</div>
<div class="flex-list-item"><?
service()->templater()->render('kit:input', [
'CLASS' => 'kit-field--check-mark-stroke',
'TYPE' => 'radio',
'HINT' => 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut blanditiis, consectetur hic illum in itaque, labore libero molestiae nisi, placeat possimus quasi quia quis ratione tempora voluptas voluptatum? Eaque, voluptatem.',
'NAME' => 'radio-stroke',
'VALUE' => 'radio4',
'CHECKED' => true,
'LABEL' => 'kit-field--check-mark-stroke',
]); ?>
</div>
<div class="flex-list-item"><?
service()->templater()->render('kit:input', [
'CLASS' => 'kit-field--check-mark-stroke',
'TYPE' => 'radio',
'HINT' => 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut blanditiis, consectetur hic illum in itaque, labore libero molestiae nisi, placeat possimus quasi quia quis ratione tempora voluptas voluptatum? Eaque, voluptatem.',
'NAME' => 'radio-stroke',
'VALUE' => 'radio5',
'LABEL' => 'kit-field--check-mark-stroke',
]); ?>
</div>
<div class="flex-list-item"><?
service()->templater()->render('kit:input', [
'CLASS' => 'kit-field--check-mark-stroke',
'TYPE' => 'radio',
'HINT' => 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut blanditiis, consectetur hic illum in itaque, labore libero molestiae nisi, placeat possimus quasi quia quis ratione tempora voluptas voluptatum? Eaque, voluptatem.',
'NAME' => 'radio-stroke',
'VALUE' => 'radio6',
'LABEL' => 'kit-field--check-mark-stroke',
]); ?>
</div>
<div class="flex-list-item"><?
service()->templater()->render('kit:input', [
'CLASS' => 'kit-field--check-mark-material',
'TYPE' => 'radio',
'HINT' => 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut blanditiis, consectetur hic illum in itaque, labore libero molestiae nisi, placeat possimus quasi quia quis ratione tempora voluptas voluptatum? Eaque, voluptatem.',
'NAME' => 'radio-material',
'VALUE' => 'radio7',
'CHECKED' => true,
'LABEL' => 'kit-field--check-mark-material',
]); ?>
</div>
<div class="flex-list-item"><?
service()->templater()->render('kit:input', [
'CLASS' => 'kit-field--check-mark-material',
'TYPE' => 'radio',
'HINT' => 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut blanditiis, consectetur hic illum in itaque, labore libero molestiae nisi, placeat possimus quasi quia quis ratione tempora voluptas voluptatum? Eaque, voluptatem.',
'NAME' => 'radio-material',
'VALUE' => 'radio8',
'LABEL' => 'kit-field--check-mark-material',
]); ?>
</div>
<div class="flex-list-item"><?
service()->templater()->render('kit:input', [
'CLASS' => 'kit-field--check-mark-material',
'TYPE' => 'radio',
'HINT' => 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut blanditiis, consectetur hic illum in itaque, labore libero molestiae nisi, placeat possimus quasi quia quis ratione tempora voluptas voluptatum? Eaque, voluptatem.',
'NAME' => 'radio-material',
'VALUE' => 'radio9',
'LABEL' => 'kit-field--check-mark-material',
]); ?>
</div>
</div>
<h2>Input type text</h2>
<div class="flex-list" style="--col-count: 3">
<div class="flex-list-item"><?
service()->templater()->render('kit:input', [
'TYPE' => 'text',
'HINT' => 'time mask',
'NAME' => 'time_mask',
'VALUE' => '',
'PLACEHOLDER' => '',
'LABEL' => 'time mask',
'ATTR' => [
'data-mask' => '99:99'
]
]); ?>
</div>
<div class="flex-list-item"><?
service()->templater()->render('kit:input', [
'TYPE' => 'text',
'HINT' => 'text hint',
'NAME' => 'input_name',
'VALUE' => '10',
'PLACEHOLDER' => 'number',
'LABEL' => 'Test input',
]); ?>
</div>
<div class="flex-list-item"><?
service()->templater()->render('kit:input', [
'TYPE' => 'text',
'HINT' => 'air-datepicker',
'NAME' => 'datepicker',
'VALUE' => '',
'PLACEHOLDER' => '',
'LABEL' => 'datepicker',
'DATEPICKER' => true,
'ATTR' => [
'data-mask' => '99.99.9999'
]
]); ?>
</div>
</div>
<h2>Textarea</h2>
<div class="flex-list" style="--col-count: 3">
<div class="flex-list-item"><?
service()->templater()->render('kit:textarea', [
'CLASS' => 'kit-field--check-mark-stroke',
'HINT' => 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut blanditiis, consectetur hic illum in itaque, labore libero molestiae nisi, placeat possimus quasi quia quis ratione tempora voluptas voluptatum? Eaque, voluptatem.',
'NAME' => 'textarea',
'VALUE' => '',
'MAXLENGTH' => 1000,
'LABEL' => 'textarea label',
]); ?>
</div>
<div class="flex-list-item"><?
service()->templater()->render('kit:textarea', [
'CLASS' => 'kit-field--check-mark-stroke',
//'HINT' => 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut blanditiis, consectetur hic illum in itaque, labore libero molestiae nisi, placeat possimus quasi quia quis ratione tempora voluptas voluptatum? Eaque, voluptatem.',
'NAME' => 'textarea',
'VALUE' => 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut blanditiis, consectetur hic illum in itaque, labore libero molestiae nisi, placeat possimus quasi quia quis ratione tempora voluptas voluptatum? Eaque, voluptatem.',
'MAXLENGTH' => 1000,
'LABEL' => 'textarea label',
]); ?>
</div>
</div>
<h2>Input type file</h2>
<div class="flex-list" style="--col-count: 3">
<div class="flex-list-item"><?
$inputFile = new \Wt\Core\Form\InputFile($fieldName = 'FIELD_INPUT_FILE');
$inputFile->multiple = true;
$inputFile->hint = 'Поле для ввода файлов';
$inputFile->render();
?>
</div>
</div>
<h2>Buttons</h2>
<div class="flex-list" style="--col-count: 7;">
<div class="flex-list-item"></div>
<div class="flex-list-item">bordered</div>
<div class="flex-list-item">bordered radius</div>
<div class="flex-list-item">bordered round</div>
<div class="flex-list-item">material</div>
<div class="flex-list-item">material radius</div>
<div class="flex-list-item">material round</div>
<?
echo '<div class="flex-list-item">';
service()->templater()->render('kit:button', [
'LABEL' => 'default',
'CLASS' => 'test ',
'ICON' => service()->templater()->get('kit:svg/star'),
]);
echo '</div>';echo '<div class="flex-list-item">';
service()->templater()->render('kit:button', [
'LABEL' => 'default',
'CLASS' => 'kit-button--bordered',
'ICON' => service()->templater()->get('kit:svg/star'),
]);
echo '</div>';echo '<div class="flex-list-item">';
service()->templater()->render('kit:button', [
'LABEL' => 'default',
'CLASS' => 'kit-button--bordered kit-button--radius',
'ICON' => service()->templater()->get('kit:svg/star'),
]);
echo '</div>';echo '<div class="flex-list-item">';
service()->templater()->render('kit:button', [
'LABEL' => 'default',
'CLASS' => 'kit-button--bordered kit-button--round',
'ICON' => service()->templater()->get('kit:svg/star'),
]);
echo '</div>';echo '<div class="flex-list-item">';
service()->templater()->render('kit:button', [
'LABEL' => 'default',
'CLASS' => 'kit-button--material',
'ICON' => service()->templater()->get('kit:svg/star'),
]);
echo '</div>';echo '<div class="flex-list-item">';
service()->templater()->render('kit:button', [
'LABEL' => 'default',
'CLASS' => 'kit-button--material kit-button--radius',
'ICON' => service()->templater()->get('kit:svg/star'),
]);
echo '</div>';echo '<div class="flex-list-item">';
service()->templater()->render('kit:button', [
'LABEL' => 'default',
'CLASS' => 'kit-button--material kit-button--round',
'ICON' => service()->templater()->get('kit:svg/star'),
]);
echo '</div>';echo '<div class="flex-list-item">';
service()->templater()->render('kit:button', [
'DISABLED' => true,
'LABEL' => 'default',
'CLASS' => 'test ',
'ICON' => service()->templater()->get('kit:svg/star'),
]);
echo '</div>';
echo '<div class="flex-list-item">';
service()->templater()->render('kit:button', [
'DISABLED' => true,
'LABEL' => 'default',
'CLASS' => 'kit-button--bordered',
'ICON' => service()->templater()->get('kit:svg/star'),
]);
echo '</div>';
echo '<div class="flex-list-item">';
service()->templater()->render('kit:button', [
'DISABLED' => true,
'LABEL' => 'default',
'CLASS' => 'kit-button--bordered kit-button--radius',
'ICON' => service()->templater()->get('kit:svg/star'),
]);
echo '</div>';
echo '<div class="flex-list-item">';
service()->templater()->render('kit:button', [
'DISABLED' => true,
'LABEL' => 'default',
'CLASS' => 'kit-button--bordered kit-button--round',
'ICON' => service()->templater()->get('kit:svg/star'),
]);
echo '</div>';
echo '<div class="flex-list-item">';
service()->templater()->render('kit:button', [
'DISABLED' => true,
'LABEL' => 'default',
'CLASS' => 'kit-button--material',
'ICON' => service()->templater()->get('kit:svg/star'),
]);
echo '</div>';
echo '<div class="flex-list-item">';
service()->templater()->render('kit:button', [
'DISABLED' => true,
'LABEL' => 'default',
'CLASS' => 'kit-button--material kit-button--radius',
'ICON' => service()->templater()->get('kit:svg/star'),
]);
echo '</div>';
echo '<div class="flex-list-item">';
service()->templater()->render('kit:button', [
'DISABLED' => true,
'LABEL' => 'default',
'CLASS' => 'kit-button--material kit-button--round',
'ICON' => service()->templater()->get('kit:svg/star'),
]);
echo '</div>';
echo '<div class="flex-list-item">';
service()->templater()->render('kit:button', [
'LABEL' => 'primary',
'CLASS' => 'kit-button--primary',
'ICON' => service()->templater()->get('kit:svg/star'),
]);
echo '</div>';echo '<div class="flex-list-item">';
service()->templater()->render('kit:button', [
'LABEL' => 'primary',
'CLASS' => 'kit-button--primary kit-button--bordered',
'ICON' => service()->templater()->get('kit:svg/star'),
]);
echo '</div>';echo '<div class="flex-list-item">';
service()->templater()->render('kit:button', [
'LABEL' => 'primary',
'CLASS' => 'kit-button--primary kit-button--bordered kit-button--radius',
'ICON' => service()->templater()->get('kit:svg/star'),
]);
echo '</div>';echo '<div class="flex-list-item">';
service()->templater()->render('kit:button', [
'LABEL' => 'primary',
'CLASS' => 'kit-button--primary kit-button--bordered kit-button--round',
'ICON' => service()->templater()->get('kit:svg/star'),
]);
echo '</div>';echo '<div class="flex-list-item">';
service()->templater()->render('kit:button', [
'LABEL' => 'primary',
'CLASS' => 'kit-button--primary kit-button--material',
'ICON' => service()->templater()->get('kit:svg/star'),
]);
echo '</div>';echo '<div class="flex-list-item">';
service()->templater()->render('kit:button', [
'LABEL' => 'primary',
'CLASS' => 'kit-button--primary kit-button--material kit-button--radius',
'ICON' => service()->templater()->get('kit:svg/star'),
]);
echo '</div>';echo '<div class="flex-list-item">';
service()->templater()->render('kit:button', [
'LABEL' => 'primary',
'CLASS' => 'kit-button--primary kit-button--material kit-button--round',
'ICON' => service()->templater()->get('kit:svg/star'),
]);
echo '</div>';echo '<div class="flex-list-item">';
service()->templater()->render('kit:button', [
'DISABLED' => true,
'LABEL' => 'disabled',
'CLASS' => 'kit-button--primary',
'ICON' => service()->templater()->get('kit:svg/star'),
]);
echo '</div>';echo '<div class="flex-list-item">';
service()->templater()->render('kit:button', [
'DISABLED' => true,
'LABEL' => 'disabled',
'CLASS' => 'kit-button--primary kit-button--bordered',
'ICON' => service()->templater()->get('kit:svg/star'),
]);
echo '</div>';echo '<div class="flex-list-item">';
service()->templater()->render('kit:button', [
'DISABLED' => true,
'LABEL' => 'disabled',
'CLASS' => 'kit-button--primary kit-button--bordered kit-button--radius',
'ICON' => service()->templater()->get('kit:svg/star'),
]);
echo '</div>';echo '<div class="flex-list-item">';
service()->templater()->render('kit:button', [
'DISABLED' => true,
'LABEL' => 'disabled',
'CLASS' => 'kit-button--primary kit-button--bordered kit-button--round',
'ICON' => service()->templater()->get('kit:svg/star'),
]);
echo '</div>';echo '<div class="flex-list-item">';
service()->templater()->render('kit:button', [
'DISABLED' => true,
'LABEL' => 'disabled',
'CLASS' => 'kit-button--primary kit-button--material',
'ICON' => service()->templater()->get('kit:svg/star'),
]);
echo '</div>';echo '<div class="flex-list-item">';
service()->templater()->render('kit:button', [
'DISABLED' => true,
'LABEL' => 'disabled',
'CLASS' => 'kit-button--primary kit-button--material kit-button--radius',
'ICON' => service()->templater()->get('kit:svg/star'),
]);
echo '</div>';echo '<div class="flex-list-item">';
service()->templater()->render('kit:button', [
'DISABLED' => true,
'LABEL' => 'disabled',
'CLASS' => 'kit-button--primary kit-button--material kit-button--round',
'ICON' => service()->templater()->get('kit:svg/star'),
]);
echo '</div>';echo '<div class="flex-list-item">';
service()->templater()->render('kit:button', [
'LABEL' => 'secondary',
'CLASS' => 'kit-button--secondary',
'ICON' => service()->templater()->get('kit:svg/star'),
]);
echo '</div>';echo '<div class="flex-list-item">';
service()->templater()->render('kit:button', [
'LABEL' => 'secondary',
'CLASS' => 'kit-button--secondary kit-button--bordered',
'ICON' => service()->templater()->get('kit:svg/star'),
]);
echo '</div>';echo '<div class="flex-list-item">';
service()->templater()->render('kit:button', [
'LABEL' => 'secondary',
'CLASS' => 'kit-button--secondary kit-button--bordered kit-button--radius',
'ICON' => service()->templater()->get('kit:svg/star'),
]);
echo '</div>';echo '<div class="flex-list-item">';
service()->templater()->render('kit:button', [
'LABEL' => 'secondary',
'CLASS' => 'kit-button--secondary kit-button--bordered kit-button--round',
'ICON' => service()->templater()->get('kit:svg/star'),
]);
echo '</div>';echo '<div class="flex-list-item">';
service()->templater()->render('kit:button', [
'LABEL' => 'secondary',
'CLASS' => 'kit-button--secondary kit-button--material',
'ICON' => service()->templater()->get('kit:svg/star'),
]);
echo '</div>';echo '<div class="flex-list-item">';
service()->templater()->render('kit:button', [
'LABEL' => 'secondary',
'CLASS' => 'kit-button--secondary kit-button--material kit-button--radius',
'ICON' => service()->templater()->get('kit:svg/star'),
]);
echo '</div>';echo '<div class="flex-list-item">';
service()->templater()->render('kit:button', [
'LABEL' => 'secondary',
'CLASS' => 'kit-button--secondary kit-button--material kit-button--round',
'ICON' => service()->templater()->get('kit:svg/star'),
]);
echo '</div>';echo '<div class="flex-list-item">';
service()->templater()->render('kit:button', [
'DISABLED' => true,
'LABEL' => 'disabled',
'CLASS' => 'kit-button--secondary',
'ICON' => service()->templater()->get('kit:svg/star'),
]);
echo '</div>';echo '<div class="flex-list-item">';
service()->templater()->render('kit:button', [
'DISABLED' => true,
'LABEL' => 'disabled',
'CLASS' => 'kit-button--secondary kit-button--bordered',
'ICON' => service()->templater()->get('kit:svg/star'),
]);
echo '</div>';echo '<div class="flex-list-item">';
service()->templater()->render('kit:button', [
'DISABLED' => true,
'LABEL' => 'disabled',
'CLASS' => 'kit-button--secondary kit-button--bordered kit-button--radius',
'ICON' => service()->templater()->get('kit:svg/star'),
]);
echo '</div>';echo '<div class="flex-list-item">';
service()->templater()->render('kit:button', [
'DISABLED' => true,
'LABEL' => 'disabled',
'CLASS' => 'kit-button--secondary kit-button--bordered kit-button--round',
'ICON' => service()->templater()->get('kit:svg/star'),
]);
echo '</div>';echo '<div class="flex-list-item">';
service()->templater()->render('kit:button', [
'DISABLED' => true,
'LABEL' => 'disabled',
'CLASS' => 'kit-button--secondary kit-button--material',
'ICON' => service()->templater()->get('kit:svg/star'),
]);
echo '</div>';echo '<div class="flex-list-item">';
service()->templater()->render('kit:button', [
'DISABLED' => true,
'LABEL' => 'disabled',
'CLASS' => 'kit-button--secondary kit-button--material kit-button--radius',
'ICON' => service()->templater()->get('kit:svg/star'),
]);
echo '</div>';echo '<div class="flex-list-item">';
service()->templater()->render('kit:button', [
'DISABLED' => true,
'LABEL' => 'disabled',
'CLASS' => 'kit-button--secondary kit-button--material kit-button--round',
'ICON' => service()->templater()->get('kit:svg/star'),
]);
echo '</div>';echo '<div class="flex-list-item">';
service()->templater()->render('kit:button', [
'LABEL' => 'error',
'CLASS' => ' kit-button--error',
'ICON' => service()->templater()->get('kit:svg/star'),
]);
echo '</div>';echo '<div class="flex-list-item">';
service()->templater()->render('kit:button', [
'LABEL' => 'error',
'CLASS' => ' kit-button--error kit-button--bordered',
'ICON' => service()->templater()->get('kit:svg/star'),
]);
echo '</div>';echo '<div class="flex-list-item">';
service()->templater()->render('kit:button', [
'LABEL' => 'error',
'CLASS' => ' kit-button--error kit-button--bordered kit-button--radius',
'ICON' => service()->templater()->get('kit:svg/star'),
]);
echo '</div>';echo '<div class="flex-list-item">';
service()->templater()->render('kit:button', [
'LABEL' => 'error',
'CLASS' => ' kit-button--error kit-button--bordered kit-button--round',
'ICON' => service()->templater()->get('kit:svg/star'),
]);
echo '</div>';echo '<div class="flex-list-item">';
service()->templater()->render('kit:button', [
'LABEL' => 'error',
'CLASS' => ' kit-button--error kit-button--material',
'ICON' => service()->templater()->get('kit:svg/star'),
]);
echo '</div>';echo '<div class="flex-list-item">';
service()->templater()->render('kit:button', [
'LABEL' => 'error',
'CLASS' => ' kit-button--error kit-button--material kit-button--radius',
'ICON' => service()->templater()->get('kit:svg/star'),
]);
echo '</div>';echo '<div class="flex-list-item">';
service()->templater()->render('kit:button', [
'LABEL' => 'error',
'CLASS' => ' kit-button--error kit-button--material kit-button--round',
'ICON' => service()->templater()->get('kit:svg/star'),
]);
echo '</div>';echo '<div class="flex-list-item">';
service()->templater()->render('kit:button', [
'DISABLED' => true,
'LABEL' => 'disabled',
'CLASS' => ' kit-button--error',
'ICON' => service()->templater()->get('kit:svg/star'),
]);
echo '</div>';echo '<div class="flex-list-item">';
service()->templater()->render('kit:button', [
'DISABLED' => true,
'LABEL' => 'disabled',
'CLASS' => ' kit-button--error kit-button--bordered',
'ICON' => service()->templater()->get('kit:svg/star'),
]);
echo '</div>';echo '<div class="flex-list-item">';
service()->templater()->render('kit:button', [
'DISABLED' => true,
'LABEL' => 'disabled',
'CLASS' => ' kit-button--error kit-button--bordered kit-button--radius',
'ICON' => service()->templater()->get('kit:svg/star'),
]);
echo '</div>';echo '<div class="flex-list-item">';
service()->templater()->render('kit:button', [
'DISABLED' => true,
'LABEL' => 'disabled',
'CLASS' => ' kit-button--error kit-button--bordered kit-button--round',
'ICON' => service()->templater()->get('kit:svg/star'),
]);
echo '</div>';echo '<div class="flex-list-item">';
service()->templater()->render('kit:button', [
'DISABLED' => true,
'LABEL' => 'disabled',
'CLASS' => ' kit-button--error kit-button--material',
'ICON' => service()->templater()->get('kit:svg/star'),
]);
echo '</div>';echo '<div class="flex-list-item">';
service()->templater()->render('kit:button', [
'DISABLED' => true,
'LABEL' => 'disabled',
'CLASS' => ' kit-button--error kit-button--material kit-button--radius',
'ICON' => service()->templater()->get('kit:svg/star'),
]);
echo '</div>';echo '<div class="flex-list-item">';
service()->templater()->render('kit:button', [
'DISABLED' => true,
'LABEL' => 'disabled',
'CLASS' => ' kit-button--error kit-button--material kit-button--round',
'ICON' => service()->templater()->get('kit:svg/star'),
]);
echo '</div>';echo '<div class="flex-list-item">';
service()->templater()->render('kit:button', [
'LABEL' => 'warning',
'CLASS' => ' kit-button--warning',
'ICON' => service()->templater()->get('kit:svg/star'),
]);
echo '</div>';echo '<div class="flex-list-item">';
service()->templater()->render('kit:button', [
'LABEL' => 'warning',
'CLASS' => ' kit-button--warning kit-button--bordered',
'ICON' => service()->templater()->get('kit:svg/star'),
]);
echo '</div>';echo '<div class="flex-list-item">';
service()->templater()->render('kit:button', [
'LABEL' => 'warning',
'CLASS' => ' kit-button--warning kit-button--bordered kit-button--radius',
'ICON' => service()->templater()->get('kit:svg/star'),
]);
echo '</div>';echo '<div class="flex-list-item">';
service()->templater()->render('kit:button', [
'LABEL' => 'warning',
'CLASS' => ' kit-button--warning kit-button--bordered kit-button--round',
'ICON' => service()->templater()->get('kit:svg/star'),
]);
echo '</div>';echo '<div class="flex-list-item">';
service()->templater()->render('kit:button', [
'LABEL' => 'warning',
'CLASS' => ' kit-button--warning kit-button--material',
'ICON' => service()->templater()->get('kit:svg/star'),
]);
echo '</div>';echo '<div class="flex-list-item">';
service()->templater()->render('kit:button', [
'LABEL' => 'warning',
'CLASS' => ' kit-button--warning kit-button--material kit-button--radius',
'ICON' => service()->templater()->get('kit:svg/star'),
]);
echo '</div>';echo '<div class="flex-list-item">';
service()->templater()->render('kit:button', [
'LABEL' => 'warning',
'CLASS' => ' kit-button--warning kit-button--material kit-button--round',
'ICON' => service()->templater()->get('kit:svg/star'),
]);
echo '</div>';echo '<div class="flex-list-item">';
service()->templater()->render('kit:button', [
'DISABLED' => true,
'LABEL' => 'disabled',
'CLASS' => ' kit-button--warning',
'ICON' => service()->templater()->get('kit:svg/star'),
]);
echo '</div>';echo '<div class="flex-list-item">';
service()->templater()->render('kit:button', [
'DISABLED' => true,
'LABEL' => 'disabled',
'CLASS' => ' kit-button--warning kit-button--bordered',
'ICON' => service()->templater()->get('kit:svg/star'),
]);
echo '</div>';echo '<div class="flex-list-item">';
service()->templater()->render('kit:button', [
'DISABLED' => true,
'LABEL' => 'disabled',
'CLASS' => ' kit-button--warning kit-button--bordered kit-button--radius',
'ICON' => service()->templater()->get('kit:svg/star'),
]);
echo '</div>';echo '<div class="flex-list-item">';
service()->templater()->render('kit:button', [
'DISABLED' => true,
'LABEL' => 'disabled',
'CLASS' => ' kit-button--warning kit-button--bordered kit-button--round',
'ICON' => service()->templater()->get('kit:svg/star'),
]);
echo '</div>';echo '<div class="flex-list-item">';
service()->templater()->render('kit:button', [
'DISABLED' => true,
'LABEL' => 'disabled',
'CLASS' => ' kit-button--warning kit-button--material',
'ICON' => service()->templater()->get('kit:svg/star'),
]);
echo '</div>';echo '<div class="flex-list-item">';
service()->templater()->render('kit:button', [
'DISABLED' => true,
'LABEL' => 'disabled',
'CLASS' => ' kit-button--warning kit-button--material kit-button--radius',
'ICON' => service()->templater()->get('kit:svg/star'),
]);
echo '</div>';echo '<div class="flex-list-item">';
service()->templater()->render('kit:button', [
'DISABLED' => true,
'LABEL' => 'disabled',
'CLASS' => ' kit-button--warning kit-button--material kit-button--round',
'ICON' => service()->templater()->get('kit:svg/star'),
]);
echo '</div>';echo '<div class="flex-list-item">';
service()->templater()->render('kit:button', [
'LABEL' => 'success',
'CLASS' => ' kit-button--success',
'ICON' => service()->templater()->get('kit:svg/star'),
]);
echo '</div>';echo '<div class="flex-list-item">';
service()->templater()->render('kit:button', [
'LABEL' => 'success',
'CLASS' => ' kit-button--success kit-button--bordered',
'ICON' => service()->templater()->get('kit:svg/star'),
]);
echo '</div>';echo '<div class="flex-list-item">';
service()->templater()->render('kit:button', [
'LABEL' => 'success',
'CLASS' => ' kit-button--success kit-button--bordered kit-button--radius',
'ICON' => service()->templater()->get('kit:svg/star'),
]);
echo '</div>';echo '<div class="flex-list-item">';
service()->templater()->render('kit:button', [
'LABEL' => 'success',
'CLASS' => ' kit-button--success kit-button--bordered kit-button--round',
'ICON' => service()->templater()->get('kit:svg/star'),
]);
echo '</div>';echo '<div class="flex-list-item">';
service()->templater()->render('kit:button', [
'LABEL' => 'success',
'CLASS' => ' kit-button--success kit-button--material',
'ICON' => service()->templater()->get('kit:svg/star'),
]);
echo '</div>';echo '<div class="flex-list-item">';
service()->templater()->render('kit:button', [
'LABEL' => 'success',
'CLASS' => ' kit-button--success kit-button--material kit-button--radius',
'ICON' => service()->templater()->get('kit:svg/star'),
]);
echo '</div>';echo '<div class="flex-list-item">';
service()->templater()->render('kit:button', [
'LABEL' => 'success',
'CLASS' => ' kit-button--success kit-button--material kit-button--round',
'ICON' => service()->templater()->get('kit:svg/star'),
]);
echo '</div>';echo '<div class="flex-list-item">';
service()->templater()->render('kit:button', [
'DISABLED' => true,
'LABEL' => 'disabled',
'CLASS' => 'kit-button--success',
'ICON' => service()->templater()->get('kit:svg/star'),
]);
echo '</div>';echo '<div class="flex-list-item">';
service()->templater()->render('kit:button', [
'DISABLED' => true,
'LABEL' => 'disabled',
'CLASS' => 'kit-button--success kit-button--bordered',
'ICON' => service()->templater()->get('kit:svg/star'),
]);
echo '</div>';echo '<div class="flex-list-item">';
service()->templater()->render('kit:button', [
'DISABLED' => true,
'LABEL' => 'disabled',
'CLASS' => 'kit-button--success kit-button--bordered kit-button--radius',
'ICON' => service()->templater()->get('kit:svg/star'),
]);
echo '</div>';echo '<div class="flex-list-item">';
service()->templater()->render('kit:button', [
'DISABLED' => true,
'LABEL' => 'disabled',
'CLASS' => 'kit-button--success kit-button--bordered kit-button--round',
'ICON' => service()->templater()->get('kit:svg/star'),
]);
echo '</div>';echo '<div class="flex-list-item">';
service()->templater()->render('kit:button', [
'DISABLED' => true,
'LABEL' => 'disabled',
'CLASS' => 'kit-button--success kit-button--material',
'ICON' => service()->templater()->get('kit:svg/star'),
]);
echo '</div>';echo '<div class="flex-list-item">';
service()->templater()->render('kit:button', [
'DISABLED' => true,
'LABEL' => 'disabled',
'CLASS' => 'kit-button--success kit-button--material kit-button--radius',
'ICON' => service()->templater()->get('kit:svg/star'),
]);
echo '</div>';echo '<div class="flex-list-item">';
service()->templater()->render('kit:button', [
'DISABLED' => true,
'LABEL' => 'disabled',
'CLASS' => 'kit-button--success kit-button--material kit-button--round',
'ICON' => service()->templater()->get('kit:svg/star'),
]);
echo '</div>';
/** ICON */
if(1){
echo '<div class="flex-list-item">';
service()->templater()->render('kit:button', [
'LABEL' => 'default',
'CLASS' => 'kit-button--icon test ',
'ICON' => service()->templater()->get('kit:svg/star'),
]);
echo '</div>';echo '<div class="flex-list-item">';
service()->templater()->render('kit:button', [
'LABEL' => 'default',
'CLASS' => 'kit-button--icon kit-button--bordered',
'ICON' => service()->templater()->get('kit:svg/star'),
]);
echo '</div>';echo '<div class="flex-list-item">';
service()->templater()->render('kit:button', [
'LABEL' => 'default',
'CLASS' => 'kit-button--icon kit-button--bordered kit-button--radius',
'ICON' => service()->templater()->get('kit:svg/star'),
]);
echo '</div>';echo '<div class="flex-list-item">';
service()->templater()->render('kit:button', [
'LABEL' => 'default',
'CLASS' => 'kit-button--icon kit-button--bordered kit-button--round',
'ICON' => service()->templater()->get('kit:svg/star'),
]);
echo '</div>';echo '<div class="flex-list-item">';
service()->templater()->render('kit:button', [
'LABEL' => 'default',
'CLASS' => 'kit-button--icon kit-button--material',
'ICON' => service()->templater()->get('kit:svg/star'),
]);
echo '</div>';echo '<div class="flex-list-item">';
service()->templater()->render('kit:button', [
'LABEL' => 'default',
'CLASS' => 'kit-button--icon kit-button--material kit-button--radius',
'ICON' => service()->templater()->get('kit:svg/star'),
]);
echo '</div>';echo '<div class="flex-list-item">';
service()->templater()->render('kit:button', [
'LABEL' => 'default',
'CLASS' => 'kit-button--icon kit-button--material kit-button--round',
'ICON' => service()->templater()->get('kit:svg/star'),
]);
echo '</div>';echo '<div class="flex-list-item">';
service()->templater()->render('kit:button', [
'DISABLED' => true,
'LABEL' => 'default',
'CLASS' => 'kit-button--icon test ',
'ICON' => service()->templater()->get('kit:svg/star'),
]);
echo '</div>';
echo '<div class="flex-list-item">';
service()->templater()->render('kit:button', [
'DISABLED' => true,
'LABEL' => 'default',
'CLASS' => 'kit-button--icon kit-button--bordered',
'ICON' => service()->templater()->get('kit:svg/star'),
]);
echo '</div>';
echo '<div class="flex-list-item">';
service()->templater()->render('kit:button', [
'DISABLED' => true,
'LABEL' => 'default',
'CLASS' => 'kit-button--icon kit-button--bordered kit-button--radius',
'ICON' => service()->templater()->get('kit:svg/star'),
]);
echo '</div>';
echo '<div class="flex-list-item">';
service()->templater()->render('kit:button', [
'DISABLED' => true,
'LABEL' => 'default',
'CLASS' => 'kit-button--icon kit-button--bordered kit-button--round',
'ICON' => service()->templater()->get('kit:svg/star'),
]);
echo '</div>';
echo '<div class="flex-list-item">';
service()->templater()->render('kit:button', [
'DISABLED' => true,
'LABEL' => 'default',
'CLASS' => 'kit-button--icon kit-button--material',
'ICON' => service()->templater()->get('kit:svg/star'),
]);
echo '</div>';
echo '<div class="flex-list-item">';
service()->templater()->render('kit:button', [
'DISABLED' => true,
'LABEL' => 'default',
'CLASS' => 'kit-button--icon kit-button--material kit-button--radius',
'ICON' => service()->templater()->get('kit:svg/star'),
]);
echo '</div>';
echo '<div class="flex-list-item">';
service()->templater()->render('kit:button', [
'DISABLED' => true,
'LABEL' => 'default',
'CLASS' => 'kit-button--icon kit-button--material kit-button--round',
'ICON' => service()->templater()->get('kit:svg/star'),
]);
echo '</div>';
echo '<div class="flex-list-item">';
service()->templater()->render('kit:button', [
'LABEL' => 'primary',
'CLASS' => 'kit-button--icon kit-button--primary',
'ICON' => service()->templater()->get('kit:svg/star'),
]);
echo '</div>';echo '<div class="flex-list-item">';
service()->templater()->render('kit:button', [
'LABEL' => 'primary',
'CLASS' => 'kit-button--icon kit-button--primary kit-button--bordered',
'ICON' => service()->templater()->get('kit:svg/star'),
]);
echo '</div>';echo '<div class="flex-list-item">';
service()->templater()->render('kit:button', [
'LABEL' => 'primary',
'CLASS' => 'kit-button--icon kit-button--primary kit-button--bordered kit-button--radius',
'ICON' => service()->templater()->get('kit:svg/star'),
]);
echo '</div>';echo '<div class="flex-list-item">';
service()->templater()->render('kit:button', [
'LABEL' => 'primary',
'CLASS' => 'kit-button--icon kit-button--primary kit-button--bordered kit-button--round',
'ICON' => service()->templater()->get('kit:svg/star'),
]);
echo '</div>';echo '<div class="flex-list-item">';
service()->templater()->render('kit:button', [
'LABEL' => 'primary',
'CLASS' => 'kit-button--icon kit-button--primary kit-button--material',
'ICON' => service()->templater()->get('kit:svg/star'),
]);
echo '</div>';echo '<div class="flex-list-item">';
service()->templater()->render('kit:button', [
'LABEL' => 'primary',
'CLASS' => 'kit-button--icon kit-button--primary kit-button--material kit-button--radius',
'ICON' => service()->templater()->get('kit:svg/star'),
]);
echo '</div>';echo '<div class="flex-list-item">';
service()->templater()->render('kit:button', [
'LABEL' => 'primary',
'CLASS' => 'kit-button--icon kit-button--primary kit-button--material kit-button--round',
'ICON' => service()->templater()->get('kit:svg/star'),
]);
echo '</div>';echo '<div class="flex-list-item">';
service()->templater()->render('kit:button', [
'DISABLED' => true,
'LABEL' => 'disabled',
'CLASS' => 'kit-button--icon kit-button--primary',
'ICON' => service()->templater()->get('kit:svg/star'),
]);
echo '</div>';echo '<div class="flex-list-item">';
service()->templater()->render('kit:button', [
'DISABLED' => true,
'LABEL' => 'disabled',
'CLASS' => 'kit-button--icon kit-button--primary kit-button--bordered',
'ICON' => service()->templater()->get('kit:svg/star'),
]);
echo '</div>';echo '<div class="flex-list-item">';
service()->templater()->render('kit:button', [
'DISABLED' => true,
'LABEL' => 'disabled',
'CLASS' => 'kit-button--icon kit-button--primary kit-button--bordered kit-button--radius',
'ICON' => service()->templater()->get('kit:svg/star'),
]);
echo '</div>';echo '<div class="flex-list-item">';
service()->templater()->render('kit:button', [
'DISABLED' => true,
'LABEL' => 'disabled',
'CLASS' => 'kit-button--icon kit-button--primary kit-button--bordered kit-button--round',
'ICON' => service()->templater()->get('kit:svg/star'),
]);
echo '</div>';echo '<div class="flex-list-item">';
service()->templater()->render('kit:button', [
'DISABLED' => true,
'LABEL' => 'disabled',
'CLASS' => 'kit-button--icon kit-button--primary kit-button--material',
'ICON' => service()->templater()->get('kit:svg/star'),
]);
echo '</div>';echo '<div class="flex-list-item">';
service()->templater()->render('kit:button', [
'DISABLED' => true,
'LABEL' => 'disabled',
'CLASS' => 'kit-button--icon kit-button--primary kit-button--material kit-button--radius',
'ICON' => service()->templater()->get('kit:svg/star'),
]);
echo '</div>';echo '<div class="flex-list-item">';
service()->templater()->render('kit:button', [
'DISABLED' => true,
'LABEL' => 'disabled',
'CLASS' => 'kit-button--icon kit-button--primary kit-button--material kit-button--round',
'ICON' => service()->templater()->get('kit:svg/star'),
]);
echo '</div>';echo '<div class="flex-list-item">';
service()->templater()->render('kit:button', [
'LABEL' => 'secondary',
'CLASS' => 'kit-button--icon kit-button--secondary',
'ICON' => service()->templater()->get('kit:svg/star'),
]);
echo '</div>';echo '<div class="flex-list-item">';
service()->templater()->render('kit:button', [
'LABEL' => 'secondary',
'CLASS' => 'kit-button--icon kit-button--secondary kit-button--bordered',
'ICON' => service()->templater()->get('kit:svg/star'),
]);
echo '</div>';echo '<div class="flex-list-item">';
service()->templater()->render('kit:button', [
'LABEL' => 'secondary',
'CLASS' => 'kit-button--icon kit-button--secondary kit-button--bordered kit-button--radius',
'ICON' => service()->templater()->get('kit:svg/star'),
]);
echo '</div>';echo '<div class="flex-list-item">';
service()->templater()->render('kit:button', [
'LABEL' => 'secondary',
'CLASS' => 'kit-button--icon kit-button--secondary kit-button--bordered kit-button--round',
'ICON' => service()->templater()->get('kit:svg/star'),
]);
echo '</div>';echo '<div class="flex-list-item">';
service()->templater()->render('kit:button', [
'LABEL' => 'secondary',
'CLASS' => 'kit-button--icon kit-button--secondary kit-button--material',
'ICON' => service()->templater()->get('kit:svg/star'),
]);
echo '</div>';echo '<div class="flex-list-item">';
service()->templater()->render('kit:button', [
'LABEL' => 'secondary',
'CLASS' => 'kit-button--icon kit-button--secondary kit-button--material kit-button--radius',
'ICON' => service()->templater()->get('kit:svg/star'),
]);
echo '</div>';echo '<div class="flex-list-item">';
service()->templater()->render('kit:button', [
'LABEL' => 'secondary',
'CLASS' => 'kit-button--icon kit-button--secondary kit-button--material kit-button--round',
'ICON' => service()->templater()->get('kit:svg/star'),
]);
echo '</div>';echo '<div class="flex-list-item">';
service()->templater()->render('kit:button', [
'DISABLED' => true,
'LABEL' => 'disabled',
'CLASS' => 'kit-button--icon kit-button--secondary',
'ICON' => service()->templater()->get('kit:svg/star'),
]);
echo '</div>';echo '<div class="flex-list-item">';
service()->templater()->render('kit:button', [
'DISABLED' => true,
'LABEL' => 'disabled',
'CLASS' => 'kit-button--icon kit-button--secondary kit-button--bordered',
'ICON' => service()->templater()->get('kit:svg/star'),
]);
echo '</div>';echo '<div class="flex-list-item">';
service()->templater()->render('kit:button', [
'DISABLED' => true,
'LABEL' => 'disabled',
'CLASS' => 'kit-button--icon kit-button--secondary kit-button--bordered kit-button--radius',
'ICON' => service()->templater()->get('kit:svg/star'),
]);
echo '</div>';echo '<div class="flex-list-item">';
service()->templater()->render('kit:button', [
'DISABLED' => true,
'LABEL' => 'disabled',
'CLASS' => 'kit-button--icon kit-button--secondary kit-button--bordered kit-button--round',
'ICON' => service()->templater()->get('kit:svg/star'),
]);
echo '</div>';echo '<div class="flex-list-item">';
service()->templater()->render('kit:button', [
'DISABLED' => true,
'LABEL' => 'disabled',
'CLASS' => 'kit-button--icon kit-button--secondary kit-button--material',
'ICON' => service()->templater()->get('kit:svg/star'),
]);
echo '</div>';echo '<div class="flex-list-item">';
service()->templater()->render('kit:button', [
'DISABLED' => true,
'LABEL' => 'disabled',
'CLASS' => 'kit-button--icon kit-button--secondary kit-button--material kit-button--radius',
'ICON' => service()->templater()->get('kit:svg/star'),
]);
echo '</div>';echo '<div class="flex-list-item">';
service()->templater()->render('kit:button', [
'DISABLED' => true,
'LABEL' => 'disabled',
'CLASS' => 'kit-button--icon kit-button--secondary kit-button--material kit-button--round',
'ICON' => service()->templater()->get('kit:svg/star'),
]);
echo '</div>';echo '<div class="flex-list-item">';
service()->templater()->render('kit:button', [
'LABEL' => 'error',
'CLASS' => 'kit-button--icon kit-button--error',
'ICON' => service()->templater()->get('kit:svg/star'),
]);
echo '</div>';echo '<div class="flex-list-item">';
service()->templater()->render('kit:button', [
'LABEL' => 'error',
'CLASS' => 'kit-button--icon kit-button--error kit-button--bordered',
'ICON' => service()->templater()->get('kit:svg/star'),
]);
echo '</div>';echo '<div class="flex-list-item">';
service()->templater()->render('kit:button', [
'LABEL' => 'error',
'CLASS' => 'kit-button--icon kit-button--error kit-button--bordered kit-button--radius',
'ICON' => service()->templater()->get('kit:svg/star'),
]);
echo '</div>';echo '<div class="flex-list-item">';
service()->templater()->render('kit:button', [
'LABEL' => 'error',
'CLASS' => 'kit-button--icon kit-button--error kit-button--bordered kit-button--round',
'ICON' => service()->templater()->get('kit:svg/star'),
]);
echo '</div>';echo '<div class="flex-list-item">';
service()->templater()->render('kit:button', [
'LABEL' => 'error',
'CLASS' => 'kit-button--icon kit-button--error kit-button--material',
'ICON' => service()->templater()->get('kit:svg/star'),
]);
echo '</div>';echo '<div class="flex-list-item">';
service()->templater()->render('kit:button', [
'LABEL' => 'error',
'CLASS' => 'kit-button--icon kit-button--error kit-button--material kit-button--radius',
'ICON' => service()->templater()->get('kit:svg/star'),
]);
echo '</div>';echo '<div class="flex-list-item">';
service()->templater()->render('kit:button', [
'LABEL' => 'error',
'CLASS' => 'kit-button--icon kit-button--error kit-button--material kit-button--round',
'ICON' => service()->templater()->get('kit:svg/star'),
]);
echo '</div>';echo '<div class="flex-list-item">';
service()->templater()->render('kit:button', [
'DISABLED' => true,
'LABEL' => 'disabled',
'CLASS' => 'kit-button--icon kit-button--error',
'ICON' => service()->templater()->get('kit:svg/star'),
]);
echo '</div>';echo '<div class="flex-list-item">';
service()->templater()->render('kit:button', [
'DISABLED' => true,
'LABEL' => 'disabled',
'CLASS' => 'kit-button--icon kit-button--error kit-button--bordered',
'ICON' => service()->templater()->get('kit:svg/star'),
]);
echo '</div>';echo '<div class="flex-list-item">';
service()->templater()->render('kit:button', [
'DISABLED' => true,
'LABEL' => 'disabled',
'CLASS' => 'kit-button--icon kit-button--error kit-button--bordered kit-button--radius',
'ICON' => service()->templater()->get('kit:svg/star'),
]);
echo '</div>';echo '<div class="flex-list-item">';
service()->templater()->render('kit:button', [
'DISABLED' => true,
'LABEL' => 'disabled',
'CLASS' => 'kit-button--icon kit-button--error kit-button--bordered kit-button--round',
'ICON' => service()->templater()->get('kit:svg/star'),
]);
echo '</div>';echo '<div class="flex-list-item">';
service()->templater()->render('kit:button', [
'DISABLED' => true,
'LABEL' => 'disabled',
'CLASS' => 'kit-button--icon kit-button--error kit-button--material',
'ICON' => service()->templater()->get('kit:svg/star'),
]);
echo '</div>';echo '<div class="flex-list-item">';
service()->templater()->render('kit:button', [
'DISABLED' => true,
'LABEL' => 'disabled',
'CLASS' => 'kit-button--icon kit-button--error kit-button--material kit-button--radius',
'ICON' => service()->templater()->get('kit:svg/star'),
]);
echo '</div>';echo '<div class="flex-list-item">';
service()->templater()->render('kit:button', [
'DISABLED' => true,
'LABEL' => 'disabled',
'CLASS' => 'kit-button--icon kit-button--error kit-button--material kit-button--round',
'ICON' => service()->templater()->get('kit:svg/star'),
]);
echo '</div>';echo '<div class="flex-list-item">';
service()->templater()->render('kit:button', [
'LABEL' => 'warning',
'CLASS' => 'kit-button--icon kit-button--warning',
'ICON' => service()->templater()->get('kit:svg/star'),
]);
echo '</div>';echo '<div class="flex-list-item">';
service()->templater()->render('kit:button', [
'LABEL' => 'warning',
'CLASS' => 'kit-button--icon kit-button--warning kit-button--bordered',
'ICON' => service()->templater()->get('kit:svg/star'),
]);
echo '</div>';echo '<div class="flex-list-item">';
service()->templater()->render('kit:button', [
'LABEL' => 'warning',
'CLASS' => 'kit-button--icon kit-button--warning kit-button--bordered kit-button--radius',
'ICON' => service()->templater()->get('kit:svg/star'),
]);
echo '</div>';echo '<div class="flex-list-item">';
service()->templater()->render('kit:button', [
'LABEL' => 'warning',
'CLASS' => 'kit-button--icon kit-button--warning kit-button--bordered kit-button--round',
'ICON' => service()->templater()->get('kit:svg/star'),
]);
echo '</div>';echo '<div class="flex-list-item">';
service()->templater()->render('kit:button', [
'LABEL' => 'warning',
'CLASS' => 'kit-button--icon kit-button--warning kit-button--material',
'ICON' => service()->templater()->get('kit:svg/star'),
]);
echo '</div>';echo '<div class="flex-list-item">';
service()->templater()->render('kit:button', [
'LABEL' => 'warning',
'CLASS' => 'kit-button--icon kit-button--warning kit-button--material kit-button--radius',
'ICON' => service()->templater()->get('kit:svg/star'),
]);
echo '</div>';echo '<div class="flex-list-item">';
service()->templater()->render('kit:button', [
'LABEL' => 'warning',
'CLASS' => 'kit-button--icon kit-button--warning kit-button--material kit-button--round',
'ICON' => service()->templater()->get('kit:svg/star'),
]);
echo '</div>';echo '<div class="flex-list-item">';
service()->templater()->render('kit:button', [
'DISABLED' => true,
'LABEL' => 'disabled',
'CLASS' => 'kit-button--icon kit-button--warning',
'ICON' => service()->templater()->get('kit:svg/star'),
]);
echo '</div>';echo '<div class="flex-list-item">';
service()->templater()->render('kit:button', [
'DISABLED' => true,
'LABEL' => 'disabled',
'CLASS' => 'kit-button--icon kit-button--warning kit-button--bordered',
'ICON' => service()->templater()->get('kit:svg/star'),
]);
echo '</div>';echo '<div class="flex-list-item">';
service()->templater()->render('kit:button', [
'DISABLED' => true,
'LABEL' => 'disabled',
'CLASS' => 'kit-button--icon kit-button--warning kit-button--bordered kit-button--radius',
'ICON' => service()->templater()->get('kit:svg/star'),
]);
echo '</div>';echo '<div class="flex-list-item">';
service()->templater()->render('kit:button', [
'DISABLED' => true,
'LABEL' => 'disabled',
'CLASS' => 'kit-button--icon kit-button--warning kit-button--bordered kit-button--round',
'ICON' => service()->templater()->get('kit:svg/star'),
]);
echo '</div>';echo '<div class="flex-list-item">';
service()->templater()->render('kit:button', [
'DISABLED' => true,
'LABEL' => 'disabled',
'CLASS' => 'kit-button--icon kit-button--warning kit-button--material',
'ICON' => service()->templater()->get('kit:svg/star'),
]);
echo '</div>';echo '<div class="flex-list-item">';
service()->templater()->render('kit:button', [
'DISABLED' => true,
'LABEL' => 'disabled',
'CLASS' => 'kit-button--icon kit-button--warning kit-button--material kit-button--radius',
'ICON' => service()->templater()->get('kit:svg/star'),
]);
echo '</div>';echo '<div class="flex-list-item">';
service()->templater()->render('kit:button', [
'DISABLED' => true,
'LABEL' => 'disabled',
'CLASS' => 'kit-button--icon kit-button--warning kit-button--material kit-button--round',
'ICON' => service()->templater()->get('kit:svg/star'),
]);
echo '</div>';echo '<div class="flex-list-item">';
service()->templater()->render('kit:button', [
'LABEL' => 'success',
'CLASS' => 'kit-button--icon kit-button--success',
'ICON' => service()->templater()->get('kit:svg/star'),
]);
echo '</div>';echo '<div class="flex-list-item">';
service()->templater()->render('kit:button', [
'LABEL' => 'success',
'CLASS' => 'kit-button--icon kit-button--success kit-button--bordered',
'ICON' => service()->templater()->get('kit:svg/star'),
]);
echo '</div>';echo '<div class="flex-list-item">';
service()->templater()->render('kit:button', [
'LABEL' => 'success',
'CLASS' => 'kit-button--icon kit-button--success kit-button--bordered kit-button--radius',
'ICON' => service()->templater()->get('kit:svg/star'),
]);
echo '</div>';echo '<div class="flex-list-item">';
service()->templater()->render('kit:button', [
'LABEL' => 'success',
'CLASS' => 'kit-button--icon kit-button--success kit-button--bordered kit-button--round',
'ICON' => service()->templater()->get('kit:svg/star'),
]);
echo '</div>';echo '<div class="flex-list-item">';
service()->templater()->render('kit:button', [
'LABEL' => 'success',
'CLASS' => 'kit-button--icon kit-button--success kit-button--material',
'ICON' => service()->templater()->get('kit:svg/star'),
]);
echo '</div>';echo '<div class="flex-list-item">';
service()->templater()->render('kit:button', [
'LABEL' => 'success',
'CLASS' => 'kit-button--icon kit-button--success kit-button--material kit-button--radius',
'ICON' => service()->templater()->get('kit:svg/star'),
]);
echo '</div>';echo '<div class="flex-list-item">';
service()->templater()->render('kit:button', [
'LABEL' => 'success',
'CLASS' => 'kit-button--icon kit-button--success kit-button--material kit-button--round',
'ICON' => service()->templater()->get('kit:svg/star'),
]);
echo '</div>';echo '<div class="flex-list-item">';
service()->templater()->render('kit:button', [
'DISABLED' => true,
'LABEL' => 'disabled',
'CLASS' => 'kit-button--icon kit-button--success',
'ICON' => service()->templater()->get('kit:svg/star'),
]);
echo '</div>';echo '<div class="flex-list-item">';
service()->templater()->render('kit:button', [
'DISABLED' => true,
'LABEL' => 'disabled',
'CLASS' => 'kit-button--icon kit-button--success kit-button--bordered',
'ICON' => service()->templater()->get('kit:svg/star'),
]);
echo '</div>';echo '<div class="flex-list-item">';
service()->templater()->render('kit:button', [
'DISABLED' => true,
'LABEL' => 'disabled',
'CLASS' => 'kit-button--icon kit-button--success kit-button--bordered kit-button--radius',
'ICON' => service()->templater()->get('kit:svg/star'),
]);
echo '</div>';echo '<div class="flex-list-item">';
service()->templater()->render('kit:button', [
'DISABLED' => true,
'LABEL' => 'disabled',
'CLASS' => 'kit-button--icon kit-button--success kit-button--bordered kit-button--round',
'ICON' => service()->templater()->get('kit:svg/star'),
]);
echo '</div>';echo '<div class="flex-list-item">';
service()->templater()->render('kit:button', [
'DISABLED' => true,
'LABEL' => 'disabled',
'CLASS' => 'kit-button--icon kit-button--success kit-button--material',
'ICON' => service()->templater()->get('kit:svg/star'),
]);
echo '</div>';echo '<div class="flex-list-item">';
service()->templater()->render('kit:button', [
'DISABLED' => true,
'LABEL' => 'disabled',
'CLASS' => 'kit-button--icon kit-button--success kit-button--material kit-button--radius',
'ICON' => service()->templater()->get('kit:svg/star'),
]);
echo '</div>';echo '<div class="flex-list-item">';
service()->templater()->render('kit:button', [
'DISABLED' => true,
'LABEL' => 'disabled',
'CLASS' => 'kit-button--icon kit-button--success kit-button--material kit-button--round',
'ICON' => service()->templater()->get('kit:svg/star'),
]);
echo '</div>';
}
?>
</div>
<div class="flex-list" style="--col-count: 1;">
<?
?>
</div>
</div>
<?
?>