Стили оформления
Стиль оформления — это описание оформления элементов интерфейса для формирования внешнего вида страницы.
Для каждого контрола создается 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 в контролах.
- Классы, которые описаны здесь.