Поля с плавающим заголовком
floating-labels
sm
md
lg
xl
В SIMAI Framework с помощью модификаторов можно костомизировать элементы форм
Описание
Атрибут placeholder требуется для каждого input, поскольку наш метод плавающих меток с использованием только стилей использует псевдоэлемент :placeholder-shown. Также обратите внимание, что input должен идти первым, чтобы мы могли использовать селектор-брат (например, +).
<div class="relative m-bottom-1">
<input type="email" class="h-d5 block w-full color-on-surface bg-surface-0 appearance-none radius-1/3 p-right-1 p-left-1 p-top-1 p-bottom-1 placeholder:c-transparent focus:pt-c3 focus:pb-b0 border-1 border-surface-lowest focus:t-b4+t-b6 focus:top-0+-top-a8 not:placeholder-show:pt-c3 not:placeholder-show:pb-b0 not:placeholder-show:o-full+o-6 focus:o-full+o-6 not:placeholder-show:t-b4+t-b6 not:placeholder-show:top-0+-top-a8" id="floatingInput" placeholder="name@example.com">
<label class="h-full absolute pointer-event-none p-top-1 p-bottom-1 p-right-1 p-left-1 top-0 left-0 transition-all origin-center t-b6 o-full" for="floatingInput">Email адрес</label>
</div>
<div class="relative">
<input type="password" class="h-d5 block w-full color-on-surface bg-surface-0 appearance-none radius-1/3 p-right-1 p-left-1 p-top-1 p-bottom-1 placeholder:c-transparent focus:pt-c3 focus:pb-b0 border-1 border-surface-lowest focus:t-b4+t-b6 focus:top-0+-top-a8 not:placeholder-show:pt-c3 not:placeholder-show:pb-b0 not:placeholder-show:o-full+o-6 focus:o-full+o-6 not:placeholder-show:t-b4+t-b6 not:placeholder-show:top-0+-top-a8" id="floatingPassword" placeholder="Пароль">
<label class="h-full absolute pointer-event-none p-top-1 p-bottom-1 p-right-1 p-left-1 top-0 left-0 transition-all origin-center t-b6 o-full" for="floatingPassword">Пароль</label>
</div>Когда значение уже определено, label автоматически подстраивается под свое плавающее положение.
<form class="relative">
<input type="email" class="h-d5 block w-full color-on-surface bg-surface-0 appearance-none radius-1/3 p-right-1 p-left-1 p-top-1 p-bottom-1 placeholder:c-transparent focus:pt-c3 focus:pb-b0 border-1 border-surface-lowest focus:t-b4+t-b6 focus:top-0+-top-a8 not:placeholder-show:pt-c3 not:placeholder-show:pb-b0 not:placeholder-show:o-full+o-6 focus:o-full+o-6 not:placeholder-show:t-b4+t-b6 not:placeholder-show:top-0+-top-a8" id="floatingInputValue" placeholder="name@example.com" value="test@example.com">
<label class="h-full absolute pointer-event-none p-top-1 p-bottom-1 p-right-1 p-left-1 top-0 left-0 transition-all origin-center t-b6 o-full" for="floatingInputValue">
Поле со значением
</label>
</form>Стили проверки формы также работают должным образом.
<form class="relative">
<input type="email" class="h-d5 block w-full color-on-surface bg-surface-0 appearance-none radius-1/3 p-right-1 p-left-1 p-top-1 p-bottom-1 placeholder:c-transparent focus:pt-c3 focus:pb-b0 border-1 border-surface-lowest focus:t-b4+t-b6 focus:top-0+-top-a8 not:placeholder-show:pt-c3 not:placeholder-show:pb-b0 not:placeholder-show:o-full+o-6 focus:o-full+o-6 not:placeholder-show:t-b4+t-b6 not:placeholder-show:top-0+-top-a8 invalid:bg-warning-circle invalid:b-red p-right-1 bg-repeat-none bg-right-b6 bg-size-c0" pattern="2-[0-9]{3}-[0-9]{3}" id="floatingInputInvalid" placeholder="name@example.com" value="test@example.com">
<label class="h-full absolute pointer-event-none p-top-1 p-bottom-1 p-right-1 p-left-1 top-0 left-0 transition-all origin-center t-b6 o-full" for="floatingInputInvalid">Некорректный ввод</label>
</form>Многострочное текстовое поле
По умолчанию многострочное текстовое поле будет той же высоты, как и обычное
<div class="relative">
<textarea class="h-d5 block w-full color-on-surface bg-surface-0 appearance-none radius-1/3 p-right-1 p-left-1 p-top-1 p-bottom-1 placeholder:c-transparent focus:pt-c3 focus:pb-b0 border-1 border-surface-lowest focus:t-b4+t-b6 focus:top-0+-top-a8 not:placeholder-show:pt-c3 not:placeholder-show:pb-b0 not:placeholder-show:o-full+o-6 focus:o-full+o-6 not:placeholder-show:t-b4+t-b6 not:placeholder-show:top-0+-top-a8" placeholder="Leave a comment here" id="floatingTextarea"></textarea>
<label class="h-full absolute pointer-event-none p-top-1 p-bottom-1 p-right-1 p-left-1 top-0 left-0 transition-all origin-center t-b6 o-full" for="floatingTextarea">Комментаний</label>
</div>Чтобы установить произвольную высоту для вашего textarea, не используйте атрибут rows. Вместо этого установите явную высоту (встроенную или с помощью настраиваемого CSS).
<div class="relative">
<textarea class="h-d5 block w-full color-on-surface bg-surface-0 appearance-none radius-1/3 p-right-1 p-left-1 p-top-1 p-bottom-1 placeholder:c-transparent focus:pt-c3 focus:pb-b0 border-1 border-surface-lowest focus:t-b4+t-b6 focus:top-0+-top-a8 not:placeholder-show:pt-c3 not:placeholder-show:pb-b0 not:placeholder-show:o-full+o-6 focus:o-full+o-6 not:placeholder-show:t-b4+t-b6 not:placeholder-show:top-0+-top-a8" placeholder="Leave a comment here" id="floatingTextarea2" style="height: 100px"></textarea>
<label class="h-full absolute pointer-event-none p-top-1 p-bottom-1 p-right-1 p-left-1 top-0 left-0 transition-all origin-center t-b6 o-full" for="floatingTextarea2">Комментаний</label>
</div>Выпадающий список
<div class="relative">
<select class="h-d5 block w-full color-on-surface bg-surface-0 appearance-none radius-1/3 p-right-1 p-left-1 bg-arrow-down bg-right-b2 bg-origin-padding bg-repeat-none pt-c3 pb-b0 border-1 border-surface-lowest" id="floatingSelect" aria-label="Пример выпдающего списка с плавающим заголовком">
<option selected>Откройте выпадайющий список</option>
<option value="1">Один</option>
<option value="2">Два</option>
<option value="3">Три</option>
</select>
<label class="h-full absolute pointer-event-none p-top-1 p-bottom-1 p-right-1 p-left-1 -top-a8 t-b4 o-6" for="floatingSelect">
Работа с выпадающим списком
</label>
</div>Макеты
При работе с сеткой обязательно размещайте элементы формы в классах столбцов.
<div class="grid grid-col-12 gap-1">
<div class="col-span-6">
<div class="relative">
<input type="email" class="h-d5 block w-full color-on-surface bg-surface-0 appearance-none radius-1/3 p-right-1 p-left-1 p-top-1 p-bottom-1 placeholder:c-transparent focus:pt-c3 focus:pb-b0 border-1 border-surface-lowest focus:t-b4+t-b6 focus:top-0+-top-a8 not:placeholder-show:pt-c3 not:placeholder-show:pb-b0 not:placeholder-show:o-full+o-6 focus:o-full+o-6 not:placeholder-show:t-b4+t-b6 not:placeholder-show:top-0+-top-a8" id="floatingInputGrid" placeholder="name@example.com" value="mdo@example.com">
<label class="h-full absolute pointer-event-none p-top-1 p-bottom-1 p-right-1 p-left-1 top-0 left-0 transition-all origin-center t-b6 o-full" for="floatingInputGrid">
Email адрес
</label>
</div>
</div>
<div class="col-span-6">
<div class="relative">
<select class="h-d5 block w-full color-on-surface bg-surface-0 appearance-none radius-1/3 p-right-1 p-left-1 bg-arrow-down bg-right-b2 bg-origin-padding bg-repeat-none pt-c3 pb-b0 border-1 border-surface-lowest" id="floatingSelectGrid" aria-label="Пример выпдающего списка с плавающим заголовком">
<option selected>Откройте выпдающий список</option>
<option value="1">Один</option>
<option value="2">Два</option>
<option value="3">Три</option>
</select>
<label class="h-full absolute pointer-event-none p-top-1 p-bottom-1 p-right-1 p-left-1 -top-a8 t-b4 o-6" for="floatingSelectGrid">
Работа с выпадающим списком
</label>
</div>
</div>
</div>Без границ
<div class="grid grid-col-12 gap-1">
<div class="col-span-12">
<div class="relative">
<input type="email" class="not:placeholder-show:b-gray-3 transition-all outline-none h-d5 block w-full color-on-surface bg-surface-0 appearance-none radius-1/3 p-right-1 p-left-1 p-top-1 p-bottom-1 placeholder:c-transparent focus:pt-c3 focus:pb-b0 border-1 focus:b-gray-3 hover:b-gray-3 border-transparent focus:t-b4+t-b6 focus:top-0+-top-a8 not:placeholder-show:pt-c3 not:placeholder-show:pb-b0 not:placeholder-show:o-full+o-6 focus:o-full+o-6 not:placeholder-show:t-b4+t-b6 not:placeholder-show:top-0+-top-a8" id="floatingInput" placeholder="name@example.com">
<label class="h-full absolute pointer-event-none p-top-1 p-bottom-1 p-right-1 p-left-1 top-0 left-0 transition-all origin-center t-b6 o-full" for="floatingInput">Email адрес</label>
</div>
</div>
<div class="col-span-12">
<div class="relative">
<input type="email" class="not:placeholder-show:b-gray-3 outline-none transition-all h-d5 block w-full color-on-surface bg-surface-0 appearance-none radius-1/3 p-right-1 p-left-1 p-top-1 p-bottom-1 placeholder:c-transparent focus:pt-c3 focus:pb-b0 border-1 hover:b-gray-3 focus:b-gray-3 border-transparent focus:t-b4+t-b6 focus:top-0+-top-a8 not:placeholder-show:pt-c3 not:placeholder-show:pb-b0 not:placeholder-show:o-full+o-6 focus:o-full+o-6 not:placeholder-show:t-b4+t-b6 not:placeholder-show:top-0+-top-a8" id="floatingInputGrid" placeholder="name@example.com" value="mdo@example.com">
<label class="h-full absolute pointer-event-none p-top-1 p-bottom-1 p-right-1 p-left-1 top-0 left-0 transition-all origin-center t-b6 o-full" for="floatingInputGrid">
Email адрес
</label>
</div>
</div>
<div class="col-span-12">
<div class="relative">
<select class="not:placeholder-show:b-gray-3 cursor-pointer transition-all outline-none h-d5 block w-full color-on-surface bg-surface-0 appearance-none radius-1/3 p-right-1 p-left-1 bg-arrow-down bg-right-b2 bg-origin-padding bg-repeat-none pt-c3 pb-b0 border-1 hover:b-gray-3 focus:b-gray-3 border-transparent" id="floatingSelectGrid" aria-label="Пример выпдающего списка с плавающим заголовком">
<option selected>Откройте выпдающий список</option>
<option value="1">Один</option>
<option value="2">Два</option>
<option value="3">Три</option>
</select>
<label class="h-full absolute pointer-event-none p-top-1 p-bottom-1 p-right-1 p-left-1 -top-a8 t-b4 o-6" for="floatingSelectGrid">
Работа с выпадающим списком
</label>
</div>
</div>
</div>Адаптивность
Для установки адаптивности элементов формы, начиная с определенного размера области просмотра, добавьте префикс контрольной точки (sm, md, lg, xl) через двоеточие (:) к любому модификатору.
Для получения дополнительной информации об адаптивности ознакомьтесь с документацией.