Mashup Builder > Темы стилей > Применение пользовательских стилей CSS к виджетам веб-компонентов
Применение пользовательских стилей CSS к виджетам веб-компонентов
Рекомендуется при создании стилей виджетов компонентов создавать пользовательские темы стиля или использовать свойства стиля, доступные на панели Свойства стиля в Mashup Builder. Не рекомендуется применять пользовательские стили CSS к виджетам веб-компонентов. Дополнительные сведения см. в разделах Темы стилей и Использование панели "Свойства стиля".
При применении CSS к виджету веб-компонента необходимо учитывать следующие рекомендации.
• Пользовательская CSS-таблица может перестать работать, если DOM-структура веб-компонента будет изменена в будущей версии ThingWorx. После обновления необходимо проверить и обновить вручную пользовательские правила CSS.
• В отличие от унаследованных виджетов, функциональность, поведение и стиль веб-компонентов встраиваются в скрытое дерево, которое присоединено к главной объектной модели (DOM). Скрытое дерево называют теневой DOM. Простая CSS-таблица может не работать при стилизации сложных виджетов, содержащих подкомпоненты. Дополнительные сведения о концепциях теневой DOM см. в следующей статье Using shadow DOM - Web Components (Использование теневой DOM - веб-компоненты) | MDN (mozilla.org) (на английском языке).
• Чтобы применить пользовательскую CSS-таблицу, необходимо ознакомиться со структурой веб-компонентов, включая подкомпоненты, наименования частей, доступные состояния и свойства стиля. Дополнительные сведения о веб-компонентах и их свойствах стиля, исполнении и состояниях см. в документации по ThingWorx Web Component SDK.
• Чтобы задать стиль частей подкомпонентов, которые представляются с помощью атрибута part, используйте псевдоселектор CSS ::part().
• Для поддержки элементов стилизации в теневой DOM в большинстве сложных веб-компонентов поддерживается добавление внешних модулей стиля в компонент. Эти модули стилей могут быть применены к вложенным частям компонента и любому из их состояний с помощью селекторов CSS.
• Функциональность CSS не поддерживается согласованно во всех браузерах, что может привести к различному отображению стилей для пользователей, использующих разные браузеры. Если синтаксис CSS для простых или теневых частей не применяется правильно к веб-компоненту, можно добавлять ptcs-style-unit.
Использование простой CSS-таблицы
Можно использовать простую CSS-таблицу для стиля элемента, к которому присоединено дерево теневой DOM. В следующем примере показано использование простой CSS-таблицы для стиля ptcs-button как большой кнопки:
ptcs-button
{
color: #FAFAFA;
background-color: #2B80D5;
padding: 0px 60px;
font-size: 24px;
font-weight: bold;
height: 80px;
border-radius: 6px;
}
Предварительный просмотр
Можно использовать только простую CSS-таблицу для стиля основного веб-компонента или указания наследуемых свойств. Этот метод не работает при стилизации компонентов, содержащих несколько подкомпонентов. В следующих разделах описано использование стилей подкомпонентов с помощью элемента ptcs-style-unit в теневой DOM.
Добавление элемента ptcs-style-unit
Можно использовать стандартное правило CSS @supports, чтобы добавить элемент ptcs-style-unit в веб-компонент, когда не работают простые или теневые части CSS. Этот элемент позволяет применять CSS к подкомпонентам в дереве теневой DOM. Используйте атрибут part, чтобы указать элемент для стилизации в иерархии теневой DOM. Например:
@supports (ptcs-style-unit: "PTCS-DATEPICKER") {
[part=date-field] {
background-color: red;
}
}
Можно также добавить селекторы исполнений и состояний. В следующих разделах приведены примеры использования ptcs-style-unit для применения пользовательской CSS-таблицы к различным виджетам в Mashup Builder.
* 
Некоторые из следующих стилей можно получить, используя свойства стиля. Рекомендуется использовать свойства стиля вместо CSS-таблицы, когда это возможно.
Дополнительные сведения об элементе ptcs-style-unit и доступных селекторах см. в разделе ptcs-style-unit - ThingWorx Web Component SDK.
Пример. Стилизация виджета "Кнопка"
CSS
Описание
Предварительный просмотр
@supports (ptcs-style-unit: "PTCS-BUTTON.primary") {
:host {
background-color: red !important;
border-color: blue;
border-width: 2px;
}
}
Задает красный цвет фона кнопки и применяет синюю границу.
@supports (ptcs-style-unit: "PTCS-BUTTON.danger") {
[part=label] {
color: Blue;
font-style: Italic;
}
}
Задает синий цвет метки для исполнения кнопки "Опасно" и курсив для начертания шрифта.
@supports (ptcs-style-unit: "PTCS-BUTTON.primary") {
:host(:not([disabled]):hover) {
border-color: red;
border-width: 2px;
}
}
Отображает красную границу вокруг кнопки при активном состоянии наведения.
Пример. Стилизация текстового поля
CSS
Описание
Предварительный просмотр
@supports (ptcs-style-unit: "PTCS-TEXTFIELD") {
[part=clear-button] {
color: red;
}
}
Задает красный цвет кнопки очистки.
@supports (ptcs-style-unit: "PTCS-TEXTFIELD") {
[part=text-box] {
border-color: red;
}
}
Задает красный цвет границы текстового поля.
@supports (ptcs-style-unit: "PTCS-TEXTFIELD") {
[part=counter] {
color: red;
}
}
Задает красный цвет счетчика символов.
Пример. Стилизация виджета "Выпадающий список"
CSS
Описание
Предварительный просмотр
@supports (ptcs-style-unit: "PTCS-DROPDOWN") {
[part=label] {
color: red;
}
}
@supports (ptcs-style-unit: "PTCS-DROPDOWN") {
[part=icon] {
color: red;
}
}
@supports (ptcs-style-unit: "PTCS-DROPDOWN") {
[part~=selected-item-value] {
color: red;
}
}
Задает красный цвет значения выбранного элемента.
@supports (ptcs-style-unit: "PTCS-DROPDOWN") {
[part=select-box] {
background-color: red;
border-color: blue;
border-width: 2px;
}
}
Задает красный цвет фона выпадающего списка и синий цвет для границы.
Пример. Стилизация столбчатой диаграммы
CSS
Описание
Предварительный просмотр
@supports (ptcs-style-unit: "PTCS-CHART-AXIS") {
[part=label] {
color: red;
}
}
Задает красный цвет осей диаграммы.
@supports (ptcs-style-unit: "PTCS-CHART-CORE-BAR") {
[part=bar] {
border-top-left-radius:15px;
border-top-right-radius:15px;
}
}
Скругляет правый верхний и левый верхний углы столбцов.
@supports (ptcs-style-unit: "PTCS-CHART-CORE-BAR") {
[part=value] {
color: red;
font-style:bold;
font-size:16px;
}
}
Задает цвет и начертание шрифта для меток данных столбца.
Было ли это полезно?