Produktinspektor 301: propertyPopup erstellen
Voraussetzungen
Sie müssen Produktinspektor 201: Teilesuche erstellen abgeschlossen haben, bevor Sie mit diesem Abschnitt beginnen.
An diesem Punkt werden die Metadaten, die der ausgewählten Komponente zugeordnet sind, geladen und in der 2D-Benutzeroberfläche gerendert. Visuelle Indikatoren heben das aktuell ausgewählte Element hervor, damit sich der Benutzer besser orientieren kann. Integrieren Sie ein Eigenschaftsfenster, das erweiterte Metadaten für die ausgewählte Unterbaugruppe dynamisch anzeigt, um eine tiefergehende Betrachtung der Modellhierarchie zu ermöglichen.
1. Definieren Sie das folgende CSS für ein Popup auf der linken Seite unter > :
.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. Navigieren Sie zur 2D-Canvas der Ansicht Visualization.
3. Fügen Sie dem Zeichenbereich ein Popup-Widget hinzu, und konfigurieren Sie die folgenden Eigenschaften:
◦ Klasse – Geben Sie left-side-popup ein.
◦ Studio ID – Geben Sie propertyPopup ein.
4. Fügen Sie als Nächstes ein Raster-Layout-Widget zum Popup-Widget hinzu.
5. Geben Sie bei ausgewähltem Raster-Layout-Widget im Fensterbereich DETAILS im Feld Rand den Wert 10px ein.
6. Wählen Sie die Spalte unter dem neuen Popup in der Projektstruktur aus, um den Fensterbereich DETAILS anzuzeigen. Klicken Sie unter RASTERAKTIONEN auf Spalte hinzufügen.
7. Wählen Sie die linke Spalte aus, und konfigurieren Sie die folgenden Eigenschaften:
◦ Flexible Richtung – Wählen Sie Zeile aus.
◦ Inhalt ausrichten – Wählen Sie Start aus.
◦ Elemente ausrichten – Wählen Sie Zentriert aus.
8. Fügen Sie der linken Spalte eine Beschriftung hinzu und konfigurieren Sie die folgenden Eigenschaften:
◦ Text – Geben Sie Part Details ein.
◦ Klasse – Geben Sie simple-label title-label ein.
◦ Abstand (z.B. 10px 10px 20px 10px) – Geben Sie 0px 0px 10px 0px ein.
◦ Studio ID – Geben Sie partDetailsTitleLabel ein.
9. Wählen Sie die rechte Spalte aus, und konfigurieren Sie die folgenden Eigenschaften:
◦ Flexible Richtung – Wählen Sie Zeile aus.
◦ Inhalt ausrichten – Wählen Sie Ende aus.
◦ Elemente ausrichten – Wählen Sie Zentriert aus.
10. Fügen Sie der rechten Spalte eine Schaltfläche hinzu und konfigurieren Sie die folgenden Eigenschaften:
◦ Text – Geben Sie Part Details ein.
◦ Klasse – Geben Sie simple-label title-label ein.
◦ Abstand (z.B. 10px 10px 20px 10px) – Geben Sie 0px 0px 10px 0px ein.
◦ Studio ID – Geben Sie closePartDetailsButton ein.
11. Ziehen Sie das Ereignis Klicken der Schaltfläche closePartDetailsButton 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.
12. Wählen Sie in der Projektstruktur unter propertyPopup die Option row aus. Klicken Sie im Fensterbereich DETAILS unter RASTERAKTIONEN auf Zeile hinzufügen.
13. Fügen Sie der neuen Zeile (zweite Zeile) ein Wiederholungs-Widget hinzu. Geben Sie propertiesList für Studio ID ein.
14. Fügen Sie dem Wiederholungs-Widget ein Raster-Layout-Widget hinzu.
15. Wählen Sie in der Projektstruktur unter propertiesList die Option row aus. Klicken Sie im Fensterbereich DETAILS unter RASTERAKTIONEN auf Zeile hinzufügen
.
16. Fügen Sie der linken Spalte eine Beschriftung hinzu und konfigurieren Sie die folgenden Eigenschaften:
◦ Text – Geben Sie {{item.name}} ein.
◦ Klasse – Geben Sie simple-label simple-label--green ein.
◦ Abstand (z.B. 10px 10px 20px 10px) – Geben Sie 0px 0px 10px 0px ein.
◦ Studio ID – Geben Sie itemNameLabel ein.
17. Fügen Sie nun eine Beschriftung zur rechten Spalte hinzu, und konfigurieren Sie die folgenden Eigenschaften:
◦ Text – Geben Sie {{item.name}} ein.
◦ Klasse – Geben Sie simple-label ein.
◦ Abstand (z.B. 10px 10px 20px 10px) – Geben Sie 0px 0px 10px 0px ein.
◦ Studio ID – Geben Sie itemValueLabel ein.
18. Definieren Sie das folgende zusätzliche CSS in > :
.simple-label--green {
color: $PTC-neon-green;
font-weight: 600;
}
19. Herzlichen Glückwunsch! Sie haben diesen Anwendungsfall abgeschlossen! Lesen Sie als Nächstes Anwendungsfall: Aussagekräftige Modelldaten mit einem Produkt-Explorer anzeigen.