До вмісту
HotLayout Документація

Ширина екрана

Один документ обслуговує будь-яку ширину — телефон, планшет і вікно браузера. Тут ви перевірите екран на ширших рамках і зміните для них розкладку, не чіпаючи телефонної версії.

Три ширини#

Назва Ширина екрана
Телефон до 600 px
Планшет 600–1023 px
Десктоп від 1024 px

Телефон — основа. Кожна ширина виглядає як телефон, доки планшет чи десктоп не задасть свого, а задане для планшета діє й на десктопі, якщо десктоп його не перекрив.

Подивіться на ширшу рамку#

У панелі перегляду над полотном оберіть у списку Пристрій рамку Веб · планшет 768×1024 або Веб · десктоп 1280×800. Полотно намалює екран цієї ширини й скаже, для якої ширини ви редагуєте.

Екран на рамці десктопа: полотно позначає, що зміни зберігаються для десктопа

Екран, зібраний лише під телефон, просто розтягується. Полотно так і каже й пропонує два швидкі виправлення: обмежити ширину вмісту й підказку, як зробити дві колонки.

Змініть розкладку для ширини#

Угорі панелі Властивості перемикач Редагую для обирає ширину: Телефон, Планшет або Десктоп. Коли ви обираєте широку рамку на полотні, він перемикається сам.

З обраним планшетом чи десктопом:

  • Зміни розкладки й стилю зберігаються для цієї ширини й ширших. Під кожним полем примітка каже, чи значення таке саме, як на вужчій ширині, чи задане тут, а Скинути повертає значення вужчої.
  • Тексти, дані, дії й умови — одні на всі ширини. Якщо змінити щось із них, воно зміниться всюди, і редактор про це скаже.

Типові зміни: контейнер, що на телефоні колонка, а на десктопі рядок; сітка з більшою кількістю колонок; більші відступи; крупніший текстовий стиль. Для контейнера панель пропонує їх одним натисканням у розділі На ширших екранах.

Покажіть віджет лише на деяких ширинах#

У розділі Видимість поле Показувати на має прапорець на кожну ширину. Зніміть прапорці з тих ширин, де віджета бути не має. Хоча б один мусить лишитися.

На ширині, де віджет сховано, полотно його не малює — як і застосунок — а щоб побачити такі віджети приглушеними, увімкніть Сховане на цій ширині / у цьому сценарії в меню Показати над телефоном.

Від умов на даних це не залежить: віджет показано, коли дозволяють обидва.

Обмежте ширину вмісту#

У широкому вікні текст від краю до краю читати важко. Виділіть екран і задайте Найбільша ширина вмісту; вміст триматиметься колонки такої ширини по центру. Типові ширини пропонує звичні значення.

Що міняється само#

Дві речі пристосовуються без жодного налаштування:

  • Панель навігації на планшеті й десктопі стоїть угорі. Щоб лишити її внизу, виділіть панель і змініть Місце на широкому екрані.
  • Екран, що відкривається шаром, на широких екранах стає вікном посередині. Його вміст завжди розкладено як на телефоні, тому для такого екрана перемикач ширини замкнено.

Старіші версії вашого застосунку#

Налаштуванням за шириною потрібна версія застосунку, яка їх знає. Старіша їх не помічає: показує віджет на кожній ширині й малює телефонну розкладку. Редактор нагадує про це біля налаштування й перед публікацією. Запитайте розробників, яка версія зараз у людей.

Далі#

HotLayoutЕкрани для server-driven UI.