jcore-ui

Version:

jcore-ui - components for building an interface

74 lines (69 loc) • 12.1 kB

HTML

<!doctype 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 | tooltip</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/tooltip.scss'</span>;</div><div class="page-import">import <span class="token string">{ Tooltip } from 'jcore-ui'</span>;</div><div class="page-import">import <span class="token string">Tooltip from 'jcore-ui/bin/lib/components/Tooltip'</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-tooltip"><div class="j-tooltip-header">tooltip</div><div class="j-tooltip-content"><div class="j-tooltip-wrapper"><div class="j-tooltip-arrow"></div><div><a href="#">tooltip-item-1</a></div><div><a href="#">tooltip-item-2</a></div><div><a href="#">tooltip-item-3</a></div><div><a href="#">tooltip-item-4</a></div><div><a href="#">tooltip-item-5</a></div></div></div></div></div><div class="page-section-code"><pre> <code class="language-js"> const tooltip = new tooltip() </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-tooltip" data-name="tooltip-1"> <div class="j-tooltip-header">tooltip</div> <div class="j-tooltip-content"> <div class="j-tooltip-wrapper"> <div class="j-tooltip-arrow"></div> <div><a href="#">tooltip-item-1</a></div> <div><a href="#">tooltip-item-2</a></div> <div><a href="#">tooltip-item-3</a></div> <div><a href="#">tooltip-item-4</a></div> <div><a href="#">tooltip-item-5</a></div> </div> </div> </div> </script></code> </pre></div></section><section class="page-section"><div class="page-section-header">Направление</div><div class="page-section-label"><p>Атрибут [data-dir="top|bottom|left|right"]</p></div><div class="page-section-example"><div class="j-grid"><div class="j-grid-item"><div class="j-tooltip"><div class="j-tooltip-header">tooltip top</div><div class="j-tooltip-content" data-dir="top"><div class="j-tooltip-wrapper"><div class="j-tooltip-arrow"></div><div><a href="#">tooltip-item-1</a></div><div><a href="#">tooltip-item-2</a></div><div><a href="#">tooltip-item-3</a></div><div><a href="#">tooltip-item-4</a></div><div><a href="#">tooltip-item-5</a></div></div></div></div></div><div class="j-grid-item"><div class="j-tooltip"><div class="j-tooltip-header">tooltip bottom</div><div class="j-tooltip-content" data-dir="bottom"><div class="j-tooltip-wrapper"><div class="j-tooltip-arrow"></div><div><a href="#">tooltip-item-1</a></div><div><a href="#">tooltip-item-2</a></div><div><a href="#">tooltip-item-3</a></div><div><a href="#">tooltip-item-4</a></div><div><a href="#">tooltip-item-5</a></div></div></div></div></div><div class="j-grid-item"><div class="j-tooltip"><div class="j-tooltip-header">tooltip left</div><div class="j-tooltip-content" data-dir="left"><div class="j-tooltip-wrapper"><div class="j-tooltip-arrow"></div><div><a href="#">tooltip-item-1</a></div><div><a href="#">tooltip-item-2</a></div><div><a href="#">tooltip-item-3</a></div><div><a href="#">tooltip-item-4</a></div><div><a href="#">tooltip-item-5</a></div></div></div></div></div><div class="j-grid-item"><div class="j-tooltip"><div class="j-tooltip-header">tooltip right</div><div class="j-tooltip-content" data-dir="right"><div class="j-tooltip-wrapper"><div class="j-tooltip-arrow"></div><div><a href="#">tooltip-item-1</a></div><div><a href="#">tooltip-item-2</a></div><div><a href="#">tooltip-item-3</a></div><div><a href="#">tooltip-item-4</a></div><div><a href="#">tooltip-item-5</a></div></div></div></div></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-tooltip"> <div class="j-tooltip-header">tooltip</div> <div class="j-tooltip-content" data-dir="top"> // ... </div> </div> <div class="j-tooltip"> <div class="j-tooltip-header">tooltip</div> <div class="j-tooltip-content" data-dir="bottom"> // ... </div> </div> <div class="j-tooltip"> <div class="j-tooltip-header">tooltip</div> <div class="j-tooltip-content" data-dir="left"> // ... </div> </div> <div class="j-tooltip"> <div class="j-tooltip-header">tooltip</div> <div class="j-tooltip-content" data-dir="right"> // ... </div> </div> </script></code> </pre></div></section><section class="page-section"><div class="page-section-header">Выравнивание</div><div class="page-section-label"><p>Атрибут [data-align="left|stretch|right"]</p></div><div class="page-section-example"><div class="j-grid"><div class="j-grid-item"><div class="j-tooltip"><div class="j-tooltip-header">tooltip left</div><div class="j-tooltip-content" data-align="left"><div class="j-tooltip-wrapper"><div class="j-tooltip-arrow"></div><div><a href="#">tooltip-item-1</a></div><div><a href="#">tooltip-item-2</a></div><div><a href="#">tooltip-item-3</a></div><div><a href="#">tooltip-item-4</a></div><div><a href="#">tooltip-item-5</a></div></div></div></div></div><div class="j-grid-item"><div class="j-tooltip"><div class="j-tooltip-header">tooltip stretch</div><div class="j-tooltip-content" data-align="stretch"><div class="j-tooltip-wrapper"><div class="j-tooltip-arrow"></div><div><a href="#">tooltip-item-1</a></div><div><a href="#">tooltip-item-2</a></div><div><a href="#">tooltip-item-3</a></div><div><a href="#">tooltip-item-4</a></div><div><a href="#">tooltip-item-5</a></div></div></div></div></div><div class="j-grid-item"><div class="j-tooltip"><div class="j-tooltip-header">tooltip right</div><div class="j-tooltip-content" data-align="right"><div class="j-tooltip-wrapper"><div class="j-tooltip-arrow"></div><div><a href="#">tooltip-item-1</a></div><div><a href="#">tooltip-item-2</a></div><div><a href="#">tooltip-item-3</a></div><div><a href="#">tooltip-item-4</a></div><div><a href="#">tooltip-item-5</a></div></div></div></div></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-tooltip"> <div class="j-tooltip-header">tooltip</div> <div class="j-tooltip-content" data-align="left"> // ... </div> </div> <div class="j-tooltip"> <div class="j-tooltip-header">tooltip</div> <div class="j-tooltip-content" data-align="stretch"> // ... </div> </div> <div class="j-tooltip"> <div class="j-tooltip-header">tooltip</div> <div class="j-tooltip-content" data-align="right"> // ... </div> </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>Параметры (tooltip.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></tbody></table></div><div class="j-table-responsive"><table class="j-table" data-border-bottom><caption>Обработчик событий (tooltip.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></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>