Текстовые поля

form
sm
md
lg
xl

В SIMAI Framework с помощью модификаторов можно костомизировать текстовые поля форм

Описание

Обновите элементы управления текстовой формой, такие как input и textarea, с помощью настраиваемых стилей, размеров, состояний фокуса и т.д.

Примеры

<div class="m-bottom-1">
	<label for="exampleFormControlInput1" class="inline-block m-bottom-1/3">
		Email адрес
	</label>
	<input type="email" class="w-full block weight-4 appearance-none transition bg-origin-padding p-top-1/3 p-bottom-1/3 p-right-1/2 p-left-1/2 text-1 radius-1/3 color-on-surface bg-surface-0 border-1 border-surface-lowest" id="exampleFormControlInput1" placeholder="name@example.com">
</div>
<div class="m-bottom-1">
	<label for="exampleFormControlTextarea1" class="inline-block m-bottom-1/3">
		Многострочный текст
	</label>
	<textarea class="w-full block weight-4 appearance-none transition bg-origin-padding p-top-1/3 p-bottom-1/3 p-right-1/2 p-left-1/2 text-1 radius-1/3 color-on-surface bg-surface-0 border-1 border-surface-lowest" id="exampleFormControlTextarea1" rows="3"></textarea>
</div>

Размеры

<input class="w-full block weight-4 appearance-none transition bg-origin-padding p-top-1/2 p-bottom-1/2 p-right-1 p-left-1 text-2 radius-1/2 color-on-surface bg-surface-0 border-1 border-surface-lowest m-bottom-1" type="text" placeholder="Большой" aria-label="Пример большого поля">
<input class="w-full block weight-4 appearance-none transition bg-origin-padding p-top-1/3 p-bottom-1/3 p-right-1/2 p-left-1/2 text-1 radius-1/3 color-on-surface bg-surface-0 border-1 border-surface-lowest m-bottom-1" type="text" placeholder="По умолчанию" aria-label="Пример поля по умолчанию">
<input class="w-full block weight-4 appearance-none transition bg-origin-padding p-top-1/3 p-bottom-1/3 p-right-1/3 p-left-1/3 text-1/2 radius-1/3 color-on-surface bg-surface-0 border-1 border-surface-lowest" type="text" placeholder="Маленький" aria-label="Пример маленького поля">

Отключенный ввод

Добавьте атрибут disabled, чтобы он выглядел серым.

<input class="w-full block weight-4 appearance-none transition bg-origin-padding p-top-1/3 p-bottom-1/3 p-right-1/2 p-left-1/2 text-1 radius-1/3 bg-surface-2 border-1 border-surface-lowest m-bottom-1" type="text" placeholder="Ввод отключен" aria-label="Пример отлюченного ввода" disabled>
<input class="w-full block weight-4 appearance-none transition bg-origin-padding p-top-1/3 p-bottom-1/3 p-right-1/2 p-left-1/2 text-1 radius-1/3 bg-surface-2 border-1 border-surface-lowest" type="text" value="Ввод отключен только для чтения" aria-label="Пример отлюченного ввода" disabled readonly>

Только для чтение

Добавьте атрибут readonly, чтобы предотвратить изменение значения. Поля только для чтения, выглядят светлее (как и отключенные), но сохраняют стандартный курсор.

<input class="w-full block weight-4 appearance-none transition bg-origin-padding p-top-1/3 p-bottom-1/3 p-right-1/2 p-left-1/2 text-1 radius-1/3 bg-surface-2 border-1 border-surface-lowest" type="text" value="Только для чтения..." aria-label="пример ввода только для чтения" readonly>

Обычный текст, только для чтения

<div class="m-bottom-1 grid grid-col-12 gap-1">
	<label for="staticEmail" class="col-span-2 p-top-1/3 p-bottom-1/3 m-bottom-0 t-inherit string-normal">Email</label>
	<div class="col-span-10">
		<input type="text" readonly class="w-full block weight-4 appearance-none transition bg-origin-padding p-right-0 p-left-0 p-top-1/3 p-bottom-1/3 text-1 radius-1/3 color-on-surface bg-transparent border-0" id="staticEmail" value="email@example.com">
	</div>
