Figma: https://www.figma.com/file/3d3CsJ3OJQDW0dsdtoCEDZ/Templates?node-id=1%3A2

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

{
  block: 'tpl-layout',
  mods: { structure: '50-50 },
  content: [
    {
      elem: 'section',
      content: [ ... ]
    },
    {
      elem: 'section',
      content: [ ... ]
    }
  ]
}

Если на странице должно быть боковое меню, используется значение с префиксом fold (свернутое) или unfold (развернутое). Размер меню задается в модификаторе темы, который так и называется menu.

{
  block: 'tpl-layout',
  mods: { structure: 'fold-30-70' },
  content: [
    {
      elem: 'section',
      content: [ ... ]
    },
    {
      elem: 'section',
      content: [ ... ]
    },
    {
      elem: 'section',
      content: [ ... ]
    }
  ]
}

Модификаторы

Элементы

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

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