Макет

layout
sm
md
lg
xl

В SIMAI Framework с помощью модификаторов можно структурировать поля вашей формы — с нашими вариатами макета или создать свои варианты в любых сочетаних.

Сетка

С помощью наших классов сетки можно создавать более сложные формы. Используйте их для макетов форм, которые требуют нескольких столбцов, различной ширины и дополнительных параметров выравнивания.

<div class="grid grid-col-12 gap-1">
    <div class="col-span-6">
        <input type="text" 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 c-main bg-surface-0 border-1 border-surface-lowest" placeholder="Имя" aria-label="Имя">
    </div>
    <div class="col-span-6">
        <input type="text" 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 c-main bg-surface-0 border-1 border-surface-lowest" placeholder="Фамилия" aria-label="Фамилия">
    </div>
</div>

Более сложные макеты также могут быть созданы с помощью нашей системы сетки.

<form class="grid grid-col-12 gap-1">
    <div class="col-span-6">
        <label for="inputEmail4" 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 c-main bg-surface-0 border-1 border-surface-lowest" id="inputEmail4">
    </div>
    <div class="col-span-6">
        <label for="inputPassword4" class="inline-block m-bottom-1/3">Пароль</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 c-main bg-surface-0 border-1 border-surface-lowest" id="inputPassword4">
    </div>
    <div class="col-span-12">
        <label for="inputAddress" class="inline-block m-bottom-1/3">Адрес</label>
        <input type="text" 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 c-main bg-surface-0 border-1 border-surface-lowest" id="inputAddress" placeholder="Кремль">
    </div>
    <div class="col-span-12">
        <label for="inputAddress2" class="inline-block m-bottom-1/3">Адрес 2</label>
        <input type="text" 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 c-main bg-surface-0 border-1 border-surface-lowest" id="inputAddress2" placeholder="Квартира, студия или этаж">
    </div>
    <div class="col-span-6">
        <label for="inputCity" class="inline-block m-bottom-1/3">Город</label>
        <input type="text" 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 c-main bg-surface-0 border-1 border-surface-lowest" id="inputCity">
    </div>
    <div class="col-span-4">
        <label for="inputState" class="inline-block m-bottom-1/3">Состояние</label>
        <select id="inputState" class="w-full block weight-4 appearance-none transition 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 bg-origin-padding bg-arrow-down bg-right-b2 bg-repeat-none">
            <option selected>Выберите...</option>
            <option>...</option>
        </select>
    </div>
    <div class="col-span-2">
        <label for="inputZip" class="inline-block m-bottom-1/3">Индекс</label>
        <input type="text" 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 c-main bg-surface-0 border-1 border-surface-lowest" id="inputZip">
    </div>
    <div class="col-span-12">
        <div class="flex items-cross-center">
            <input class="m-0 w-b6 h-b6 radius-1/3 border-1 appearance-none t-inherit string-inherit bg-surface-0 border-surface-lowest bg-contain bg-repeat-none bg-center checked:bg-blue checked:b-blue checked:bg-check indeterminate:bg-dash indeterminate:b-blue indeterminate:bg-blue" type="checkbox" id="gridCheck">
            <label class="inline-block m-left-1/3" for="gridCheck">
                Отправить
            </label>
        </div>
    </div>
    <div class="col-span-12">
        <button type="submit" class="p-right-1 p-left-1 p-top-1/3 p-bottom-1/3 bg-error hover:bg-surface-0 color-on-surface-inverse hover:color-on-surface border-1 border-error transition-all text-1 radius-1/3 cursor-pointer">Войти</button>
    </div>
</form>

Горизонатальные формы

Создавайте горизонтальные формы с сеткой, добавляя модификатор grid для формирования сетки, модификотор g-col-* для указания количества частей на которые делится строка и модификатор g-* для формирования отступов между колонками. В группы форм добавляйте модификатор col-span-* для указания ширины меток и элементов управления. Не забудьте также добавить col-form-label к своим элементам <label>, чтобы они располагались по центру по вертикали вместе со связанными с ними элементами управления формой.

