Product Inspector 301 - Creare il popup delle proprietà
Prerequisiti
Prima di iniziare questa sezione, assicurarsi di avere completato la sezione Product Inspector 201 - Creare lo strumento di ricerca parti.
A questo punto, i metadati associati al componente selezionato vengono caricati e visualizzati nell'interfaccia utente 2D. Gli indicatori visivi evidenziano l'elemento attualmente selezionato per migliorare l'orientamento dell'utente. Per consentire una verifica più approfondita della gerarchia del modello, si integrerà un pannello delle proprietà che visualizza dinamicamente i metadati estesi del sottoassieme selezionato.
1. Definire il seguente CSS per un popup a sinistra in > :
.left-side-popup {
position: fixed;
left: 0px !important;
top: 50%;
-ms-transform: translateY(-50%);
transform: translateY(-50%);
border-radius: 0px 5px 5px 0px;
background-color: $PTC-dark-grey;
opacity: 90%;
}
2. Accedere all'area di lavoro 2D della vista Visualization.
3. Aggiungere un widget Popup all'area di lavoro e configurare le seguenti proprietà:
◦ Classe - Immettere left-side-popup
◦ ID Studio - Immettere propertyPopup
4. Successivamente, aggiungere un widget Layout griglia al widget Popup.
5. Con il widget Layout griglia selezionato, immettere 10px nel campo Margine del riquadro DETTAGLI.
6. Selezionare la colonna sotto il nuovo popup nell'albero del progetto per visualizzare il relativo riquadro DETTAGLI. Fare clic su Aggiungi colonna in AZIONI GRIGLIA.
7. Selezionare la colonna di sinistra e configurare le seguenti proprietà:
◦ Direzione flessibile - Selezionare Riga
◦ Giustifica contenuto - Selezionare Inizio
◦ Allinea elementi - Selezionare Al centro
8. Aggiungere un'Etichetta alla colonna di sinistra e configurare le seguenti proprietà:
◦ Testo - Immettere Part Details
◦ Classe - Immettere simple-label title-label
◦ Spaziatura interna (10 px 10 px 20 px 10 px) - Immettere 0px 0px 10px 0px
◦ ID Studio - Immettere partDetailsTitleLabel
9. Selezionare la colonna di destra e configurare le seguenti proprietà:
◦ Direzione flessibile - Selezionare Riga
◦ Giustifica contenuto - Selezionare Fine
◦ Allinea elementi - Selezionare Al centro
10. Aggiungere un Pulsante alla colonna di destra e configurare le seguenti proprietà:
◦ Testo - Immettere Part Details
◦ Classe - Immettere simple-label title-label
◦ Spaziatura interna (10 px 10 px 20 px 10 px) - Immettere 0px 0px 10px 0px
◦ ID Studio - Immettere closePartDetailsButton
11. Trascinare e rilasciare l'evento Clic di closePartDetailsButton in propertyPopup nell'albero del progetto. Selezionare Nascondi popup nella finestra Seleziona destinazione associazione e fare clic su Associa.
12. Selezionare row in propertyPopup nell'albero del progetto. Fare clic su Aggiungi riga nel riquadro DETTAGLI in AZIONI GRIGLIA.
13. Aggiungere un widget Ripetitore alla nuova riga (seconda riga). Immettere propertiesList per ID Studio.
14. Aggiungere un widget Layout griglia al Ripetitore.
15. Selezionare row in propertiesList nell'albero del progetto. Fare clic su Aggiungi riga nel riquadro DETTAGLI in AZIONI GRIGLIA
.
16. Aggiungere un'Etichetta alla colonna di sinistra e configurare le seguenti proprietà:
◦ Testo - Immettere {{item.name}}
◦ Classe - Immettere simple-label simple-label--green
◦ Spaziatura interna (10 px 10 px 20 px 10 px) - Immettere 0px 0px 10px 0px
◦ ID Studio - Immettere itemNameLabel
17. A questo punto, aggiungere un'Etichetta alla colonna di destra e configurare le seguenti proprietà:
◦ Testo - Immettere {{item.name}}
◦ Classe - Immettere simple-label
◦ Spaziatura interna (10 px 10 px 20 px 10 px) - Immettere 0px 0px 10px 0px
◦ ID Studio - Immettere itemValueLabel
18. Definire il seguente CSS aggiuntivo in > :
.simple-label--green {
color: $PTC-neon-green;
font-weight: 600;
}
19. Il caso di utilizzo è stato completato. Si può ora passare a Caso di utilizzo: visualizzare dati di modello significativi con un Product Explorer.