Использование Точек остановов разрешения

Точки остановов - это общее свойство компонентов, которое показывает, какие стили будут применяться для каждой определенной точки останова разрешения. Использование этого свойства позволяет вносить изменения в уже добавленные стили компонентов или применять новые правила CSS в пределах заданной ширины области просмотра, сохраняя первоначальный набор пользовательских стилей нетронутым.

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

Чтобы применить стили для определенной ширины области просмотра (и всех, кто находится ниже нее), необходимо сначала установить пользовательскую точку останова, а затем добавить или отредактировать пользовательские CSS-стили компонента, работая с активной созданной точкой останова.

По умолчанию все пользовательские CSS-стили, добавленные к свойствам веб-компонента в AggreGate, применяются при любой ширине области просмотра. В UI Builder для инструментальной панели не определены точки останова разрешения, пока пользователь не захочет их использовать.

Информация о точках останова может быть использована в привязках. Например, для установки данных формы в зависимости от типа обнаруженного разрешения экрана.

При выборе способа активации привязок, работающих с информацией о точке останова, следует учитывать, что информация о точке останова доступна с момента отображения панели пользователю, а не с момента запуска панели. Для привязок, использующих информацию о точках останова, следует использовать форму активатора/:показано@, а не устанавливать активацию в При запуске.

Настройка точек останова разрешения

Итак, первое, что нужно сделать, это настроить точки останова разрешения для панели инструментов:

  1. Находясь в UI Builder, найдите в правой части заголовка блок выбора разрешения и разверните его, нажав на поле ввода.

  2. В появившемся выпадающем списке выберите опцию () Редактировать параметры, чтобы открыть диалог настройки Точек остановов.

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

  2. В созданной строке таблицы добавьте имя пользовательской точки останова и ее описание в поля Имя и Описание соответственно.

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

Подробности о ширине области просмотра, доступной по умолчанию, можно найти в описании свойства Текущая точка останова.

  1. Поле Enabled служит для того, чтобы исключить созданную точку останова из списка доступных точек останова для установки пользовательских стилей, но сохранить ее на случай, если она снова понадобится. Оставьте активным флажок Значение поля.

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

  1. Новая точка останова разрешения настроена. Проверьте, что она работает, выбрав ее из выпадающего списка Выбор разрешения в заголовке пользовательского интерфейса. Размер макета корневой панели должен измениться в соответствии с шириной, указанной в поле Значение точки останова.

Когда точка останова создана и включена, после того как область просмотра приобретает указанную ширину, имя точки останова становится значением свойства Текущее разрешение экрана.

Поскольку Текущее разрешение экрана является общедоступной переменной, к ней можно обращаться в привязках как к триггеру для выполнения любых полезных действий, помимо изменения стилей компонентов и перестановки макетов приборной панели.

Изменение стилей элементов с помощью точек останова разрешения

После того как пользовательская точка останова установлена, настало время реализовать стили компонентов, реагирующих на изменения, с помощью свойства компонента Точки остановы.

  1. В UI Builder добавьте компонент на приборную панель, нажав на него в Палитре компонентов или перетащив его на макет.

  2. Откройте редактор свойств, наведя курсор на компонент на макете и нажав кнопку () Настроить в правом верхнем углу появившегося оверлея, или выбрав его в Дереве компонентов.

  3. В редакторе свойств переключитесь на вкладку, содержащую свойство пользовательского стиля.

  1. На открытой вкладке добавьте базовые CSS-стили в локальное пользовательское CSS-поле, чтобы было с чем работать в дальнейшем:

color: skyblue;
font-size: 48px;
font-weight: 800;
padding: 8px;
transition: 0.24s;

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

  1. Стиль применяется, когда поле выходит из фокуса, и результат виден на приборной панели.

  1. Переключитесь на вкладку Основные свойства редактора свойств компонента.

  2. На вкладке Основные свойства перейдите к свойству Точки остановов, нажав на кнопку Открыть... рядом с его именем.

  3. В открывшемся диалоговом окне конфигурации добавьте новый элемент, нажав кнопку () Добавить Строку.

  4. В созданную строку таблицы в поле Точка останова добавьте Имя пользовательской точки останова, которую вы установили в соответствии с примером Настройка точек останова разрешения. Поля Стиль и Стиль контейнера можно оставить пустыми.

  5. Примените изменения, замкнуто диалоговое окно конфигурации с помощью кнопки OK внизу. Сейчас точка останова добавлена.

  1. Расширяйте комбинированное поле Выбор разрешения в правой части заголовка, щелкнув по его полю ввода.

  2. В появившемся выпадающем списке выберите ранее добавленную пользовательскую точку останова с именем, указанным в поле Точка остановы свойства Точки остановы компонента.

  3. Макет корневой панелиизменит свой размер, приведя его в соответствие с шириной, указанной в активированной точке останова разрешения.

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

  2. На открытой вкладке вы все еще можете видеть стили CSS, изначально примененные к компоненту в локальном свойстве стиля. Вы можете либо оставить все как есть и отредактировать то, что уже есть, либо стереть все, кроме стилей, которые вы хотите изменить. Оставим только те стили, которые планируется изменить, и добавим еще пару специфических только для этой точки останова:

font-size: 20px;
padding: 40px 80px;
background-color: midnightblue;

Стили, добавленные к компонентам при выборе универсального * [None] брейкпоинта в селекторе разрешения, все равно применяются к компоненту при изменении брейкпоинта, даже если они удалены из пользовательского свойства CSS стиля в этом брейкпоинте.

Если некоторые из них были намеренно изменены для активной точки останова, новое значение отображается вместо начального.

  1. Стиль применяется, как только поле выходит из фокуса, и результат виден на приборной панели.

  1. Переключитесь обратно на универсальную точку останова * [None] в комбобоксе Выбор разрешения, чтобы убедиться, что пользовательское свойство CSS компонента вернулось к исходному значению со всеми стилями, добавленными до изменений.

  2. Если проверить значение свойства Точки остановы на вкладке Основные свойства редактора свойств компонента, то можно увидеть, что стили для пользовательской точки останова добавлены в соответствующее поле следующим образом:

style:font-size: 20px; padding: 40px 80px; background-color: midnightblue;*~*

Можно сразу записать стили реагирования для точки останова в поля Стиль и Стиль контейнера диалога Точки останова после добавления новой точки останова. В текущем случае запишите свойства, которые нужно изменить или добавить, используя выделенный выше синтаксис.

  1. Чтобы проверить настроенную точку останова в действии, откройте Инструментальную панель в отдельной вкладке Предпросмотр, нажав кнопку () Run в правой части заголовка пользовательского интерфейса.

  2. Измените размер окна браузера, содержащего открытую вкладку, пока его ширина не достигнет значения, определенного в пользовательской точке останова. В тот момент, когда это произойдет, будут применены отзывчивые стили, и изменения будут видны на панели инструментов. Снова измените размер окна по сравнению со значением точки останова, чтобы увидеть, как изменились стили.

Когда результирующий CSS для компонента компилируется на рендере приборной панели, настроенные Точки остановов и соответствующие CSS-стили преобразуются в @media CSS-правила. Это исключает большинство возможных конфликтов между свойствами, если вы используете CSS Media Queries, так как стили точек останова объединяются с любыми локально используемыми @media инъекциями.