Радиокнопки 
<form>
    <div class="grid grid-col-12 gap-1 m-bottom-1">
        <label for="inputEmail3" class="col-span-3 inline-block">
            Email
        </label>
        <div class="col-span-9">
            <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 c-main bg-surface-0 border-1 border-surface-lowest" id="inputEmail3">
        </div>
    </div>
    <div class="grid grid-col-12 gap-1 m-bottom-1">
        <label for="inputPassword3" class="col-span-3 inline-block">
            Пароль
        </label>
        <div class="col-span-9">
            <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 c-main bg-surface-0 border-1 border-surface-lowest" id="inputPassword3">
        </div>
    </div>
    <fieldset class="m-bottom-1 mx-0 p-right-0 p-left-0">
        <div class="grid grid-col-12 gap-1">
            <legend class="inline-block col-span-3 p-top-0">
                Радиокнопки
            </legend>
            <div class="col-span-9">
                <div class="flex items-cross-center">
                    <input class="m-0 w-b6 h-b6 radius-1/3 border-1 appearance-none t-inherit string-inherit bg-surface-0 border-surface-lowest bg-contain bg-repeat-none bg-center checked:bg-blue checked:b-blue checked:bg-circle radius-full" type="radio" name="gridRadios" id="gridRadios1" value="option1" checked>
                    <label class="inline-block m-left-1/3" for="gridRadios1">
                        Радиокнопка 1
                    </label>
                </div>
                <div class="flex items-cross-center">
                    <input class="m-0 w-b6 h-b6 radius-1/3 border-1 appearance-none t-inherit string-inherit bg-surface-0 border-surface-lowest bg-contain bg-repeat-none bg-center checked:bg-blue checked:b-blue checked:bg-circle radius-full" type="radio" name="gridRadios" id="gridRadios2" value="option2">
                    <label class="inline-block m-left-1/3" for="gridRadios2">
                        Радиокнопка 2
                    </label>
                </div>
                <div class="flex items-cross-center">
                    <input class="m-0 w-b6 h-b6 radius-1/3 border-1 appearance-none t-inherit string-inherit bg-surface-0 border-surface-lowest bg-contain bg-repeat-none bg-center checked:bg-blue checked:b-blue checked:bg-circle radius-full disabled:o-5 disabled:pointer-event-none" type="radio" name="gridRadios" id="gridRadios3" value="option3" disabled>
                    <label class="inline-block m-left-1/3 opacity-5" for="gridRadios3">
                        Радиокнопка 3 - Выключена
                    </label>
                </div>
            </div>
        </div>
    </fieldset>
    <div class="grid grid-col-12 gap-1 m-bottom-1">
        <div class="col-span-3"></div>
        <div class="col-span-9">
            <div class="flex items-cross-center">
                <input class="m-0 w-b6 h-b6 radius-1/3 border-1 appearance-none t-inherit string-inherit bg-surface-0 border-surface-lowest bg-contain bg-repeat-none bg-center checked:bg-blue checked:b-blue checked:bg-check indeterminate:bg-dash indeterminate:b-blue indeterminate:bg-blue" type="checkbox" id="gridCheck1">
                <label class="inline-block m-left-1/3" for="gridCheck1">
                    Пример флажка
                </label>
            </div>
        </div>
    </div>
    <button type="submit" class="p-right-1 p-left-1 p-top-1/3 p-bottom-1/3 bg-error hover:bg-surface-0 color-on-surface-inverse hover:color-on-surface border-1 border-error transition-all text-1 radius-1/3 cursor-pointer">Войти</button>
</form>

Размер заголовка горизонтальной формы

<div class="grid grid-col-12 gap-1 m-bottom-1">
    <label for="colFormLabelSm" class="col-span-2 inline-block text-1/2">
        Email
    </label>
    <div class="col-span-10">
        <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/3 p-left-1/3 text-1/2 radius-1/3 c-main bg-surface-0 border-1 border-surface-lowest" id="colFormLabelSm" placeholder="Меленькие">
    </div>
</div>
<div class="grid grid-col-12 gap-1 m-bottom-1">
    <label for="colFormLabel" class="col-span-2 inline-block">Email</label>
    <div class="col-span-10">
        <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 c-main bg-surface-0 border-1 border-surface-lowest" id="colFormLabel" placeholder="Обычные">
    </div>
</div>
<div class="grid grid-col-12 gap-1">
    <label for="colFormLabelLg" class="col-span-2 inline-block text-2">Email</label>
    <div class="col-span-10">
        <input type="email" 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 c-main bg-surface-0 border-1 border-surface-lowest" id="colFormLabelLg" placeholder="Большие">
    </div>
</div>

Размер столбца

