jcore-ui
Version:
jcore-ui - components for building an interface
17 lines • 8.09 kB
HTML
<html lang="ru"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><title>jcore-ui | modal</title><link href="/jcore-ui/bundles/css/app.910c8.css" rel="stylesheet"></head><body data-menu><div class="menu" data-active><div class="menu-content"><div class="menu-item"><div class="menu-link" data-href="/jcore-ui/">Начало</div></div><div class="menu-item"><div class="j-accordion"><div class="j-accordion-panel"><div class="j-accordion-tab"><div class="menu-link">Разметка</div></div><div class="j-accordion-content"><div class="menu-link" data-href="/jcore-ui/markup/grid">Сетка</div><div class="menu-link" data-href="/jcore-ui/markup/container">Контейнер</div><div class="menu-link" data-href="/jcore-ui/markup/button">Кнопка</div><div class="menu-link" data-href="/jcore-ui/markup/input">Поля ввода</div><div class="menu-link" data-href="/jcore-ui/markup/form">Форма</div><div class="menu-link" data-href="/jcore-ui/markup/table">Таблица</div></div></div></div></div><div class="menu-item"><div class="j-accordion"><div class="j-accordion-panel"><div class="j-accordion-tab"><div class="menu-link">Компоненты</div></div><div class="j-accordion-content"><div class="menu-link" data-href="/jcore-ui/components/accordion/">Аккордеон</div><div class="menu-link" data-href="/jcore-ui/components/checkbox/">Чекбокс</div><div class="menu-link" data-href="/jcore-ui/components/collapse/">Коллапс</div><div class="menu-link" data-href="/jcore-ui/components/dropdown/">Выпадающий список</div><div class="menu-link" data-href="/jcore-ui/components/tooltip/">Всплывающий список</div><div class="menu-link" data-href="/jcore-ui/components/modal/">Модальное окно</div><div class="menu-link" data-href="/jcore-ui/components/progress/">Индикатор</div><div class="menu-link" data-href="/jcore-ui/components/radio/">Радиокнопки</div><div class="menu-link" data-href="/jcore-ui/components/select/">Список</div><div class="menu-link" data-href="/jcore-ui/components/spinner/">Спиннер</div><div class="menu-link" data-href="/jcore-ui/components/tab/">Вкладки</div><div class="menu-link" data-href="/jcore-ui/components/toggle/">Переключатель</div><div class="menu-link" data-href="/jcore-ui/components/burger/">Бургер кнопка</div></div></div></div></div><div class="menu-item"><div class="j-accordion"><div class="j-accordion-panel"><div class="j-accordion-tab"><div class="menu-link">Утилиты</div></div><div class="j-accordion-content"><div class="menu-link" data-href="/jcore-ui/utils/EventEmitter/">EventEmitter</div><div class="menu-link" data-href="/jcore-ui/utils/createTemplate/">createTemplate</div><div class="menu-link" data-href="/jcore-ui/utils/dataHref/">dataHref</div><div class="menu-link" data-href="/jcore-ui/utils/dataScroll/">dataScroll</div><div class="menu-link" data-href="/jcore-ui/utils/waitFor/">waitFor</div></div></div></div></div></div><div class="menu-toggle j-burger" data-active><div class="j-burger-line"></div><div class="j-burger-line"></div><div class="j-burger-line"></div></div></div><main class="page"><div class="j-container page-accordion"><header class="page-header"><div class="page-title">Модальное окно</div><div class="page-label">компонент модалки</div><div class="page-import">@import <span class="token string">'node_modules/jcore-ui/lib/scss/components/modal.scss'</span>;</div><div class="page-import">import <span class="token string">{ Modal } from 'jcore-ui'</span>;</div><div class="page-import">import <span class="token string">Modal from 'jcore-ui/bin/lib/components/Modal'</span>;</div></header><content class="page-content"><div class="j-tabs" data-name="content"><div class="j-tabs-list"><div class="j-tab" data-target="content1" data-active>Примеры и код</div><div class="j-tab" data-target="content2">Свойства и методы</div></div><div class="j-tab-wrapper"><div class="j-tab-content" data-tab="content1" data-active><section class="page-section"><div class="page-section-header">Использование</div><div class="page-section-label">Для открытия модалки необходимо вызвать метод render у экземпляра компонента, либо добавить target кнопку с тем же именем модалки</div><div class="page-section-example"><div class="j-modal" data-name="modal-1"><div class="j-modal-close"></div><div class="j-modal-content"><div class="j-modal-header p-modal--title">Выберите город</div><div class="j-modal-body">Lorem ipsum dolor sit amet consectetur adipisicing elit. At tempora ipsa delectus maiores quas, reiciendis, odit possimus odio ea sapiente inventore incidunt deserunt culpa. Nostrum animi iure aliquam deserunt repellat atque minima aperiam officiis facilis! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique in quis officia reprehenderit enim ipsam eaque, vitae nulla quod excepturi dolorem iure facilis totam fugiat maxime quibusdam voluptatum expedita commodi! Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla voluptates accusantium aliquam ratione, obcaecati inventore nesciunt ullam doloremque, veritatis, consequatur reiciendis labore recusandae possimus! Laborum error adipisci provident expedita natus!</div><div class="j-modal-footer">Lorem ipsum dolor sit amet.</div></div></div><button class="j-button main" data-modal-target="modal-1">modal</button></div><div class="page-section-code"><pre>
<code class="language-js">
const modal = new Modal({
$element: document.querySelector('.j-modal[data-name="modal"]')
})
</code>
</pre></div><div class="page-section-code"><pre>
<code class="language-markup" type="text/plain"><script type="text/plain" class="language-markup">
<div class="j-modal" data-name="modal-1">
<div class="j-modal-close"></div>
<div class="j-modal-content">
Lorem ipsum dolor sit amet consectetur adipisicing elit.
</div>
</div>
<button class="j-button main" data-modal-target="modal-1">modal</button>
</script></code>
</pre></div></section></div><div class="j-tab-content" data-tab="content2"><section class="page-section"><div class="page-section-header">Свойства и методы</div><div class="page-section-example property"><div class="j-table-responsive"><table class="j-table" data-border-bottom><caption>Параметры (Accordion.options)</caption><thead><tr><th>Название</th><th>Значение по умолчанию</th><th>Тип</th><th>Описание</th></tr></thead><tbody><tr><td>mount</td><td>true</td><td>boolean</td><td>инициализация компонента</td></tr><tr><td>name</td><td>''</td><td>string</td><td>имя компонента</td></tr><tr><td>adaptive</td><td>true</td><td>boolean</td><td>если true, то модалки будет адаптивной</td></tr></tbody></table></div><div class="j-table-responsive"><table class="j-table" data-border-bottom><caption>Обработчик событий (Accordion.on)</caption><thead><tr><th>Название</th><th>Значение по умолчанию</th><th>Тип</th><th>Описание</th></tr></thead><tbody><tr><td>mount</td><td>(ctx) =></td><td>function</td><td></td></tr><tr><td>unmount</td><td>(ctx) =></td><td>function</td><td></td></tr><tr><td>render</td><td>(ctx) =></td><td>function</td><td>срабатывает при открытие</td></tr><tr><td>destroy</td><td>(ctx) =></td><td>function</td><td>срабатывает при закрытие</td></tr></tbody></table></div></div></section></div></div></div></content></div></main><footer class="footer"><div class="j-container"><div class="footer-copyright">© 2021 Eryomin Nickolay.</div></div></footer><script src="/jcore-ui/bundles/js/app.98d95.js"></script></body></html>