</div>
<div class="grid grid-col-12 gap-1">
	<label for="inputPassword" class="col-span-2 p-top-1/3 p-bottom-1/3 m-bottom-0 t-inherit string-normal">Пароль</label>
	<div class="col-span-10">
		<input type="password" class="w-full block weight-4 appearance-none transition bg-origin-padding p-top-1/3 p-bottom-1/3 p-right-1/2 p-left-1/2 text-1 radius-1/3 color-on-surface bg-surface-0 border-1 border-surface-lowest" id="inputPassword">
	</div>
</div>
<form class="grid grid-col-3 gap-1">
	<div class="col-auto m-bottom-1">
		<label for="staticEmail2" class="hidden">
			Email
		</label>
		<input type="text" readonly class="w-full block weight-4 appearance-none transition bg-origin-padding p-right-0 p-left-0 p-top-1/3 p-bottom-1/3 text-1 radius-1/3 color-on-surface bg-transparent border-0" id="staticEmail2" value="email@example.com">
	</div>
	<div class="col-auto m-bottom-1">
		<label for="inputPassword2" class="hidden">
			Пароль
		</label>
		<input type="password" class="w-full block weight-4 appearance-none transition bg-origin-padding p-top-1/3 p-bottom-1/3 p-right-1/2 p-left-1/2 text-1 radius-1/3 color-on-surface bg-surface-0 border-1 border-surface-lowest" id="inputPassword2" placeholder="Пароль">
	</div>
	<div class="col-auto">
		<button type="submit" class="p-top-1/3 p-bottom-1/3 p-right-1/2 p-left-1/2 color-on-surface-inverse cursor-pointer bg-error hover:bg-error border-1 border-error hover:bg-surface-0 hover:color-on-surface transition text-1 radius-1/3">Подтвердить</button>
	</div>
</form>

Загрузка файла

<div class="m-bottom-1">
	<label for="formFile" class="inline-block m-bottom-1/3">
		Загрузка файла по умолчанию
	</label>
	<input class="w-full block weight-4 appearance-none transition bg-origin-padding p-top-1/3 p-bottom-1/3 p-right-1/2 p-left-1/2 text-1 radius-1/3 color-on-surface bg-surface-0 border-1 border-surface-lowest file-selector-button:font-inherit file-selector-button:t-inherit file-selector-button:bg-surface-2 file-selector-button:c-inherit file-selector-button:b-end-1 file-selector-button:b-inherit file-selector-button:b-solid file-selector-button:r-0 file-selector-button:b-0 file-selector-button:pointer-event-none file-selector-button:m-end-2 file-selector-button:-my-1 file-selector-button:-mx-2 file-selector-button:p-top-1/3 p-bottom-1/3 file-selector-button:p-right-1/2 p-left-1/2 cursor-pointer hover:file-selector-button:bg-surface-1 file-selector-button:transition" type="file" id="formFile">
</div>
<div class="m-bottom-1">
	<label for="formFileMultiple" class="inline-block m-bottom-1/3">
		Загрузка нескольких файлов
	</label>
	<input class="w-full block weight-4 appearance-none transition bg-origin-padding p-top-1/3 p-bottom-1/3 p-right-1/2 p-left-1/2 text-1 radius-1/3 color-on-surface bg-surface-0 border-1 border-surface-lowest file-selector-button:font-inherit file-selector-button:t-inherit file-selector-button:bg-surface-2 file-selector-button:c-inherit file-selector-button:b-end-1 file-selector-button:b-inherit file-selector-button:b-solid file-selector-button:r-0 file-selector-button:b-0 file-selector-button:pointer-event-none file-selector-button:m-end-2 file-selector-button:-my-1 file-selector-button:-mx-2 file-selector-button:p-top-1/3 p-bottom-1/3 file-selector-button:p-right-1/2 p-left-1/2 cursor-pointer hover:file-selector-button:bg-surface-1 file-selector-button:transition" type="file" id="formFileMultiple" multiple>