Как показано в предыдущих примерах, наша система сетки позволяет размещать любое количество столбцов в строке. Они будут делить доступную ширину поровну между собой. Вы также можете выбрать подмножество своих столбцов, чтобы они занимали больше или меньше места, в то время как оставшиеся col-span-auto поровну делят остальные с определенными классами столбцов, такими как col-sm-2.

<div class="grid grid-col-4 gap-1">
    <div class="col-span-2">
        <input type="text" 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 c-main bg-surface-0 border-1 border-surface-lowest" placeholder="Город" aria-label="Город">
    </div>
    <div class="col-auto">
        <input type="text" 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 c-main bg-surface-0 border-1 border-surface-lowest" placeholder="Страна" aria-label="Страна">
    </div>
    <div class="col-auto">
        <input type="text" 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 c-main bg-surface-0 border-1 border-surface-lowest" placeholder="Индекс" aria-label="Индекс">
    </div>
</div>

Автоматический размер

В приведенном ниже примере используется модификаторы flexbox для вертикального центрирования содержимого и изменения .col на .col-auto, чтобы ваши столбцы занимали ровно столько места, сколько необходимо. Другими словами, размер столбца зависит от содержимого.

@
<form class="grid grid-col-3 gap-1">
    <div class="col-auto">
        <label class="hidden" for="autoSizingInput">Имя</label>
        <input type="text" 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 c-main bg-surface-0 border-1 border-surface-lowest" id="autoSizingInput" placeholder="Jane Doe">
    </div>
    <div class="col-auto">
        <label class="hidden" for="autoSizingInputGroup">Имя пользователя</label>
        <div class="flex flex-wrap items-cross-stretch w-full">
            <div class="flex items-cross-center color-on-surface bg-surface-2 border-top-1 border-bottom-1 border-surface-container p-top-1/3 p-bottom-1/3 p-right-1/2 p-left-1/2 text-1 radius-left-1/3 border-left-1">@</div>
            <input type="text" class="w-px grow shrink basis-auto block weight-4 appearance-none transition bg-origin-padding border-top-1 border-bottom-1 border-surface-container color-on-surface bg-surface-0 p-top-1/3 p-bottom-1/3 p-right-1/2 p-left-1/2 text-1 radius-right-1/3 border-right-1" id="autoSizingInputGroup" placeholder="Имя пользователя">
        </div>
    </div>
    <div class="col-auto">
        <label class="hidden" for="autoSizingSelect">Предпочтения</label>
        <select class="w-full block weight-4 appearance-none transition 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 bg-origin-padding bg-arrow-down bg-right-b2 bg-repeat-none" id="autoSizingSelect">
            <option selected>Выберите...</option>
            <option value="1">Один</option>
            <option value="2">Два</option>
            <option value="3">Три</option>
        </select>
    </div>
    <div class="col-auto flex items-cross-center">
        <div class="flex items-cross-center">
            <input class="m-0 w-b6 h-b6 radius-1/3 border-1 appearance-none t-inherit string-inherit bg-surface-0 border-surface-lowest bg-contain bg-repeat-none bg-center checked:bg-blue checked:b-blue checked:bg-check indeterminate:bg-dash indeterminate:b-blue indeterminate:bg-blue" type="checkbox" id="autoSizingCheck">
            <label class="inline-block m-left-1/3" for="autoSizingCheck">
                Запомнить меня
            </label>
        </div>
    </div>
    <div class="col-auto flex items-cross-center">
        <button type="submit" class="p-right-1 p-left-1 p-top-1/3 p-bottom-1/3 bg-error hover:bg-surface-0 color-on-surface-inverse hover:color-on-surface border-1 border-error transition-all text-1 radius-1/3 cursor-pointer">Отправить</button>
    </div>
</form>

Затем вы можете снова смешать это с модификаторами столбцов в зависимости от размеров.

