Eine Karriere im Bereich Webdesign beginnen und ausbauen

Die Navigation ist ein zentraler Bestandteil jeder digitalen Schnittstelle. Mit Smart Components können wir benutzerdefinierte interaktive Navigationskomponenten erstellen, die perfekt mit dem Rest Ihres Prototyps zusammenarbeiten. In diesem Leitfaden behandeln wir die Konzepte der Verschachtelung von Komponenten, das Hinzufügen von Ereignissen zu Elementen in einer Komponente mithilfe von Ereignisvariablen und die Weitergabe dieser Ereignisse an Ihre Komponenten. Einer der Hauptvorteile der Verwendung verschachtelter Komponenten besteht darin, dass Sie die vollständige Kontrolle über deren Zustände haben, z. B. über eindeutige Hover-Zustände von Elementen innerhalb einer anderen Komponente.

Beginnend auf atomarer Ebene

Mit Framer können Sie vollständig interaktive und animierte Komponenten erstellen und sogar Komponenten in anderen Komponenten verschachteln. Wir erstellen eine Navigationsleistenkomponente für eine Website, die zwei verschiedene Arten von verschachtelten Komponenten mit jeweils eigenen Interaktionen enthält. Unser Projekt wird eine Navigationsleiste mit verschiedenen verschachtelten Komponenten enthalten, nämlich fünf Navigationselemente und eine Warenkorbkomponente. Das Design unserer verschachtelten Komponenten, des Navigationslistenelements und des Warenkorbs, wird sich auf die Gestaltung unserer Navigationsleiste auswirken. Aus diesem Grund umfasst ein optimaler Arbeitsablauf, dass man mit der „tiefsten” verschachtelten Komponente beginnt und von dort aus weiterbaut.

Verschachtelte Komponenten

Sobald wir unsere beiden Komponenten fertiggestellt 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 Arbeitsfläche aus und klicken Sie in der Symbolleiste auf das Komponenten-Werkzeug. Um eine andere Komponente in unserer neuen Komponente zu verschachteln, ziehen Sie einfach eine beliebige andere Komponente auf die Komponenten-Arbeitsfläche und platzieren Sie sie innerhalb Ihrer entworfenen Navigationsleiste.

Auslösen von Interaktionen über die Navigationsleiste

Zurück auf der Hauptfläche möchten wir auf „Kleidung“ tippen und zu einem völlig neuen Bildschirm navigieren können. Wenn Sie die Komponente über den Prototyping Connector mit einem neuen Bildschirm verbinden würden, könnten wir eine Interaktion einrichten. Diese würde jedoch ausgelöst werden, wenn wir irgendwo innerhalb unserer Komponente tippen. Das ist jedoch nicht unser Ziel, da wir diesen Übergang nur von einem bestimmten Element aus auslösen möchten. Hier kommen Ereignisvariablen ins Spiel, bei denen es sich um spezielle Variablentypen handelt, die nicht an Eigenschaften (wie Deckkraft oder Füllung), sondern an Ereignisse gebunden sind.