</div>
<div class="m-bottom-1">
	<label for="formFileDisabled" class="inline-block m-bottom-1/3">
		Загрузка файлов отключена
	</label>
	<input class="w-full block weight-4 appearance-none transition bg-origin-padding p-top-1/3 p-bottom-1/3 p-right-1/2 p-left-1/2 text-1 radius-1/3 bg-surface-2 border-1 border-surface-lowest file-selector-button:font-inherit file-selector-button:t-inherit file-selector-button:bg-surface-2 file-selector-button:c-inherit file-selector-button:b-end-1 file-selector-button:b-inherit file-selector-button:b-solid file-selector-button:r-0 file-selector-button:b-0 file-selector-button:pointer-event-none file-selector-button:m-end-2 file-selector-button:-my-1 file-selector-button:-mx-2 file-selector-button:p-top-1/3 p-bottom-1/3 file-selector-button:p-right-1/2 p-left-1/2" type="file" id="formFileDisabled" disabled>
</div>
<div class="m-bottom-1">
	<label for="formFileSm" class="inline-block m-bottom-1/3">
		Малый размера поля для загрузки файла
	</label>
	<input class="w-full block weight-4 appearance-none transition bg-origin-padding p-top-1/3 p-bottom-1/3 p-right-1/3 p-left-1/3 text-1/2 radius-1/3 color-on-surface bg-surface-0 border-1 border-surface-lowest file-selector-button:font-inherit file-selector-button:t-inherit file-selector-button:bg-surface-2 file-selector-button:c-inherit file-selector-button:b-end-1 file-selector-button:b-inherit file-selector-button:b-solid file-selector-button:r-0 file-selector-button:b-0 file-selector-button:pointer-event-none file-selector-button:m-end-1 file-selector-button:-my-1 file-selector-button:-mx-1 file-selector-button:p-top-1/3 p-bottom-1/3 file-selector-button:p-right-1/3 p-left-1/3 cursor-pointer hover:file-selector-button:bg-surface-1 file-selector-button:transition" id="formFileSm" type="file">
</div>
<div>
	<label for="formFileLg" class="inline-block m-bottom-1/3">
		Большой размер поля для загрузки файла
	</label>
	<input class="w-full block weight-4 appearance-none transition bg-origin-padding p-top-1/2 p-bottom-1/2 p-right-1 p-left-1 text-2 radius-1/2 color-on-surface bg-surface-0 border-1 border-surface-lowest file-selector-button:font-inherit file-selector-button:t-inherit file-selector-button:bg-surface-2 file-selector-button:c-inherit file-selector-button:b-end-1 file-selector-button:b-inherit file-selector-button:b-solid file-selector-button:r-0 file-selector-button:b-0 file-selector-button:pointer-event-none file-selector-button:m-end-3 file-selector-button:-my-2 file-selector-button:-mx-3 file-selector-button:p-top-1/2 p-bottom-1/2 file-selector-button:p-right-1 p-left-1 cursor-pointer hover:file-selector-button:bg-surface-1 file-selector-button:transition" id="formFileLg" type="file">
</div>

Цвет

<label for="exampleColorInput" class="inline-block m-bottom-1/3">
	Выбор цвета
</label>
<input type="color" class="w-d2 h-auto p-1/3 block border-1 border-surface-lowest radius-1/3 cursor-pointer webkit-color-swatch:h-b9 webkit-color-swatch:r-2" id="exampleColorInput" value="#563d7c" title="Выберите цвет">

Списки данных

Списки данных позволяют вам создать группу option, к которой можно получить доступ (и автозаполнение) из input. Они похожи на элементы select, но имеют больше ограничений и различий в стиле меню. Хотя большинство браузеров и операционных систем включают некоторую поддержку элементов datalist, их стиль в лучшем случае несовместим.

<label for="exampleDataList" class="inline-block m-bottom-1/3">
	Список данных
</label>
<input class="w-full block weight-4 appearance-none transition bg-origin-padding p-top-1/3 p-bottom-1/3 p-right-1/2 p-left-1/2 text-1 radius-1/3 color-on-surface bg-surface-0 border-1 border-surface-lowest" list="datalistOptions" id="exampleDataList" placeholder="Введите для поиска...">
<datalist id="datalistOptions">
	<option value="Санкт-Петербург">
	<option value="Москва">
	<option value="Казань">
	<option value="Нижний-новгород">
	<option value="Уфа">
</datalist>

Адаптивность

Для установки адаптивности элементов формы, начиная с определенного размера области просмотра, добавьте префикс контрольной точки (sm, md, lg, xl) через двоеточие (:) к любому модификатору.

Для получения дополнительной информации об адаптивности ознакомьтесь с документацией.

Изменить статью