Platz optimieren: Tipps für kleine Wohnungen

Navigation ist der Schlüssel in jeder digitalen Benutzeroberfläche. Intelligente Komponenten 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 Weitergeben dieser durch Ihre Komponenten behandeln. Einer der Hauptvorteile der Verwendung von verschachtelten 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.

Starten auf atomarer Ebene

Framer ermöglicht es Ihnen, vollständig interaktive und animierte Komponenten zu erstellen und sogar Komponenten innerhalb anderer Komponenten zu verschachteln. Wir erstellen eine Navigationsleistenkomponente für eine Website, die zwei verschiedene Arten von verschachtelten Komponenten mit ihren eigenen einzigartigen Interaktionen enthalten wird. Unser Projekt wird eine Navigationsleiste enthalten, die verschiedene verschachtelte Komponenten umfasst, nämlich fünf Navigationspunkte und eine Einkaufswagenkomponente. Das Design unserer verschachtelten Komponenten, des Navigationslistenpunkts und des Einkaufswagens, wird sich darauf auswirken, wie wir unsere Navigationsleiste gestalten. Aus diesem Grund umfasst ein optimaler Arbeitsablauf, mit der 'tiefsten' verschachtelten Komponente zu beginnen und von dort aus weiterzuarbeiten.

Komponenten verschachteln

Sobald wir unsere beiden Komponenten bereit 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 Komponentenwerkzeug in der Werkzeugleiste. Um eine andere Komponente in unserer neuen Komponente zu verschachteln, ziehen Sie einfach eine andere Komponente auf die Komponentensee und platzieren Sie sie innerhalb Ihrer gestalteten Navigationsleiste.

Interaktionen von der Navigationsleiste aus 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-Connector mit einem neuen Bildschirm verbinden, könnten wir eine Interaktion einrichten. Dies würde jedoch ausgelöst werden, wenn wir irgendwo innerhalb unserer Komponente tippen. Das ist nicht das, was wir tun möchten, da wir diesen Übergang nur von einem bestimmten Element aus auslösen möchten. Hier kommen Ereignisvariablen ins Spiel, die spezielle Arten von Variablen sind, die nicht mit Eigenschaften (wie Opazität oder Füllung) verbunden sind, sondern stattdessen mit Ereignissen.