"ui-input" Инпут для ввода
Кастомное текстовое поле ввода. При фокусе меняется цвет бордера. Поддерживает различные типы: text, password, email.
<div class="mb-3" style="max-width: 400px">
<input type="text" class="ui-input" placeholder="Введите имя" />
</div>
<div class="mb-3" style="max-width: 400px">
<input type="password" class="ui-input" placeholder="Введите имя" />
</div>CSS классы и свойства
| Класс | Описание |
|---|---|
|
|
Основной класс инпута |
|
|
Bootstrap пример - Отступ снизу от этого инпута |
|
|
Bootstrap пример - Ширина инпута в px |
|
|
Bootstrap пример - Ширина инпута в % от ширины родительского блока |
|
|
CSS - Цвет бекграунда инпута |
|
|
CSS - Цвет бордера инпута, когда он выделен |
|
|
CSS - Основной цвет текста инпута |
|
|
CSS - Цвет текста placeholder "Введите имя" или подобное |
"ui-selectpicker" Выпадающий список
Выпадающий список, полностью кастомизированный Bootstrap Select с выпадающими для выбора элементами.
<div class="ui-selectpicker">
<label for="database" class="ui-floating-label">Подразделение</label>
<select class="selectpicker"
data-size="4"
name="database"
id="database"
title="Выберите подразделение">
<option>Тула</option>
<option>Москва</option>
<option>Новосибирск</option>
</select>
</div>CSS классы и свойства
| Класс | Описание |
|---|---|
|
|
Основной класс кастомизированного списка |
|
|
Основной класс Bootstarp списка |
|
|
Лейбочка селекта, которая отображается сверху на бордере |
|
|
Количество строк в выпадющем списке для выбора |
|
|
CSS - Цвет бекграунда списка |
|
|
CSS - Цвет основного текста |
|
|
CSS - Цвет текста плейсхолдера "Выберете подразделение" |
|
|
CSS - Цвет бордера селекта, когда он выделен |
|
|
CSS - Цвет текста элемента при наведении мышкой |
"ui-dropdown" Кастомный Dropdown с группами
Выпадающий список, полностью кастомизированный Dropdown с группировкой элементов и вложенными элементами для выбора.
<div class="ui-dropdown">
<label for="dbInput" class="ui-floating-label">База данных</label>
<input type="text" class="form-control ui-dropdown-input"
id="dbInput" placeholder="Выберете базу данных" readonly>
<div class="ui-dropdown-menu" id="dropdownList">
<div class="ui-dropdown-group">
<div class="ui-dropdown-group-title">MySQL Сервер</div>
<div class="ui-dropdown-item" data-id="1" data-name="База 1">База 1</div>
<div class="ui-dropdown-item" data-id="2" data-name="База 2">База 2</div>
</div>
</div>
</div>CSS классы и свойства
| Класс | Описание |
|---|---|
|
|
Основной класс кастомизированного списка |
|
|
Основное окно выпадающего списка с элементами |
|
|
Группа которая внутри содержи заголовок и список элементов, каждая группа оборачивается в этот элемент, к примеру при шаблонизации |
|
|
Заголовок группы, который внутри состоит из элемента или списка элементов для выбора |
|
|
Элемент внутри группы, который можно выбрать, этих элементов может быть несколько внутри группы |
|
|
Лейбочка dropdown, которая отображается сверху на бордере |
|
|
CSS - Цвет бекграунда списка |
|
|
CSS - Цвет основного текста |
|
|
CSS - Цвет текста плейсхолдера "Выберете базу данных" |
|
|
CSS - Цвет бордера dropdown, когда он выделен |
|
|
CSS - Цвет текста элемента при наведении мышкой |
Форма авторизации
Готовая форма авторизации, объединяющая все кастомные компоненты. Включает поля для имени пользователя, пароля, выбора подразделения и базы данных.
Введите учетные данные
Заготовка формы Login содержит в себе блоки html, css, js и находится в библиотеке элементов,
готова к переиспользованию и рефакторингу, находится в /ui-block