Раскладка: контейнеры, сетка, отступы

Контейнер и секция для группировки, сетка и колонки для рядов, отступы для воздуха.

Контейнер и сетка ложатся на холст — видно, чем они отличаются.
Контейнер и сетка ложатся на холст — видно, чем они отличаются.
  • Контейнер — коробка, в которую кладут остальное. У неё есть направление (в столбец или в строку), распределение, промежуток между детьми, отступы, фон, рамка, скругление.
  • Секция — тот же контейнер, но заготовленный под смысловой кусок экрана.
  • Карточка — тот же контейнер с готовым видом: белая заливка, скругление, тонкая рамка и лёгкая тень. Плюс два поля — «Подсвечивать, когда» и «равно значению»: совпали — карточка получает акцентную рамку и заливку, и так собирается выбор одного из нескольких (мастер, дата, категория мест). Всё остальное у них одинаково, и контейнер несложно довести до карточки руками — карточка просто избавляет от этого.
  • Сетка — плитки в несколько колонок: каталог, разделы на главной. Число колонок и промежуток задаются свойствами.
  • Колонки — два-три блока рядом в одну строку.
  • Разделитель и Отступ — линия и пустое место. Пустое место лучше делать отступом, чем пустым абзацем: абзац потом ищут глазами в слоях.

Отступы задаются на вкладке «Вид» → «Расположение»: внутренние (между рамкой и содержимым) и внешние (между этим блоком и соседями). Стороны настраиваются по отдельности — В, П, Н, Л.

Плиткой раскладывается любой контейнер, и список из таблицы тоже. «Вид» → «Раскладка» → «Ставить блоки» — четыре ответа в один ряд: «Друг под другом», «В ряд», «В ряд с переносом» и «Плиткой». Плитка встаёт в столько столбцов, сколько поставите ниже (до шести), столбцы равной ширины, промежуток между ними — поле «Промежуток». Списку из таблицы это и нужно: афиши встают по две в ряд, а «Показать ещё» и сообщение пустого списка занимают всю ширину, а не одну клетку. У готовых блоков «Сетка» и «Колонки» этого выбора нет — они раскладывают себя своими же свойствами на вкладке «Содержимое».

Выравнивание снимается тем же нажатием, каким ставилось. Сетка 3×3 во вкладке «Раскладка» ставит его двумя осями сразу; нажмите выбранную клетку ещё раз — и обе снимаются, блок раскладывается как по умолчанию. Одну ось отдельно возвращает «Распределение» — пункт «По умолчанию» в его списке.

«Как стоит этот блок» — ответ на «родитель испортил вид ребёнку». Выравнивание, заданное карточке, сжимает вложенные блоки до ширины их содержимого: внутри такого блока «По краям» разводить уже нечего, он и так шириной со свой текст. Откройте этот блок, «Вид» → «Размер» → «Ещё» → «Как стоит этот блок» → «Растянуть» — и он вернётся во всю ширину, не трогая соседей. Там же можно поставить ему собственное «По центру» или «К концу» вопреки родителю.

Полоса, которая листается вбок — это «Ставить блоки: В ряд» плюс «Ещё» → «Что делать с тем, что не влезло: Прокрутка». Карточки в ней не сжимаются (иначе прокручиваться было бы нечему) и не бывают шире самой полосы. Ширину им задают: у карточки в «Размер» → «Ширина» поставьте, скажем, 240, — тогда следующая выглядывает с краю и видно, что полосу можно листать. Без своей ширины карточка занимает полосу целиком, по своему содержимому: картинка внутри приносит свой натуральный размер. Так делают ленты «Скоро», «Новинки», «Категории» — и повторитель умеет то же самое, направление у него настраивается там же.

Читать дальше