Navigasyon, her türlü dijital arayüzde kilit öneme sahiptir. Akıllı Bileşenler, prototipinizin geri kalanıyla mükemmel şekilde çalışan özel etkileşimli navigasyon bileşenleri oluşturmamıza olanak tanır. Bu kılavuzda, bileşenleri iç içe yerleştirme, Olay Değişkenleri kullanarak bir bileşendeki öğelere olaylar ekleme ve bunları bileşenleriniz arasında aktarma kavramlarını ele alacağız. İç içe geçmiş bileşenleri kullanmanın ana faydalarından biri, başka bir bileşen içindeki öğelerin benzersiz havada gezinme (hover) durumları gibi durumlara tam kontrol sağlamasıdır.

Atomik düzeyde başlamak

Framer, tamamen etkileşimli ve animasyonlu bileşenler oluşturmanıza ve hatta bileşenleri diğer bileşenlerin içine yerleştirmenize olanak tanır. Kendi benzersiz etkileşimlerine sahip, iki farklı türde iç içe geçmiş bileşen içerecek bir web sitesi için bir navigasyon çubuğu bileşeni oluşturuyoruz. Projemiz; beş adet Navigasyon öğesi ve bir Alışveriş sepeti bileşeni olmak üzere çeşitli iç içe geçmiş bileşenler içeren bir Navigasyon çubuğu içerecek. İç içe geçmiş bileşenlerimizin (navigasyon listesi öğesi ve alışveriş sepeti) tasarımı, navigasyon çubuğumuzu nasıl tasarlayacağımızı etkileyecektir. Bu nedenle, optimize bir iş akışı, en 'derindeki' iç içe geçmiş bileşenden başlayarak yukarıya doğru inşa etmeyi içerir.

Bileşenleri iç içe yerleştirme

İki bileşenimiz hazır olduğunda, bunları içine yerleştireceğimiz bileşeni oluşturmaya başlayabiliriz. Navigasyon çubuğunuzu çizin, tuval üzerinde seçin ve Araç Çubuğundaki Bileşen aracına tıklayın. Yeni bileşenimizin içine farklı bir bileşen yerleştirmek için, diğer herhangi bir bileşeni Bileşen Tuvaline sürükleyin ve tasarladığınız navigasyon çubuğunun içine yerleştirin.

Navigasyon çubuğundan etkileşimleri tetikleme

Ana tuvale geri döndüğümüzde, 'Giyim' öğesine dokunabilmek ve tamamen yeni bir Ekrana geçebilmek istiyoruz. Bileşeni Prototip Konektörünü kullanarak yeni bir ekrana bağlarsanız, bir Etkileşim kurabiliriz. Ancak bu, bileşenimizin içinde herhangi bir yere dokunduğumuzda tetiklenecektir. Yapmak istediğimiz şey bu değil, çünkü bu geçişi yalnızca belirli bir öğeden tetiklemek istiyoruz. Özelliklere (opaklık veya dolgu gibi) değil, olaylara bağlı olan özel bir Değişken türü olan Olay Değişkenleri burada devreye giriyor.

Ayrıca Bakınız