Стандартный набор темизируемых css-классов

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

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

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

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

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

Стандартные темизируемые классы

При реализации интерфейсов рекомендуется не писать свои стили, а использовать список общих css-классов для цветов, размеров, иконок и т.д. Поскольку эти классы зависят от текущей темы оформления, их необходимо подключить к своему модулю через _theme = ['Controls/Classes'].

Посмотрите наш демонстрационный пример.

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

<div class="Message">
   <div class="controls-text-secondary_theme{{_options.theme}}">Демо Демо</div>
   <div class="controls-text-unaccented_theme{{_options.theme}}
               controls-fontsize-xs_theme{{_options.theme}}">Управление качеством</div>
   <div>Ошибки при отправке платежей</div>
   <div class="controls-icon controls-icon-primary_theme{{_options.theme}}"></div>
</div>

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

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

Классы .controls-BlockLayout**, которые используются для "Блочной верстки", также необходимо подключать через _theme = ['Controls/BlockLayout'].

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

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