Формы
Формы и компоненты форм
Формы в наше время являются неотъемлемой частью сайта, где есть какие-либо поля ввода. PipUI имеет в себе компонент быстрой стилизации всех существующих элементов форм и даже больше.
Для начала работы подготовленных стилей, необходимо добавить компоненту формы класс .input
Input
<input type="text" class="input" placeholder=".input">
<input type="text" class="input focus" placeholder=".input.focus">
<input type="text" class="input" readonly placeholder=".input:readonly">
<input type="text" class="input" disabled placeholder=".input:disabled">
Select
<select class="input">
<option value="0">Item #1</option>
<option value="1">Item #2</option>
</select>
<select class="input focus">
<option value="0">Item #1</option>
<option value="1">Item #2</option>
</select>
<select class="input" disabled>
<option value="0">Item #1</option>
<option value="1">Item #2</option>
</select>
Multiple
Класс .input
поддерживает и мультиселекторы
<select class="input" multiple>
<option value="1">Item #1</option>
<option value="2">Item #2</option>
<option value="3">Item #3</option>
<option value="4" disabled>Item #4 (disabled)</option>
<option value="5">Item #5</option>
<option value="6">Item #6</option>
</select>
Textarea
<textarea class="input" placeholder=".input"></textarea>
Javascript
Помимо стандартного поле ввода со стилями, textarea может быть инициализована с помощью Javascript, что даст дополнительные возможности управления данной формой. Например, количество введенных строк, их копирование и др.
Для инициализации достаточно использовать следующий скрипт
<textarea class="input" id="textarea1" placeholder=".input"></textarea>
<script>new PipUI.Textarea('#textarea1');</script>
File
По умолчанию селектор выбора файлов имеет стили заданные браузером и которые не поддаются на данный момент кастомизации, но это можно исправить, если поместить такой селектор в контейнер label.input-file
и кастомизировать его, а сам селектор просто скрыть, что мы и сделали.
<label class="input-file btn"><input type="file">Выберите файл</label>
Checkbox
На данный момент флажки и переключатели плохо поддаются изменениям стандартных стилей браузеров, но мы так же нашли из этого выход.
<label><input type="checkbox" class="input"> Check it!</label>
Radio
<input type="radio" name="radio_example1" checked class="input">
<input type="radio" name="radio_example1" class="input">
Switch
По умолчанию в браузерах нет данных переключателей, но как и в случае с селекторами файлов, мы сделали это возможным. Для этого необходимо поместить checkbox с классом .input
в контейнер label.input-switch
<label class="input-switch"><input type="checkbox" class="input"></label>
Input Block
Блоки помогают использовать дополнительные возможности внутри общего контейнера.
В качестве контейнера необходимо создать блок с классом .input-block
и поместить в него форму ввода.
<div class="input-block">
<input type="text" class="input" placeholder=".input">
</div>
Label
Ярлыки позволяют добавить зависимое описание, при клике на которое, у формы появляется фокусировка.
<div class="input-block">
<label for="input-example-1"></label>
<input type="text" class="input" id="input-example-1" placeholder=".input">
</div>
Helper
Вспомогательные блоки служат в качестве дополнительной информации, которая появляется при наведении на контейнер. Данный блок можно использовать вместе с ярлыками.
<div class="input-block">
<label for="input-example-1"></label>
<input type="text" class="input" id="input-example-1" placeholder=".input">
<div class="input-helper">Block Helper Here</div>
</div>
Prepend / Append
Иногда бывают ситуации, когда необходимо вывести дополнительный контент до или после поля ввода или селектора. Для этих случаев есть дополнительный контейнер
.input-append-prepend
, который так же совместим с .input-block
.
Блок .prepend
выводит дополнительный контент перед полем ввода или селектором, а блок .append
, соответственно, после. Оба блока являются не обязательными в контейнере и могут использоваться как отдельно, так и вместе.
<div class="input-block">
<label for="input-block-example2">My Label</label>
<div class="input-append-prepend">
<div class="prepend">Hello</div>
<input type="text" id="input-block-example2" placeholder=".input" class="input">
<div class="append"><input type="checkbox" class="input"></div>
</div>
<div class="input-helper">Скрытая информация, появляющаяся при наведении</div>
</div>
Last updated