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

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

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

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

Например:

import 'css!MyModule/Bar/Bar';

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

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

import 'css!MyModule/library';

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

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

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

При работе с 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** используются для "Блочной верстки". Подробнее читайте в статье.

Перечисленные группы классов можно использовать в Wasaby-контролах без дополнительных подключений зависимостей.

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

  • asLink
  • icon-small/medium/large/16/24 - вместо этих классов используются опции iconSize и iconStyle в контролах.
  • Классы, которые описаны здесь.