Overrides sind eine leistungsstarke Funktion in Framer, mit der Sie Komponenten zur Laufzeit modifizieren und steuern können. In diesem Blogbeitrag werden wir untersuchen, wie man Overrides verwendet, um synchronisierte Preiskarten zu erstellen, die den Preis und den umgeschalteten Zustand aktualisieren, wann immer Sie eine der Karten umschalten.

Einrichten des Projekts

Wir benötigen eine grundlegende Projektstruktur mit einem Umschalter mit zwei Zuständen: Aus und Ein. Wir verwenden Overrides, um diese Umschalter zu verbinden und den Preis sowie den umgeschalteten Zustand zu aktualisieren. Wir wählen die drei Umschalter aus und fügen eine neue Datei mit einem neuen Override hinzu.

Erstellen von Overrides in Framer

Es gibt einige einfache Schritte, um einen Override einzurichten. Zunächst benötigen wir einen Speicher, um einen bestimmten Wert zu verfolgen. In unserem Fall handelt es sich um einen booleschen Wert namens yearly. Wenn wir eine der Preiskarten umschalten, wird der Wert aktualisiert, und der Preis sowie die Umschaltungen gehen je nach diesem booleschen Wert in den richtigen Zustand.

Als Nächstes schreiben wir einen withToggle Override, der eine Komponente aus der Leinwand erhält und eine React-Komponente mit der übergebenen Leinwandkomponente und aktualisierten Props zurückgibt. In diesem Fall geben wir einfach die Props zurück, die wir bereits von Framer erhalten. Wenn wir diesen Override anwenden, wird er noch nichts bewirken.

Aktualisieren der Variante

Um den Override funktionsfähig zu machen, müssen wir die Variante basierend auf dem aktuellen Wert in unserem Speicher festlegen und den Wert aktualisieren, wann immer wir auf unsere Komponenten klicken. Wir schreiben eine Logik zum Festlegen der richtigen Variante und einen onClick-Handler, der den Speicher auf das Gegenteil seines aktuellen Wertes setzt.

Wir können auch jede andere Eigenschaft aktualisieren, die Komponenten haben, zum Beispiel ihren Text. Wann immer wir auf die Komponente klicken, können wir den Text aktualisieren, um die jährlichen oder monatlichen Preise widerzuspiegeln.

Erstellen von coolen synchronisierten Preiskarten

Mit diesen zwei Techniken können wir synchronisierte Preiskarten erstellen, die zwischen zwei Zahlen animieren. Wir können die Zahl auf der Leinwand als Eigenschaften festlegen; wann immer wir diese umschalten, gibt es eine schöne Übergangsanimation zwischen den beiden.

Wenn wir möchten, können wir einige Abrufe durchführen und lokalisierte Preise für unsere Produkte anzeigen, während wir weiterhin die Macht der Animationen innerhalb von Komponenten nutzen.