UNPKG

jcore-ui

Version:

jcore-ui - components for building an interface

github.com/concore-dev/jcore-ui

concore-dev/jcore-ui

74 lines (68 loc) • 9.03 kB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
<!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 | 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">Form</div><div class="page-label">компонент формы</div><div class="page-import">@import <span class="token string">'node_modules/jcore-ui/lib/scss/components/form.scss'</span>;</div></header><content class="page-content"><section class="page-section"><div class="page-section-header">Правила использования.</div><div class="page-section-label">Контейнер указывается через .j-container класс</div><div class="page-section-example"><form action="#" class="j-form"><div class="j-form-field"><div class="j-input big"><div class="j-input-group"><input placeholder=" "> <label for="name" class="j-input-hint placeholder">Имя</label></div></div><div class="j-input big"><div class="j-input-group"><input placeholder=" "> <label for="name" class="j-input-hint placeholder">Фамилия</label></div></div><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="j-form-field"><div class="j-input big"><div class="j-input-group"><input placeholder=" "> <label for="name" class="j-input-hint placeholder">Телефон</label></div></div><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="j-form-field"><div class="j-select" data-name="select-1"><input class="j-select-input" name="city" value="0"><div class="j-select-value big">Выберите город</div><div class="j-select-wrapper"><div class="j-select-items"><div class="j-select-item" data-value="0">Все города</div><div class="j-select-item" data-value="1">Москва</div><div class="j-select-item" data-value="2">Самара</div><div class="j-select-item" data-value="3">Тольятти</div><div class="j-select-item" data-value="4">Казань</div><div class="j-select-item" data-value="5">Сызрань</div></div></div></div></div><div class="j-form-field"><div class="j-checkbox"><input class="j-checkbox-input" name="sale" type="checkbox"><div class="j-checkbox-wrapper"><div class="j-checkbox-icon"></div><div class="j-checkbox-label">Товары со скидкой</div></div></div></div><div class="j-form-field"><button class="j-button main medium" type="submit">Отправить</button></div></form></div><div class="page-section-code"><pre> <code class="language-markup" type="text/plain"><script type="text/plain" class="language-markup"> <form action="#" class="j-form"> <div class="j-form-field"> <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> <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> <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> </div> <div class="j-form-field"> <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> <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> </div> <div class="j-form-field"> <div class="j-select" data-name="select-1"> <input class="j-select-input" name="city" value="0"> <div class="j-select-value big">Выберите город</div> <div class="j-select-wrapper"> <div class="j-select-items"> <div class="j-select-item" data-value="0">Все города</div> <div class="j-select-item" data-value="1">Москва</div> <div class="j-select-item" data-value="2">Самара</div> <div class="j-select-item" data-value="3">Тольятти</div> <div class="j-select-item" data-value="4">Казань</div> <div class="j-select-item" data-value="5">Сызрань</div> </div> </div> </div> </div> <div class="j-form-field"> <div class="j-checkbox"> <input class="j-checkbox-input" name="sale" type="checkbox"> <div class="j-checkbox-wrapper"> <div class="j-checkbox-icon"></div> <div class="j-checkbox-label">Товары со скидкой</div> </div> </div> </div> <div class="j-form-field"> <button class="j-button main" type="submit">Отправить</button> </div> </form> </script></code> </pre></div></section></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>