Widget

Last updated 9 months ago

Was this helpful?

Widget

Общая информация

Основной способ организации информации в наших приложениях - объединение данных в логические блоки и их вывод при помощи виджетов и карточек. Исключение: гео-карты, мнемосхемы и, в некоторых случаях, данные при отсутствие других виджетов, например таблицы. В них контент может размещаться сразу в основном контейнере.

Анатомия

Виджет

Виджет (widget) — компонент отображающий данные и функциональные возможности приложения.

Panel. Описание на странице Panel
Content-блок. Блок с контентом

Карточка

Карточка - интерактивный блок с информацией. По сути - это виджет с кратким содержанием, с возможностью по клику перейти на соответствующие раздел / страницу (поведение ссылки).

Content-блок. Блок с контентом

Основными отличиями карточки от виджета является: её кликабельность, отсутствие панели и наличие тени (Mini-Bottom). В остальном - правила размеров, отступов, оформления соответствуют виджетам.

Описание работы

Элементы управления

Элементы управления виджета, управляющие контентом (например, фильтры, календари, контролы и др.), могут располагаться:

в панели (шапке) виджета: такие инструменты управляют только содержимым виджета
в панели страницы (располагается под шапкой приложения): такие инструменты упраляют всем содержимым страницы (содержимым всех виджетов).

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

Скролл

Если контент не вмещается в контентную область, то для просмотра (прокрутки) содержимого используются горизонтальный / вертикальный скроллы. Для того, чтобы пользователь понимал, что в виджете / карточке присутствует переполнение контента, используется эффект прозрачности у краев контентной области.

Скроллы появляются при наведении на область виджета / карточки. При появлении скролла контент не должен сдвигаться.

Пример появления вертикального скролла

Пример появления горизонтального скролла

Рекомендуется формировать контент так, чтобы минимизировать возможность появления горизонтального скролла.

Размеры

Размеры и отступы могут меняться в зависимости от типа используемой сетки. Сетка может быть с 8 или 12 колонками.

Высота виджета / карточки может варьироваться в зависимости от решаемой задачи. Кратность высоты и ширины виджета / карточки - 8 рх.

Элемент

Значение

Виджет / карточка

Border: 1px (solid) Border-radius: 2px

Типографика

Элемент

Название стиля

Гарнитура

Кегль

Начертание

Заголовок

Static_title/h4

Inter

14px

Semi Bold

Текст

Main/Body-text 14

Inter

14px

Regular

12-колоночные внутренние размеры

Вертикальные отступы:

16 рх для ширины экрана > 1440 px
8 рх для ширины экрана ≤ 1440 px

≤ 1920×1080 px

≤ 1440x900 px

Горизонатальные отступы отступы:

≤ 1920×1080 px

≤ 1440x900 px

Внутренние отступы могут варьироваться в зависимости от контента и наполнения, начиная с 8рх и далее по возрастанию (16рх, 24рх, 32рх, 40рх, ...). Отступы в 16рх являются стандартом.

Рекомендуемые внутренние отступы - 16px. Так же отступы могут варьироваться в зависимости от контента и наполнения, начиная с 8рх и далее по возрастанию (16рх, 24рх, 32рх, 40рх, ...). Отступы в 16рх являются стандартом.

В исключительных случаях может использоваться минимально допустимый размер - 4рх, используемый в виджетах и карточках со сложным контентом.