mirror of
https://bitbucket.org/bellord13/kit.git
synced 2026-11-13 19:06:11 +03:00
fix
This commit is contained in:
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,32 @@
|
|||||||
|
<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>
|
||||||
@@ -0,0 +1,11 @@
|
|||||||
|
<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>
|
||||||
@@ -0,0 +1,16 @@
|
|||||||
|
<div class="flex-list" style="--col-count: 3">
|
||||||
|
<div class="flex-list-item"><?
|
||||||
|
$inputFile = new \Wt\Core\Form\InputFile($fieldName = 'MULTIPLE_FIELD_INPUT_FILE');
|
||||||
|
$inputFile->multiple = true;
|
||||||
|
$inputFile->hint = 'Поле для ввода файлов';
|
||||||
|
$inputFile->render();
|
||||||
|
?>
|
||||||
|
</div>
|
||||||
|
<div class="flex-list-item"><?
|
||||||
|
$inputFile = new \Wt\Core\Form\InputFile($fieldName = 'SINGLE_FIELD_INPUT_FILE');
|
||||||
|
$inputFile->multiple = false;
|
||||||
|
$inputFile->hint = 'Поле для ввода файлов';
|
||||||
|
$inputFile->render();
|
||||||
|
?>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
@@ -0,0 +1,12 @@
|
|||||||
|
<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>
|
||||||
@@ -0,0 +1,97 @@
|
|||||||
|
<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>
|
||||||
@@ -0,0 +1,32 @@
|
|||||||
|
<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>
|
||||||
@@ -0,0 +1,20 @@
|
|||||||
|
<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>
|
||||||
@@ -0,0 +1,41 @@
|
|||||||
|
<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>
|
||||||
@@ -0,0 +1,24 @@
|
|||||||
|
<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>
|
||||||
@@ -0,0 +1,92 @@
|
|||||||
|
<?
|
||||||
|
|
||||||
|
$closeButtonTemplate = service()->templater()->getTemplate('kit:button', [
|
||||||
|
'LABEL' => 'Close',
|
||||||
|
'CLASS' => ' ',
|
||||||
|
'ATTR' => [
|
||||||
|
'data-bs-dismiss' => 'modal',
|
||||||
|
],
|
||||||
|
]);
|
||||||
|
?>
|
||||||
|
<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.</p>'
|
||||||
|
.str_repeat('<br>', 50)
|
||||||
|
.'<p>This content should appear at the bottom after you scroll.</p>',
|
||||||
|
'FOOTER' => $closeButtonTemplate,
|
||||||
|
]);
|
||||||
|
?>
|
||||||
|
|
||||||
|
<h3>Dialogue chain</h3>
|
||||||
|
|
||||||
|
<div class="d-flex justify-content-between flex-wrap">
|
||||||
|
<?
|
||||||
|
service()->templater()->render('kit:button', [
|
||||||
|
'LABEL' => 'Start',
|
||||||
|
'CLASS' => 'kit-button--primary kit-button--bordered',
|
||||||
|
'ATTR' => [
|
||||||
|
'data-bs-toggle' => 'modal',
|
||||||
|
'data-bs-target' => '#modalStep1',
|
||||||
|
],
|
||||||
|
]);
|
||||||
|
?>
|
||||||
|
</div>
|
||||||
|
<?
|
||||||
|
$nextButtonTemplate = function($selector){
|
||||||
|
return service()->templater()->getTemplate('kit:button', [
|
||||||
|
'LABEL' => 'Next',
|
||||||
|
'CLASS' => '',
|
||||||
|
'ATTR' => [
|
||||||
|
'data-bs-dismiss' => 'modal',
|
||||||
|
'data-bs-target' => $selector,
|
||||||
|
'data-bs-toggle' => 'modal',
|
||||||
|
],
|
||||||
|
]);
|
||||||
|
};
|
||||||
|
$prevButtonTemplate = function($selector){
|
||||||
|
return service()->templater()->getTemplate('kit:button', [
|
||||||
|
'LABEL' => 'Prev',
|
||||||
|
'CLASS' => ' ',
|
||||||
|
'ATTR' => [
|
||||||
|
'data-bs-dismiss' => 'modal',
|
||||||
|
'data-bs-target' => $selector,
|
||||||
|
'data-bs-toggle' => 'modal',
|
||||||
|
],
|
||||||
|
]);
|
||||||
|
};
|
||||||
|
service()->templater()->render('kit:modal', [
|
||||||
|
'ID' => 'modalStep1',
|
||||||
|
'TITLE' => 'Step 1',
|
||||||
|
'CLASS' => 'modal--dialogue-chain',
|
||||||
|
'BODY' => '<p></p>',
|
||||||
|
'FOOTER' => $closeButtonTemplate.$nextButtonTemplate('#modalStep2'),
|
||||||
|
]);
|
||||||
|
service()->templater()->render('kit:modal', [
|
||||||
|
'ID' => 'modalStep2',
|
||||||
|
'TITLE' => 'Step 2',
|
||||||
|
'CLASS' => 'modal--dialogue-chain',
|
||||||
|
'BODY' => '<p></p>',
|
||||||
|
'FOOTER' => $closeButtonTemplate.$prevButtonTemplate('#modalStep1').$nextButtonTemplate('#modalStep3'),
|
||||||
|
]);
|
||||||
|
service()->templater()->render('kit:modal', [
|
||||||
|
'ID' => 'modalStep3',
|
||||||
|
'TITLE' => 'Step 3',
|
||||||
|
'CLASS' => 'modal--dialogue-chain',
|
||||||
|
'BODY' => '<p></p>',
|
||||||
|
'FOOTER' => $closeButtonTemplate,
|
||||||
|
]);
|
||||||
|
|
||||||
@@ -0,0 +1,91 @@
|
|||||||
|
|
||||||
|
|
||||||
|
<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>
|
||||||
@@ -0,0 +1,7 @@
|
|||||||
|
<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>
|
||||||
@@ -0,0 +1,67 @@
|
|||||||
|
<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>
|
||||||
+23
-1740
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user