Benutzerdefinierte CSS – Tutorial
 |
Benutzerdefiniertes CSS wird nicht empfohlen. Weitere Informationen finden Sie unter Benutzerdefinierte CSS-Stile auf Webkomponenten-Widgets anwenden.
|
Voraussetzungen
Bevor Sie beginnen, führen Sie die folgenden Schritte durch:
• Stellen Sie sicher, dass Sie ThingWorx 8.4 verwenden.
• Laden Sie die Beispiel-Lernprogrammdateien herunter.
• Importieren Sie die folgenden Beispieldateien in die ThingWorx Plattform:
◦ Mashups_CustomCssTutorialMashup
◦ Things_SampleCssFileRepo
Benutzerdefinierte CSS-Dateien in ThingWorx Repositories hochladen
1. Klicken Sie in Composer im linken Navigationsbereich auf Verwalten.
2. Wählen Sie unter Repositories das Repository SampleCSSFileRepo aus. Alle Dateien und Ordner, die sich im Repository befinden, werden aufgelistet.
3. Klicken Sie unter Aktionen für den Ordner SampleCSSFileRepo auf die Ellipse (...), und wählen Sie dann Hochladen aus. Ein Dialogfenster wird geöffnet.
4. Wählen Sie tutorial-buttons.css aus Ihrem System aus, und klicken Sie dann auf Hochladen.
Die CSS-Datei wird in das Ding-Repository SampleCSSFileRepo hochgeladen.
Benutzerdefinierte CSS-Klassen zu Mashups hinzufügen
1. Öffnen Sie das Mashup Mashups_CustomCssTutorialMashup in Mashup Builder, und klicken Sie dann auf Mashup anzeigen. Das Mashup besteht aus einer Gruppe von Schaltflächen in einem Feldsatz, auf den CSS-Regeln angewendet werden.
2. Wählen Sie im Fensterbereich Explorer die Option Mashup aus.
3. Fügen Sie im Fensterbereich Eigenschaften die Eigenschaft myMashupClass zum CustomClass-Feld hinzu.
4. Klicken Sie auf die Registerkarte Benutzerdefiniertes CSS, und geben Sie den folgenden CSS-Code ein:
.myMashupClass .widget-fieldset .widget-button {
box-shadow: 5px 5px 5px #888888;
}
box-shadow: 5px 5px 5px #888888;
}
5. Klicken Sie auf Speichern, und zeigen Sie dann das Mashup an. Die Schlagschatten werden für die Schaltflächen im Feldsatz-Widget angezeigt.
Benutzerdefiniertes CSS zu Mashups hinzufügen
1. Wählen Sie im Fensterbereich in Mashup Builder im Explorer button-3 aus.
2. Fügen Sie im Fensterbereich Eigenschaften die Eigenschaft myButtonClass zum CustomClass-Feld hinzu.
3. Um einen CSS-Regelblock hinzuzufügen, klicken Sie auf die Registerkarte Benutzerdefiniertes CSS, und geben Sie den folgenden CSS-Code ein:
.myButtonClass .widget-button .widget-button-text {
text-transform: uppercase;
}
text-transform: uppercase;
}
4. Klicken Sie auf Speichern, und zeigen Sie dann das Mashup an. Die zweite Schaltfläche weist noch den Schlagschatten auf, aber der Text wird in Großbuchstaben angezeigt.
CustomClass-Eigenschaft des Widgets binden
1. Öffnen Sie in Mashup Builder den Fensterbereich Explorer, und wählen Sie eventsrouter-6 aus.
2. Binden Sie die Ausgabe von eventsrouter-6 an die CustomClass "button-4".
3. Klicken Sie auf die Registerkarte Benutzerdefiniertes CSS, und geben Sie den folgenden CSS-Code ein:
.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;
}
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. Klicken Sie auf Speichern, und zeigen Sie dann das Mashup an.
5. Klicken Sie auf die erste Schaltfläche Anwenden, um myBoundButtonClass1 zur dritten Schaltfläche im Feldsatz-Widget hinzuzufügen, und dann auf die zweite Schaltfläche Anwenden. Der Rahmenradius der Schaltfläche ändert sich basierend darauf, welche CSS-Klasse angewendet wird.
Benutzerdefinierte CSS-Dateien importieren
Das folgende Verfahren behandelt das Importieren einer CSS-Datei aus einem ThingWorx Repository. Die Datei wendet Animations- und Opazitätsänderungen auf die Schaltflächen-Widgets im Feldsatz-Widget an:
@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;
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. Klicken Sie in Composer auf die Registerkarte Benutzerdefiniertes CSS, und geben Sie folgenden CSS-Code ein:
@import url("/Thingworx/FileRepositories/SampleCssFileRepo/tutorial-buttons.css");
2. Klicken Sie auf Speichern, und zeigen Sie dann das Mashup an. Die Schaltflächen sind animiert. Sie werden von rechts eingeblendet. Sobald die Animation abgeschlossen ist (2 Sekunden), beträgt die Opazität der Schaltflächen 50 %, bis Sie ein Schaltflächen-Rollover durchführen.