Dokumen ini dibuat untuk mengatasi kesulitan yang dialami pengguna domestik dalam mempelajari FramerFramer akibat kurangnya bahan dalam bahasa Korea. Konten ini menerjemahkan tulisan resmi di blog ke dalam bahasa Indonesia dan menambahkan informasi berguna untuk pengaplikasian praktis. Semoga ini dapat membantu Anda yang menggunakan FramerFramer.

Mengatur Proyek

Pertama, Anda memerlukan struktur proyek dasar. Anda bisa membuat toggle dengan dua status (Off dan On), dan menghubungkannya menggunakan override sehingga toggle tersebut memperbarui harga dan status bersama-sama. Setelah memilih tiga toggle, tambahkan file baru dan tuliskan Override baru.

Membuat Override di FramerFramer

Proses pengaturan Override adalah sebagai berikut. Pertama, Anda memerlukan storage yang dapat melacak nilai tertentu, misalnya nilai boolean bernama yearly. Ketika salah satu kartu harga di-toggle, nilai ini akan diperbarui, dan status serta harga semua kartu harga akan berubah sesuai.

Kemudian tulis Override bernama withToggle. Override ini menerima komponen dari canvas dan mengembalikannya sebagai komponen React sambil mengirimkan props yang telah diperbarui. Di sini, kita cukup mengembalikan props yang diterima dari FramerFramer. Dalam kondisi ini, itu belum melakukan apa-apa.

Memperbarui Variant

Agar Override benar-benar berfungsi, diperlukan onClick handler yang mengatur Variant berdasarkan nilai saat ini di storage, dan ketika komponen diklik, nilai di store dibalik. Dengan cara ini, Variant yang tepat diterapkan dan transisi terjadi dengan mulus.

Sifat lain seperti teks juga dapat diperbarui. Misalnya, Anda dapat mengatur agar ketika komponen diklik, teks berubah dari harga bulanan ke harga tahunan.

Menyelesaikan Kartu Harga Tersinkronisasi

Menggunakan dua metode ini, Anda dapat membuat kartu harga yang beralih dan dianimasikan antara dua angka. Setel setiap angka sebagai atribut di canvas, dan Anda akan melihat efek transisi yang alami ketika toggle diaktifkan.

Jika Anda ingin, Anda juga dapat mengintegrasikan API untuk mendapatkan harga lokal, sambil tetap memanfaatkan keuntungan animasi dalam komponen FramerFramer.

Kesimpulan

Override di FramerFramer adalah fitur yang kuat untuk mengontrol dan memodifikasi komponen selama waktu nyata. Dalam tulisan kali ini, kita telah membahas cara membuat harga dan status tersinkronisasi ketika satu kartu di-toggle agar tersinkronisasi di seluruh kartu. Cobalah membuka proyek dan bereksperimen agar dapat lebih memahaminya.

Coba Ikuti Proyek→

Tulisan ini adalah adaptasi dan terjemahan dari ‘How to build synced pricing cards using overrides in FramerFramer‘ di blog resmi FramerFramer.