Erstellen einer Navigationskomponente mit Variablen

Navigation ist der Schlüssel innerhalb jeder digitalen Benutzeroberfläche. Smart Components ermöglichen es uns, benutzerdefinierte interaktive Navigationskomponenten zu erstellen, die perfekt mit dem Rest Ihres Prototyps funktionieren. In diesem Leitfaden werden 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 behandeln. Einer der Hauptvorteile der Verwendung verschachtelter Komponenten besteht darin, dass sie die volle Kontrolle über ihre Zustände bieten, wie z.B. einzigartige Hover-Zustände von Elementen innerhalb einer anderen Komponente.

Beginn auf atomarer Ebene

Framer ermöglicht es Ihnen, vollständig interaktive und animierte Komponenten zu erstellen und sogar Komponenten in anderen Komponenten zu verschachteln. Wir erstellen eine Navigationsleiste für eine Website, die zwei verschiedene Arten von verschachtelten Komponenten mit jeweils eigenen einzigartigen Interaktionen enthält. Unser Projekt wird eine Navigationsleiste enthalten, die verschiedene verschachtelte Komponenten enthält, nämlich fünf Navigationspunkte und eine Einkaufswagen-Komponente. Das Design unserer verschachtelten Komponenten, des Navigationslistenpunkts und des Einkaufswagens, wird sich darauf auswirken, wie wir unsere Navigationsleiste gestalten. Aus diesem Grund ist ein optimaler Arbeitsablauf, mit dem Starten der 'tiefsten' verschachtelten Komponente und dem Aufbau von dort aus.

Verschachtelung von Komponenten

Sobald wir unsere beiden Komponenten bereit haben, können wir die Komponente erstellen, in die wir diese verschachteln werden. Zeichnen Sie Ihre Navigationsleiste, wählen Sie sie auf der Leinwand aus und klicken Sie auf das Komponentenwerkzeug in der Symbolleiste. Um eine andere Komponente in unserer neuen Komponente zu verschachteln, ziehen Sie einfach eine andere Komponente auf die Komponenten-Leinwand und platzieren Sie sie innerhalb Ihrer entworfenen Navigationsleiste.

Auslösen von Interaktionen von der Navigationsleiste aus

Zurück auf der Hauptleinwand möchten wir auf 'Kleidung' tippen und zu einem vollständig neuen Bildschirm navigieren können. Wenn Sie die Komponente mit dem Prototyping Connector mit einem neuen Bildschirm verbinden würden, könnten wir eine Interaktion einrichten. Diese würde jedoch ausgelöst, wenn wir irgendwo innerhalb unserer Komponente tippen. Dies ist nicht das, was wir tun möchten, da wir diesen Übergang nur von einem bestimmten Element auslösen möchten. Hier kommen Ereignisvariablen ins Spiel, die spezielle Arten von Variablen sind, die nicht an Eigenschaften (wie Deckkraft oder Füllung) angehängt sind, sondern an Ereignisse.