Свойство "Пользовательские классы”

В некоторых случаях полезно расширить стандартный набор HTML-классов компонента пользовательскими классами. Каждый компонент в Конструкторе UI имеет свойство Пользовательские классы в группе свойств Стиль элемента редактора свойств компонента для предоставления этой возможности.

В HTML класс - это атрибут, определяющий одно или несколько имен классов для HTML-элемента. Присутствует, имя класса может быть использовано в CSS для применения стилей к элементам с указанным именем класса.

Свойство имеет string значение, которое позволяет добавлять несколько классов CSS, разделенных space.

Классы применяются как атрибуты крайнего элемента в Контейнере компонента.

Добавление новых классов

Чтобы добавить новые классы HTML в компонент:

  1. В Конструкторе UI добавьте компонент на панель управления, щелкнув его в Палитре компонентов или перетащив на макет.

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

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

  1. На вкладке Стиль элемента добавьте классы в свойство Пользовательские классы.

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

Применение CSS с помощью пользовательских классов

После добавления Пользовательских классов вы можете использовать их в правилах CSS компонента.

Это свойство редко используется при добавлении стилей непосредственно в редакторе свойств компонента. Поскольку оно не требует учета HTML за пределами компонента, нет необходимости использовать специальный класс, чтобы нацелить его на что-то внутри. Но он приходит на помощь, когда вы нацеливаетесь на компонент извне - скажем, из свойств Корневой панели панели инструментов.

Рассмотрим случай, когда у вас есть несколько различных компонентов на приборной панели, и вы хотите применить общий стиль к некоторым из них.

  1. В Конструкторе UI для каждого компонента, к которому вы хотите применить общий стиль, добавьте выбранный класс в свойство Пользовательские классы, как это было описано в примере Добавление новых классов. В нашем сценарии давайте добавим класс fancy-look для компонентов с именами Label2 и Timer0.

  1. В Дереве компонентов выберите курсором узел Корень. Откроется редактор свойств.

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

  1. На вкладке Стиль элемента добавьте правило CSS к свойству Стиль элемента CSS, используя добавленный пользовательский класс:

.fancy-look {
color: mediumorchid;
text-align: center;
font-style: italic;
font-weight: bold;
}

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

Чтение об этом подходе можно найти в статье Запись стилей на корневую панель.

Использование расширенных свойств

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

Ознакомьтесь с другими возможными приложениями для привязки в статье Свойства стилей и привязки.