Mit CSS einen Stil auf eine 2D-Schaltfläche anwenden
Auf der Registerkarte Stile können Sie CSS-Anwendungsstile für Ihr Erlebnis definieren. Klicken Sie auf den Dropdown-Pfeil neben Stile, und klicken Sie anschließend auf Anwendung, um den Stil-Editor anzuzeigen:
Voraussetzungen
• Zugriff auf ThingWorx Studio
• Eine ThingMark, der Sie Ihr Erlebnis zuordnen möchten
• Zugriff auf einen experience service
Schritte
1. Öffnen Sie ThingWorx Studio, und erstellen Sie ein neues Projekt vom Typ Mobilgerät, AR. Sobald ThingWorx Studio geöffnet ist, wechseln Sie zum 2D-Zeichenbereich.
2. Ziehen Sie zwei Schaltfläche-Widgets auf den Zeichenbereich, und legen Sie es ab.
3. Wählen Sie die erste Schaltfläche im Zeichenbereich aus. Geben Sie Play in das Feld Text ein.
Wählen Sie die zweite Schaltfläche im Zeichenbereich aus. Geben Sie Stop in das Feld Text ein.
4. Klicken Sie im Fensterbereich PROJEKT unter STILE auf Anwendung.
Der Anwendungsstil-Editor wird angezeigt. Hier definieren Sie Ihre CSS-Klassen.
5. Geben Sie im Editor Folgendes ein:
.my-button1 {
font-family: Century Gothic;
color: white;
background-color: green;
font-weight: bold;
font-style: italic;
}
.my-button2 {
font-family: Century Gothic;
color: white;
background-color: red;
font-weight: bold;
font-style: italic;
}
6. Sobald Sie die CSS-Klassen definiert haben, klicken Sie auf Speichern. Sobald der Speichervorgang abgeschlossen ist, klicken Sie unter ANSICHTEN auf Startseite, und navigieren Sie zurück zum 2D-Zeichenbereich.
7. Klicken Sie auf die Schaltfläche "Play". Geben Sie my-button1 in das Feld Klasse im Bereich DETAILS ein.
Klicken Sie auf die Schaltfläche "Stop". Geben Sie my-button2 in das Feld Klasse im Bereich DETAILS ein.
Experimentieren Sie mit den Klassen, und probieren Sie verschiedene Farben, Schriftarten usw. aus. Weitere Informationen zu verschiedenen CSS-Stilen finden Sie unter
w3schools.com.
Übergeordnetes Thema
