Mashup Builder > 混搭 > 自定义 CSS > 自定义 CSS 教程
自定义 CSS 教程
先决条件
在开始之前，请执行以下步骤：
• 请确保您正在使用 ThingWorx 8.4
• 将以下示例文件导入到 ThingWorx 平台中：
◦ Mashups_CustomCssTutorialMashup
◦ Things_SampleCssFileRepo
将自定义 CSS 文件上载到 ThingWorx 信息库
1. 在 Composer 中，单击左侧导航窗格中的“管理”。
2. 在“信息库”下，选择 SampleCSSFileRepo 信息库。将列出信息库下的所有文件和文件夹。
3. 在 SampleCSSFileRepo 文件夹的“操作”下，单击省略号 (...)，然后选择“上载”。将打开一个对话框。
4. 从系统中选择 tutorial-buttons.css，然后单击“上载”。
即可将 CSS 文件上载到 SampleCSSFileRepo 事物信息库。
将自定义 CSS 类添加到混搭
1. 在 Mashup Builder 中打开 Mashups_CustomCssTutorialMashup 混搭，然后单击“查看混搭”。“混搭”由适用于 CSS 规则的字段集中的一组按钮组成。
2. 在“资源管理器”面板上，选择“混搭”。
3. 在“属性”面板上，将 myMashupClass 添加到 CustomClass 字段中。
4. 单击“自定义 CSS”选项卡，然后输入以下 CSS 代码：
.myMashupClass .widget-fieldset .widget-button {
box-shadow: 5px 5px 5px #888888;
}
5. 单击“保存”，然后查看混搭。会显示字段集小组件中按钮的投影。
将自定义 CSS 添加到混搭
1. 在 Mashup Builder 中的“资源管理器”面板上选择 button-3。
2. 在“属性”面板上，将 myButtonClass 添加到 CustomClass 字段中。
3. 要添加 CSS 规则块，请单击“自定义 CSS”选项卡，然后输入以下 CSS 代码：
.myButtonClass .widget-button .widget-button-text {
text-transform: uppercase;
}
4. 单击“保存”，然后查看混搭。第二个按钮仍具有投影，但文本显示为大写。
绑定小组件 CustomClass 属性
1. 在 Mashup Builder 中，打开“资源管理器”面板，然后选择 eventsrouter-6。
2. 将输出从 eventsrouter-6 绑定到 button-4 的 CustomClass。
3. 单击“自定义 CSS”选项卡，然后输入以下 CSS 代码：
.myButtonClass .widget-button .widget-button-text {
text-transform: uppercase;
}

.myBoundButtonClass1 .widget-button,
.myBoundButtonClass1 .widget-button .button-element {
border-radius: 15px 0 15px 0;
}
.myBoundButtonClass2 .widget-button,
.myBoundButtonClass2 .widget-button .button-element {
border-radius: 0 15px 0 15px;
}
4. 单击“保存”，然后查看混搭。
5. 单击第一个“应用”按钮将 myBoundButtonClass1 添加到字段集小组件内的第三个按钮，然后单击第二个“应用”按钮。基于所应用 CSS 类的按钮边界半径变化。
导入自定义 CSS 文件
以下过程将介绍如何从 ThingWorx 信息库导入 CSS 文件。文件会将动画和不透明度更改应用到字段集小组件中的按钮小组件：
@keyframes buttonSlideIn {
0% { left: 100px; opacity: 0 }
100% { left: 0; opacity: 1 }
}

.widget-fieldset .widget-button {
animation: buttonSlideIn 2s;
opacity: 0.5;
}
.widget-fieldset .widget-button:hover {
opacity: 1;
1. 在 Composer 中，单击“自定义 CSS”选项卡，然后输入以下 CSS 代码：
@import url("/Thingworx/FileRepositories/SampleCssFileRepo/tutorial-buttons.css");
2. 单击“保存”，然后查看混搭。按钮将进行动画演示，动画从右侧淡入。动画完成后 (2 秒)，按钮为 50% 不透明，直到您滚动按钮。