Особистий кабінет OneBox CRM
Зв'язатися з нами
+380673125776
+30932177090
+380995256783
Кабінет клієнтаБаза знань › Перегляд бази знань

Двойные формы

Двойные формы - это вариант разметки форм в системе BOX.
Он позволяет разделить форму на две области, в левой отображается основная информация, в правой - дополнительная.
Ширина таких блоков динамическая - это значит, что сам блок будет занимать всю ширину родителя, а его состовляющие - ширину в зависимости от классов-модификаторов.

Стандартный вывод

В стандартном выводе левая колонка занимает 2/3 формы, правая - 1/3.


<div class="ob-block-doubleform">
    <div class="wrap">
        <div class="left-column">
            <div class="form-element">
                <div class="element-caption">Main caption</div>
                Main text
            </div>
        </div>

        <div class="right-column">
            <div class="form-element">
                <div class="element-caption">Additional caption</div>
                Additional text
            </div>
        </div>
    </div>
</div>

Пример


Вывод без дополнительной колонки

Возможен и вывод без дополнительной(правой) колонки.
Для этого, достаточно просто убрать из разметки правую колонку. Левая при этом займет все освободившееся пространство.


<div class="ob-block-doubleform">
    <div class="wrap">
        <div class="left-column">
            <div class="form-element">
                <div class="element-caption">Main caption</div>
                Main text
            </div>
        </div>
    </div>
</div>

Пример


Симметричный вывод

Возможен и такой вариант, когда обе колонки имеют одинаковую ширину. Для этого необходимо использовать модификатор
.half
для правой колонки. Такой идеально подойдет в формах, где нужна симметрия для более понятного восприятия, например сравнении информации.


<div class="ob-block-doubleform">
    <div class="wrap">
        <div class="left-column">
            <div class="form-element">
                <div class="element-caption">Main caption</div>
                Main text
            </div>
        </div>

        <div class="right-column half">
            <div class="form-element">
                <div class="element-caption">Additional caption</div>
                Additional text
            </div>
        </div>
    </div>
</div>

Пример


Элементы форм

Элемент формы - это единичный параметр/значение, который используется в форме. Каждый элемент формы обозначается классом
.form-element

В данном элементе может присутствовать его название
.element-caption

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


<div class="ob-block-doubleform">
    <div class="wrap">
        <div class="left-column">
            <div class="form-element">
                <div class="element-caption">Main caption</div>
                Main text <span class="light">description text</span>
            </div>
            <div class="form-element">
                <div class="element-caption">Main caption</div>
                Main text
            </div>
            <div class="form-element">
                <div class="element-caption">Main caption</div>
                Main text
            </div>
        </div>

        <div class="right-column">
            <div class="form-element">
                <div class="element-caption">Additional caption <span class="light">description text</span></div>
                Additional text
            </div>
            <div class="form-element">
                <div class="element-caption">Additional caption</div>
                Additional text
            </div>
        </div>
    </div>
</div>

Пример


Группировка элементов форм

Для группировки элементов в форме необходимо использовать обвертки:
.double
- два элемента в строке,
.tripple
- три элемента в строке,
.four
- четыре элемента в строке.
Таким образом, каждую часть формы можно дополнительно разделить на свои части, для более гибкого вывода информации.


<div class="ob-block-doubleform">
    <div class="wrap">
        <div class="left-column">
            <div class="double">
                <div class="form-element">
                    <div class="element-caption">Main caption</div>
                    Main text
                </div>
                <div class="form-element">
                    <div class="element-caption">Main caption</div>
                    Main text
                </div>
            </div>
            <div class="form-element">
                <div class="element-caption">Main caption</div>
                Main text
            </div>
        </div>

        <div class="right-column">
            <div class="form-element">
                <div class="element-caption">Additional caption</div>
                Additional text
            </div>
            <div class="form-element">
                <div class="element-caption">Additional caption</div>
                Additional text
            </div>
        </div>
    </div>
</div>

Пример