jcore-ui
Version:
jcore-ui - components for building an interface
24 lines (23 loc) • 7.96 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 | collapse</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/collapse.scss'</span>;</div><div class="page-import">import <span class="token string">{ Collapse } from 'jcore-ui'</span>;</div><div class="page-import">import <span class="token string">Collapse from 'jcore-ui/bin/lib/components/Collapse'</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-example"><div class="j-collapse" data-name="collapse"><div class="j-collapse-wrapper">Lorem ipsum dolor sit amet consectetur adipisicing elit. Obcaecati quo minus quos nesciunt a. Doloremque, impedit ad? Quo minima quod blanditiis voluptatum officia, commodi excepturi nesciunt cum cumque voluptates distinctio exercitationem numquam qui nulla nam!</div><div class="j-collapse-button">button collapse</div></div></div><div class="page-section-code"><pre>
<code class="language-js">
const collapses = new Collapse()
const collapses = new Collapse({
$element: document.querySelector('[data-name="collapse"]')
})
</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-collapse" data-name="collapse">
<div class="j-collapse-wrapper">
Lorem ipsum dolor sit amet consectetur adipisicing elit.
</div>
<div class="j-collapse-button">button collapse</div>
</div>
</script></code>
</pre></div></section><section class="page-section"><div class="page-section-header">Начальная высота</div><div class="page-section-example"><div class="j-collapse" data-name="collapse" data-height="21"><div class="j-collapse-wrapper">Lorem ipsum dolor sit amet consectetur adipisicing elit. Obcaecati quo minus quos nesciunt a. Doloremque, impedit ad? Quo minima quod blanditiis voluptatum officia, commodi excepturi nesciunt cum cumque voluptates distinctio exercitationem numquam qui nulla nam!</div><div class="j-collapse-button">button collapse</div></div></div><div class="page-section-code"><pre>
<code class="language-markup" type="text/plain"><script type="text/plain" class="language-markup">
<div class="j-collapse" data-name="collapse" data-height="21">
// ...
</div>
</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>Параметры (Collapse.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>height</td><td>0</td><td>number (px)</td><td>стартовая высота</td></tr><tr><td>duration</td><td>300</td><td>number (ms)</td><td>время в мс за которое откроется коллапс</td></tr></tbody></table></div><div class="j-table-responsive"><table class="j-table" data-border-bottom><caption>Обработчик событий (Collapse.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>toggle</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>