Определение доступной ширины рабочей области

В процессе верстки страницы встречается типовая задача — отображение элементов в зависимости от доступной ширины рабочей области. Решение этой задачи заключается в использовании CSS-классов страницы и опций.

Использование CSS-классов

Страницы портала

На всех страницах портала СБИС устанавливаются CSS-классы со значениями ширины контента и ширины рабочей области (с шагом в 64px):

.ws-site-width-{Number}
.ws-workspace-width-{Number}

Максимальные и минимальные значения для классов приведены таблице.

Ширина контента
минимальнаяws-site-width-1024
ws-site-width-1088
ws-site-width-1152
...
максимальнаяws-site-width-3840
Ширина рабочей области
минимальнаяws-workspace-width-512
ws-workspace-width-576
ws-workspace-width-640
...
максимальнаяws-workspace-width-3776

Панели

На Wasaby панелях устанавливается класс .ws-workspace-width-{Number} со значением ширины панели с шагом 64. Максимальное значение ширины передается в опцию maxWidth, а минимальное значение — в опцию minWidth. Значения передаются при открытии панели.

Примеры

Приведенный ниже less код создаст описание классов от минимальной ширины рабочей области (512px) до 1000px с шагом 64.

.generate-width(1000);
.generate-width(@n, @i: 512) when (@i =< @n) {
   .ws-workspace-width-@{i} .column {
      width: (@i * 100% / @n);
   }
   .generate-width(@n, (@i + 64));
}

Использование опций

В случае, когда в компоненте необходимо актуальное значение доступной ширины рабочей области, можно использовать опцию workspaceWidth. Основное применение опции: динамическое скрытие/показ блоков на странице. Например, компонент новостей на главной странице online.sbis.ru использует опцию workspaceWidth для определения колоночности новостей: при минимальной ширине рабочей области новости выстраиваются в одну колонку.

<News.VDom.Main
name="newsMain"
workspaceWidth="{{ _options.workspaceWidth }}"/>

Страницы портала

На Wasaby страницах в шаблон рабочей области прокидывается опция настроек вида:

  • workspaceWidth — ширина рабочей области (строка).

Опция изменяется реактивно в зависимости от ширины страницы, видимости Центра уведомлений и аккордеона.

Панели

На панели используется опция workspaceWidth, которая передается в шаблон панели. Опция изменяется реактивно в зависимости от ширины панели.