Erstellen einer Navigationskomponente mit Variablen

Navigation ist der Schlüssel in jeder digitalen Schnittstelle. Smart Components ermöglichen es uns, benutzerdefinierte interaktive Navigationselemente zu erstellen, die perfekt mit dem Rest Ihres Prototyps funktionieren. In diesem Leitfaden behandeln wir die Konzepte des Verschachtelns von Komponenten, das Hinzufügen von Ereignissen zu Elementen in einer Komponente mithilfe von Ereignisvariablen und das Weiterleiten dieser durch Ihre Komponenten. Einer der Hauptvorteile der Verwendung verschachtelter Komponenten ist, dass Sie die volle Kontrolle über deren Zustände haben, wie z.B. einzigartige Hover-Zustände von Elementen innerhalb einer anderen Komponente.

Auf atomarer Ebene beginnen

Framer ermöglicht Ihnen die Erstellung vollständig interaktiver und animierter Komponenten und sogar das Verschachteln von Komponenten innerhalb anderer Komponenten. Wir bauen eine Navigationsleistenkomponente für eine Website, die zwei verschiedene Arten von verschachtelten Komponenten mit ihren eigenen einzigartigen Interaktionen enthält. Unser Projekt wird eine Navigationsleiste enthalten, die verschiedene verschachtelte Komponenten enthält, nämlich fünf Navigationsartikel und eine Einkaufskorb-Komponente. Das Design unserer verschachtelten Komponenten, des Navigationslistenelements und des Einkaufswagens, wird beeinflussen, wie wir unsere Navigationsleiste gestalten. Aus diesem Grund umfasst ein optimaler Workflow den Start mit der 'tiefsten' verschachtelten Komponente und dem Aufbau von dort aus.

Komponenten verschachteln

Sobald wir unsere zwei Komponenten fertig haben, können wir mit der Erstellung der Komponente beginnen, in der wir diese verschachteln werden. Zeichnen Sie Ihre Navigationsleiste, wählen Sie sie auf der Leinwand aus und klicken Sie auf das Komponententool in der Werkzeugleiste. Um eine andere Komponente in unserer neuen Komponente zu verschachteln, ziehen Sie einfach eine andere Komponente in die Komponenten-Leinwand und platzieren Sie sie innerhalb Ihrer entworfenen Navigationsleiste.

Interaktionen von der Navigationsleiste auslösen

Zurück auf der Hauptleinwand möchten wir in der Lage sein, auf 'Kleidung' zu tippen und zu einem völlig neuen Bildschirm zu navigieren. Wenn Sie die Komponente mit dem Prototyping-Verbinder mit einem neuen Bildschirm verbinden würden, könnten wir eine Interaktion einrichten. Dies würde jedoch ausgelöst, wenn wir irgendwo innerhalb unserer Komponente tippen. Das wollen wir nicht, da wir diesen Übergang nur von einem spezifischen Element auslösen möchten. Hier kommen Ereignisvariablen ins Spiel, bei denen es sich um spezielle Arten von Variablen handelt, die nicht an Eigenschaften (wie Transparenz oder Füllung) gebunden sind, sondern an Ereignisse.