Smart Tiles Введение
Панель в Smart Tiles — не фиксированная сетка. Плитки выстраиваются в ряды, как слова в строки: каждая плитка запрашивает долю ряда в соответствии со своей настройкой Размер, ряд заполняется слева направо, а то, что не помещается, начинает следующий ряд. Понимание этого потока и отличает панель, которая случайно хорошо выглядит на одном экране, от панели, которая выглядит продуманной на любом экране. В этой статье объясняются размеры, отступы и высота плиток, а также приводится несколько рецептов компоновки.
Шесть размеров
Размер плитки — это её ширина, выраженная как доля ряда. Выберите его в контекстном меню плитки: нажмите кнопку …, наведите указатель на Размер и выберите один из шести пунктов; текущий размер отмечен галочкой.
| Размер | Базовая доля ряда | Плиток в ряду (одного размера) |
|---|---|---|
| Очень маленький | 15 % | 6 |
| Маленький | 30 % | 3 |
| Средний | 45 % | 2 |
| Крупный | 65 % | 1, рядом помещается плитка «Маленький» или «Очень маленький» |
| Очень крупный | 80 % | 1, рядом помещается плитка «Очень маленький» |
| Во всю ширину | 100 % | 1 |
Новая плитка имеет размер Маленький.
Как заполняются ряды
Картину дополняют два правила:
- Плитки растягиваются, заполняя ряд. Доля в таблице — это минимум. Когда в ряду остаётся место — скажем, две плитки «Маленький» одни в ряду, — плитки растут, заполняя его, причём более крупные размеры растут быстрее мелких. Поэтому ряды всегда заполнены, без рваного правого края.
- Плитка, которая не помещается, переходит в следующий ряд. Три плитки «Маленький» заполняют ряд; четвёртая начинает новый. Плитка «Средний» после двух плиток «Маленький» не помещается в оставшиеся 40 % и начинает новый ряд, где растягивается на всю ширину, если за ней ничего не следует.
Второе правило и преподносит сюрпризы: одна плитка «Маленький» в конце панели будет растянута до плитки во всю ширину. Считайте доли в каждом ряду — в сумме они должны давать примерно 90–100 % — или завершайте панель плитками, которые заполняют свой ряд точно.
📝 Заметка
Доли отсчитываются от ширины веб-части, а не экрана. В разделе с двумя колонками веб-часть вдвое уже, поэтому три плитки «Маленький» по-прежнему образуют один ряд — каждая из них вдвое уже, чем в разделе во всю ширину. На телефоне, где страница представляет собой одну узкую колонку, плитки остаются в тех же рядах и просто становятся уже.
Высота
Высота плитки напрямую не задаётся. Она складывается из содержимого — значка в размере, заданном настройкой Размер значка, заголовка в размере, заданном настройкой Размер шрифта, и описания, если оно показывается, — и настройки Внутренний Отступ над содержимым и под ним. Все плитки в ряду имеют одинаковую высоту — высоту самой высокой.
Чтобы сделать плитки выше, не увеличивая значок или текст, увеличьте Внутренний Отступ; чтобы сделать их близкими к квадрату, сочетайте большой внутренний отступ с плитками «Маленький» или «Очень маленький».
Три отступа
В группе Вид области свойств есть три настройки интервалов, каждая от 0 до 30 пикселей:
| Настройка | Что разделяет |
|---|---|
| Внутренний Отступ | Над содержимым плитки и под ним — «padding». Определяет высоту плиток. |
| Отступ значка | Между значком и заголовком. |
| Внешний Отступ | Между соседними плитками, по горизонтали и по вертикали — «gap». При 0 плитки соприкасаются, и панель становится сплошной мозаикой; при 10–16 плитки воспринимаются как отдельные карточки. |
Рецепты компоновки
Панель быстрых ссылок. Шесть плиток «Очень маленький», внешний отступ 4, внутренний отступ 8, заголовки показаны, описания скрыты. Один ряд компактных кнопок под главным баннером домашней страницы.
Панель подразделения. Плитка «Во всю ширину» как заголовок панели — фоновая фотография и название подразделения, — за которой следуют ряды из трёх плиток «Маленький» с услугами подразделения. Внешний отступ 8.
Главное плюс список. Одна плитка «Крупный» с фоновым изображением и описанием и одна плитка «Маленький» рядом с ней; ниже — два ряда по три плитки «Маленький». Плитка «Крупный» привлекает взгляд к самой важной ссылке.
Мозаика. Смешанные плитки «Очень маленький» и «Маленький» с внешним отступом 0, все в акцентных цветах, только значки (заголовки скрыты). Лучше всего выглядит в разделе во всю ширину на информационном сайте.
💡 Совет
Стройте панель в разделе во всю ширину, если она является основной навигацией страницы; см. статью KB10042. Как добавить и настроить веб-часть Smart Tiles. О текстах на плитках см. статью KB10249. Отображение заголовков и описаний на плитках.
❗ Важно
Перед публикацией проверьте панель при узкой ширине окна — сузьте окно браузера или воспользуйтесь мобильным предпросмотром страницы. Длинные заголовки, помещающиеся на плитке «Во всю ширину», на плитке «Маленький» обрезаются многоточием; описание, если оно не помещается, обрезается так же.
Подробнее о продукте: https://vitextra.com/ru/products/smart-tiles