Startseite erstellen
In diesem Abschnitt fügen wir Popups hinzu, um die Navigation zu verbessern. Popups helfen dabei, die Benutzeroberfläche effektiver zu strukturieren und bieten eine bessere Benutzererfahrung.
1. Definieren Sie das folgende CSS für ein ganzseitiges Popup unter > :
.full-page-popup {
background-color: $PTC-dark-grey;
}
Ihre Anwendungsstile sollten jetzt ungefähr wie folgt aussehen:
2. Navigieren Sie zur Ansicht Identification.
3. Fügen Sie dem Zeichenbereich ein Popup-Widget hinzu, und konfigurieren Sie die folgenden Eigenschaften:
◦ Klasse – Geben Sie full-page-popup ein.
◦ Breite (px, %, vh, em) – Geben Sie 100% ein.
◦ Höhe (px, %, vh, em) – Geben Sie 100% ein.
◦ Sichtbar – Aktivieren Sie das Kontrollkästchen.
◦ Studio ID – Geben Sie landingPagePopup ein.
4. Erstellen Sie die folgenden Bindungen:
◦ Wählen Sie in der Projektstruktur scan-1 aus. Ziehen Sie das Ereignis Von Benutzer abgebrochen auf landingPagePopup in der Projektstruktur, und legen Sie es ab. Wählen Sie im Fenster Bindendes Ziel auswählen die Option Popup anzeigen aus, und klicken Sie auf Binden.
◦ Wählen Sie in der Projektstruktur die Schaltfläche Start Scanning aus. Ziehen Sie das Ereignis Klicken der Schaltfläche auf landingPagePopup in der Projektstruktur, und legen Sie es ab. Wählen Sie im Fenster Bindendes Ziel auswählen die Option Popup ausblenden aus, und klicken Sie auf Binden.
5. Fügen Sie dem Popup-Widget als Nächstes ein Raster-Layout-Widget hinzu, um dem Layout mehr Struktur zu geben.
6. Aktivieren Sie bei ausgewähltem Raster-Layout-Widget das Kontrollkästchen Zeilen teilen verfügbare Höhe gleichmäßig im Fensterbereich Details aus.
7. Fügen Sie dem Raster zwei weitere Zeilen hinzu, indem Sie zweimal auf Zeile hinzufügen klicken (unter Rasteraktionen im Fensterbereich Details).
8. Lassen Sie die erste Zeile leer.
9. Wählen Sie die zweite Zeile aus, und machen Sie folgende Angaben:
◦ Flexible Richtung – Wählen Sie Spalte aus.
◦ Inhalt ausrichten – Wählen Sie Zentriert aus.
◦ Elemente ausrichten – Wählen Sie Zentriert aus.
◦ Fügen Sie ein Widget Beschriftung hinzu, und konfigurieren Sie die folgenden Eigenschaften:
▪ Text – Geben Sie Welcome to the ein.
▪ Klasse – Geben Sie simple-label title-label ein.
▪ Studio ID – Geben Sie welcomeLabel ein.
◦ Fügen Sie ein zweites Widget Beschriftung hinzu, und konfigurieren Sie die folgenden Eigenschaften:
▪ Text – Geben Sie Displaying Dynamic Assets 101 sample ein.
▪ Klasse – Geben Sie simple-label sub-title-label ein.
▪ Studio ID – Geben Sie experienceTitleLabel ein.
10. Wählen Sie die dritte Zeile aus, und machen Sie folgende Angaben:
◦ Legen Sie Flexible Richtung auf Zeile fest.
◦ Legen Sie Inhalt ausrichten auf Zentriert fest.
◦ Legen Sie Elemente ausrichten auf Ende fest.
◦ Legen Sie Abstand (z.B. 10px 10px 20px 10px) auf 20px fest.
11. Verschieben Sie als Nächstes die Schaltfläche Scannen starten in die dritte Zeile, und aktualisieren Sie die folgenden Eigenschaften:
◦ Text – Geben Sie Scan the QR code ein.
◦ Klasse – Geben Sie long-button--green ein.
◦ Studio ID – Geben Sie startScanButton ein.
12. Fügen Sie jetzt, da Sie eine Startseite erstellt haben, ein Produktidentifikations-Popup hinzu.