Schaltfläche
Was macht dieses Widget?
Eine Schaltfläche kommuniziert eine Aktion, die beim Antippen zur Laufzeit eintritt.
Wann sollte ich dieses Widget verwenden?
Mit Schaltflächen kann der Erlebnis-Benutzer interagieren und durch das gesamte Erlebnis navigieren. Verwenden Sie das
Schaltfläche-Widget, um dem Benutzer klar und eindeutig mitzuteilen, welche Aktion nach dem Antippen der Schaltfläche ausgeführt wird. Sie können Schaltflächen mit CSS oder Out-of-the-Box-Themen gestalten. Weitere Informationen zu Themen finden Sie unter
Themen.
Gibt es besondere Eigenschaften, Dienste, Ereignisse oder Aktionen?
Dieses Widget besitzt keine eindeutigen Eigenschaften, Dienste oder Ereignisse.
Eine Liste von allgemeinen Widget-Eigenschaften, -Diensten und -Ereignissen finden Sie unter
Allgemeine Widget-Eigenschaften, -Dienste und -Ereignisse.
Das Widget in Aktion
Hier ist ein Beispiel, wie Ihr Widget aussehen könnte.
|
Minimale Schritte, die für die Verwendung erforderlich sind
|
Wie das Ergebnis aussieht
|
|
1. Ziehen Sie ein Schaltfläche-Widget in die Canvas, und legen Sie es ab.
2. Geben Sie den Namen der Schaltfläche im Feld Text ein. Beispiel: Play
3. Binden Sie das Klick-Ereignis der Schaltfläche an ein anderes Widget, und wählen Sie die Art der Bindung aus, die Sie erstellen möchten. Wenn Sie z.B. das Klick-Ereignis an ein Modell binden und die Option Alle abspielen im Fenster Bindungsziel auswählen auswählen, werden beim Antippen der Schaltfläche in einem Erlebnis alle Schritte in der mit dem Modell verknüpften Sequenz abgespielt.
|
| Für dieses Beispiel haben wir das standardmäßige Thema button-balanced verwendet, um die Schaltfläche grün zu färben. |
|
Widget mit CSS stylen
Sie können CSS verwenden, um das Widget zu stylen! Nachfolgend sehen Sie ein Beispiel für eine CSS-Klasse, die Sie erstellen und anwenden können:
|
|
Beachten Sie, dass Klassen eindeutige Namen haben sollten, sodass es nicht zu Konflikten mit anderen Klassen oder vorkonfigurierten Eigenschaften kommt.
|
|
CSS-Beispiel
|
Wie das Ergebnis aussieht
|
|
.ptc-button {
border-width: 1px;
border-style: outset;
border-color: rgb(46, 50, 49);
border-radius: 25px;
background: rgb(47, 48, 53);
font-size: 16px;
font-family: Century Gothic;
color: white;
}
|
|
Weitere Informationen zum Implementieren von CSS-Klassen finden Sie unter
Anwendungsstile.
