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

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

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

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

Например:

import 'css!MyModule/Bar/Bar';

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

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

import 'css!MyModule/library';

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

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

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

При работе с CSS рекомендуется минимизировать написание новых css-стилей, и максимально пользоваться готовыми классами. В редких случах, когда задача не может быть решена при помощи готовых css-классов, разрешается использовать css-переменные.

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

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

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

  • .ws-absolute
  • .ws-fixed
  • .ws-ellipsis

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

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

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

<!-- WML -->
<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-классов получим:

Цвета аспектов

Цвета текста

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

Пример
Исходный код
Цвета фона

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

Пример
Исходный код

Цветовое многообразие

В случаях, когда необходимо окрасить некий набор однотипных элементов (например, тегов) в разные цвета с одинаковой насыщенностью, используйте готовые палитры цветов. Цвета, входящие в состав палитры, не несут никакой смысловой нагрузки и отличаются только яркостью.

Не рекомендуется:

  • Использовать вместе цвета из разных наборов;
  • Использовать цвета по одиночке.
Использование палитры на странице

Каждому цвету из набора в стандарте прописано имя, которое соответствует css-переменной. Например, palette_color1_1 соответствует переменной var(--palette_color1_1);

Чтобы переменные появились в вашем контексте, подключите их таким образом:

import 'css!Controls/CustomColors';

При появлении в вашем макете набора разноцветных элементов уточните у проектировщика, какую именно палитру он использовал.

Используйте готовые переменные вместо указания констант цветов.

Размеры

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

Пример
Исходный код

Высоты

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

Пример
Исходный код

Отступы

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

Пример
Исходный код

Размер иконки

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

Пример
Исходный код

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

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

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

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