Creare la pagina di destinazione
Per migliorare la navigazione, in questa sezione si aggiungono i popup. I popup aiutano a strutturare l'interfaccia utente in modo più efficace e forniscono una migliore esperienza utente.
1. Definire il seguente CSS per un popup a pagina intera in > :
.full-page-popup {
background-color: $PTC-dark-grey;
}
Gli stili dell'applicazione saranno simili ai seguenti:
2. Accedere alla vista Identification.
3. Aggiungere un widget Popup all'area di lavoro e configurare le seguenti proprietà:
◦ Classe - Immettere full-page-popup
◦ Larghezza (px, %, vh, em) - Immettere 100%
◦ Altezza (px, %, vh, em) - Immettere 100%
◦ Visibile - Selezionare la casella di controllo
◦ ID Studio - Immettere landingPagePopup
4. Creare le associazioni seguenti:
◦ Selezionare scan-1 nell'albero del progetto. Trascinare e rilasciare l'evento Annullato dall'utente in landingPagePopup nell'albero del progetto. Selezionare Mostra popup nella finestra Seleziona destinazione associazione e fare clic su Associa.
◦ Selezionare il pulsante Start Scanning nell'albero del progetto. Trascinare e rilasciare l'evento Clic del pulsante in landingPagePopup nell'albero del progetto. Selezionare Nascondi popup nella finestra Seleziona destinazione associazione e fare clic su Associa.
5. Successivamente, aggiungere un widget Layout griglia al widget Popup per rafforzare la struttura del layout.
6. Con il widget Layout griglia selezionato, selezionare la casella di controllo Divisione uniforme altezza righe nel riquadro DETTAGLI.
7. Aggiungere altre due righe alla griglia facendo clic due volte su Aggiungi riga (in AZIONI GRIGLIA del riquadro DETTAGLI).
8. Lasciare vuota la prima riga.
9. Selezionare la seconda riga e completare le operazioni seguenti:
◦ Direzione flessibile - Selezionare Colonna
◦ Giustifica contenuto - Selezionare Al centro
◦ Allinea elementi - Selezionare Al centro
◦ Aggiungere un widget Etichetta e configurare le seguenti proprietà:
▪ Testo - Immettere Welcome to the
▪ Classe - Immettere simple-label title-label
▪ ID Studio - Immettere welcomeLabel
◦ Aggiungere un secondo widget Etichetta e configurare le seguenti proprietà:
▪ Testo - Immettere Displaying Dynamic Assets 101 sample
▪ Classe - Immettere simple-label sub-title-label
▪ ID Studio - Immettere experienceTitleLabel
10. Selezionare la terza riga e completare le operazioni seguenti:
◦ Impostare Direzione flessibile su Riga
◦ Impostare Giustifica contenuto su Al centro
◦ Impostare Allinea elementi su Fine
◦ Impostare Spaziatura interna (10 px 10 px 20 px 10 px) su 20 px
11. Successivamente, spostare il pulsante Start Scanning nella terza riga e aggiornare le seguenti proprietà:
◦ Testo - Immettere Scan the QR code
◦ Classe - Immettere long-button--green
◦ ID Studio - Immettere startScanButton
12. Ora che si dispone di una pagina di destinazione, si aggiunge un popup per l'identificazione del prodotto.