Стили оформления

Стиль оформления — это описание оформления элементов интерфейса для формирования внешнего вида страницы.

Для каждого контрола создается css-файл, который располагается в самом модуле рядом с контролом.

Для подключения css-стилей необходимо импортировать этот файл через import 'css!...'.

Например:

import 'css!MyModule/Bar/Bar';

При работе с библиотеками:

подключать css-стили необходимо так:

import 'css!MyModule/library';

Подробнее читайте в статье.

Стандартный набор css-классов

CSS используется для формирования внешнего вида страницы путем определения стилей элементов интерфейса.

Классы для задания видимости и позиции элементов

На Wasaby-страницах для общего управления положением и видимостью элементов используются ws-классы:

• .ws-hidden
• .ws-invisible
• .ws-absolute
• .ws-fixed
• .ws-ellipsis

Для flex-верстки используются классы .ws-flex**

Классы для цветов и размеров

При реализации интерфейсов рекомендуется не писать свои стили, а использовать список общих css-классов для цветов, размеров текста и т.д.

<div class="Message">
   <div class="controls-text-secondary">Демо Демо</div>
   <div class="controls-text-unaccented
               controls-fontsize-xs">Управление качеством</div>
   <div>Ошибки при отправке платежей</div>
   <div class="controls-icon controls-icon-primary"></div>
</div>

В результате использования css-классов получим:

Цвета

В следующем примере для разных строк задан различный цвет текста.

Размеры

В следующем примере для разных строк задан различный размер текста.

Высоты

В следующем примере для разных строк задана различная высота текста.

Отступы

В следующем примере для разных строк заданы различные отступы.

Классы для блочной верстки

Классы .controls-BlockLayout** используются для "Блочной верстки". Подробнее читайте в статье.