@
<form class="grid grid-col-9 gap-1">
    <div class="col-span-3">
        <label class="hidden" for="specificSizeInputName">Имя</label>
        <input type="text" 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 c-main bg-surface-0 border-1 border-surface-lowest" id="specificSizeInputName" placeholder="Jane Doe">
    </div>
    <div class="col-span-3">
        <label class="hidden" for="specificSizeInputGroupUsername">Имя пользователя</label>
        <div class="flex flex-wrap items-cross-stretch w-full">
            <div class="flex items-cross-center color-on-surface bg-surface-2 border-top-1 border-bottom-1 border-surface-container p-top-1/3 p-bottom-1/3 p-right-1/2 p-left-1/2 text-1 radius-left-1/3 border-left-1">@</div>
            <input type="text" class="w-px grow shrink basis-auto block weight-4 appearance-none transition bg-origin-padding border-top-1 border-bottom-1 border-surface-container color-on-surface bg-surface-0 p-top-1/3 p-bottom-1/3 p-right-1/2 p-left-1/2 text-1 radius-right-1/3 border-right-1" id="specificSizeInputGroupUsername" placeholder="Имя пользователя">
        </div>
    </div>
    <div class="col-span-3">
        <label class="hidden" for="specificSizeSelect">Предпочтения</label>
        <select class="w-full block weight-4 appearance-none transition 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 bg-origin-padding bg-arrow-down bg-right-b2 bg-repeat-none" id="specificSizeSelect">
            <option selected>Выберите...</option>
            <option value="1">Один</option>
            <option value="2">Два</option>
            <option value="3">Три</option>
        </select>
    </div>
    <div class="col-span-3 flex items-cross-center">
        <div class="flex items-cross-center">
            <input class="m-0 w-b6 h-b6 radius-1/3 border-1 appearance-none t-inherit string-inherit bg-surface-0 border-surface-lowest bg-contain bg-repeat-none bg-center checked:bg-blue checked:b-blue checked:bg-check indeterminate:bg-dash indeterminate:b-blue indeterminate:bg-blue" type="checkbox" id="autoSizingCheck2">
            <label class="inline-block m-left-1/3" for="autoSizingCheck2">
                Запомнить меня
            </label>
        </div>
    </div>
    <div class="col-auto">
        <button type="submit" class="p-right-1 p-left-1 p-top-1/3 p-bottom-1/3 bg-error hover:bg-surface-0 color-on-surface-inverse hover:color-on-surface border-1 border-error transition-all text-1 radius-1/3 cursor-pointer">Отправить</button>
    </div>
</form>

Формы в линию

@
<form class="grid grid-col-4 gap-1">
    <div class="col-auto">
        <label class="hidden" for="inlineFormInputGroupUsername">Имя пользователя</label>
        <div class="flex flex-wrap items-cross-stretch w-full">
            <div class="flex items-cross-center color-on-surface bg-surface-2 border-top-1 border-bottom-1 border-surface-container p-top-1/3 p-bottom-1/3 p-right-1/2 p-left-1/2 text-1 radius-left-1/3 border-left-1">@</div>
            <input type="text" class="w-px grow shrink basis-auto block weight-4 appearance-none transition bg-origin-padding border-top-1 border-bottom-1 border-surface-container color-on-surface bg-surface-0 p-top-1/3 p-bottom-1/3 p-right-1/2 p-left-1/2 text-1 radius-right-1/3 border-right-1" id="inlineFormInputGroupUsername" placeholder="Имя пользователя">
        </div>
    </div>

    <div class="col-auto">
        <label class="hidden" for="inlineFormSelectPref">Предпочтения</label>
        <select class="w-full block weight-4 appearance-none transition 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 bg-origin-padding bg-arrow-down bg-right-b2 bg-repeat-none" id="inlineFormSelectPref">
            <option selected>Выберите...</option>
            <option value="1">Один</option>
            <option value="2">Два</option>
            <option value="3">Три</option>
        </select>
    </div>

    <div class="col-auto">
        <div class="flex items-cross-center string-1/3 h-full">
            <input class="m-0 w-b6 h-b6 radius-1/3 border-1 appearance-none t-inherit string-inherit bg-surface-0 border-surface-lowest bg-contain bg-repeat-none bg-center checked:bg-blue checked:b-blue checked:bg-check indeterminate:bg-dash indeterminate:b-blue indeterminate:bg-blue" type="checkbox" id="inlineFormCheck">
            <label class="inline-block m-left-1/3 text-1/2" for="inlineFormCheck">
                Запомнить меня
            </label>
        </div>
    </div>
    <div class="col-auto">
        <button type="submit" class="p-right-1 p-left-1 p-top-1/3 p-bottom-1/3 bg-error hover:bg-surface-0 color-on-surface-inverse hover:color-on-surface border-1 border-error transition-all text-1 radius-1/3 cursor-pointer">Отправить</button>
    </div>
</form>

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

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

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

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