jcore-ui
Version:
jcore-ui - components for building an interface
72 lines • 9.47 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 | kit</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"><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/input.scss'</span>;</div></header><content class="page-content"><section class="page-section"><div class="page-section-header">Обычные</div><div class="page-section-label">класс .j-input</div><div class="page-section-example"><div class="j-input"><input placeholder="Обычное поле"></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-input" data-error>
<input type="text" placeholder="Обычное поле"/>
</div>
</script></code>
</pre></div></section><section class="page-section"><div class="page-section-header">Большие</div><div class="page-section-example"><div class="j-input big"><input placeholder="Обычное поле"></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-input" data-error>
<input type="text" placeholder="Обычное поле"/>
</div>
</script></code>
</pre></div></section><section class="page-section"><div class="page-section-header">Валидация</div><div class="page-section-label">аттрибут [data-error|data-accept]</div><div class="page-section-example"><div class="j-input" data-accept><input placeholder="Обычное поле"></div><br><div class="j-input" data-error><input placeholder="Обычное поле"></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-input" data-accept>
<input type="text" placeholder="Обычное поле"/>
</div> </br>
<div class="j-input" data-error>
<input type="text" placeholder="Обычное поле"/>
</div>
</script></code>
</pre></div></section></content><section class="page-section"><div class="page-section-header">С лейблами</div><div class="page-section-example"><div class="j-input"><div class="j-input-hint top">Имя</div><input placeholder="Обычное поле"></div><br><div class="j-input" data-accept><div class="j-input-hint top">Имя</div><input placeholder="Обычное поле"></div><br><div class="j-input" data-error><div class="j-input-hint top">Имя</div><input placeholder="Обычное поле"></div><br><div class="j-input"><div class="j-input-hint top">Имя <span class="j-input-required">*</span></div><input placeholder="Обычное поле"><div class="j-input-hint bottom"><span class="j-input-required">*</span> обязательно для заполнения</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-input">
<div class="j-input-hint top">Имя</div>
<input type="text" placeholder="Обычное поле"/>
</div> </br>
<div class="j-input" data-accept>
<div class="j-input-hint top">Имя</div>
<input type="text" placeholder="Обычное поле"/>
</div> </br>
<div class="j-input" data-error>
<div class="j-input-hint top">Имя</div>
<input type="text" placeholder="Обычное поле"/>
</div> </br>
<div class="j-input">
<div class="j-input-hint top">Имя <span class="j-input-required">*</span></div>
<input type="text" placeholder="Обычное поле"/>
<div class="j-input-hint bottom"><span class="j-input-required">*</span> обязательно для заполнения</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-input"><div class="j-input-group"><input placeholder=" "> <label for="name" class="j-input-hint placeholder">Имя</label></div></div><br><div class="j-input big"><div class="j-input-group"><input placeholder=" "> <label for="name" class="j-input-hint placeholder">Имя</label></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-input">
<div class="j-input-group">
<input type="text" placeholder=" "/>
<label for="name" class="j-input-hint placeholder">Имя</label>
</div>
</div> </br>
<div class="j-input big">
<div class="j-input-group">
<input type="text" placeholder=" "/>
<label for="name" class="j-input-hint placeholder">Имя</label>
</div>
</div>
</script></code>
</pre></div></section><section class="page-section"><div class="page-section-header">textarea</div><div class="page-section-example"><div class="j-input"><textarea name="" id="" rows="5" placeholder="Сообщение"></textarea></div><br><div class="j-input"><div class="j-input-group"><textarea name="" id="" rows="5" placeholder=" "></textarea> <label for="name" class="j-input-hint placeholder">Сообщение</label></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-input">
<div class="j-input-group">
<input type="text" placeholder=" "/>
<label for="name" class="j-input-hint placeholder">Имя</label>
</div>
</div> </br>
<div class="j-input big">
<div class="j-input-group">
<input type="text" placeholder=" "/>
<label for="name" class="j-input-hint placeholder">Имя</label>
</div>
</div>
</script></code>
</pre></div></section></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>