Использование CSS-переменных

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

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

CSS-переменная объявляется с помощью пользовательского имени, начинающегося с двойного тире ( -- ), и значения, которое может быть любым допустимым значением CSS:

--переменная: значение;

Чтобы получить доступ к значению переменной, добавьте ее имя в качестве аргумента функции var() к CSS-свойству, которое вы хотите применить:

свойство: var(--переменная);

Также полезно добавить значение(я) резервного свойства после имени переменной, разделенные запятой ( , ), на случай, если переменная еще не определена.

свойство: var(--переменная, резервное значение);

Объявленная переменная доступна в области действия селектора, заданного набором правил, в котором она используется. Если вы определите переменную как обычное CSS-свойство в свойствах компонента, она будет доступна для использования во всех вложенных компонентах.

Общие CSS-переменные объявляются с псевдоселектором класса :root, чтобы быть доступными из любого места в документе. Чтобы использовать их таким образом в инструментальных панелях, добавьте переменные в свойство Стиль CSS элемента Корневой панели без каких-либо селекторов.

Значение переменной может быть переопределено в месте использования. Это может быть удобно, если вы хотите применить другое значение в подмножестве вложенных элементов, но не хотите создавать отдельную переменную для этого особого случая. Для этого, просто переобъявите переменную в правиле, в котором вы собираетесь использовать новое значение. Переменная будет иметь новое значение для всех совпадающих элементов и их потомков.

Использование CSS-переменных в Инструментальной панели

В зависимости от конкретного случая вы можете использовать CSS-переменные локально в определенном UI-компоненте, но наиболее распространенный случай (и их истинная сила) заключается в возможности глобального доступа к ним на всей панели инструментов:

  1. В UI Builder откройте Редактор свойств Корневой панели инструментальной панели, щелкнув по нему в Дереве компонентов.

  2. В Редакторе свойств переключитесь на вкладку Стиль элемента.

  3. На вкладке Стиль элемента объявите переменную в свойстве Стиль CSS элемента:

--fancyShadow: rgba(40, 40, 80, 0.24) 0px 12px 40px -6px, rgba(0, 0, 0, 0, 0.4) 0px 8px 24px -8px, rgba(16, 32, 64, 0.64) 0px 0px 0px 2px inset;

  1. Добавьте компонент на инструментальную панель, нажав на него в Палитре компонентов или перетащив его на макет.

  2. Откройте Редактор свойств, наведя курсор на компонент на макете и нажав кнопку Настроить () в правом верхнем углу появившегося оверлея, или выбрав его в Дереве компонентов.

  3. В Редакторе свойств переключитесь на вкладку, содержащую свойство пользовательского стиля.

  1. На открывшейся вкладке добавьте CSS-стили в локальное свойство пользовательского стиля:

box-shadow: var(--fancyShadow);

  1. Стиль с переменным значением применяется, когда поле выходит из фокуса, и результат виден на инструментальной панели.

Вы можете переопределить стандартные CSS-переменные, поставляемые с AggreGate веб-интерфейсом, если планируете внести глобальные изменения в обрабатываемые ими свойства.

Чтобы получить доступ к списку объявленных переменных, прокрутите вниз вкладку "Стиль" в инструментах разработчика браузера, пока не увидите правило с селектором :root, в котором перечислены все переменные по умолчанию.