A Variables ile Bir Navigasyon Bileşeni Oluşturma

Gezinme, herhangi bir dijital arayüzde anahtardır. Akıllı Bileşenler, prototipinizin geri kalanıyla mükemmel çalışan özel etkileşimli gezinme bileşenleri oluşturmamıza olanak tanır. Bu kılavuzda, bileşen yuvalamanın kavramlarını, bir bileşendeki öğelere Olay Değişkenleri kullanarak olaylar eklemeyi ve bunları bileşenlerinizden geçirmeyi ele alacağız. Katmanlı bileşenler kullanmanın ana avantajlarından biri, başka bir bileşendeki öğelerin benzersiz üstüne gelme durumları gibi durumlar üzerinde tam kontrol sağlamasıdır.

Atomik seviyede başlamak

Framer, tamamen etkileşimli ve animasyonlu bileşenler oluşturmanıza olanak tanır ve hatta diğer bileşenlere bileşenler yerleştirmenizi sağlar. İki farklı türde yuvalı bileşeni olan, kendi benzersiz etkileşimlerine sahip bir web sitesi için bir gezinme çubuğu bileşeni oluşturmaktayız. Projemiz, beş Gezinme öğesi ve bir Alışveriş sepeti bileşeni olan çeşitli yuvalı bileşenler içeren bir Gezinme çubuğu içerecek. Yuvalı bileşenlerimiz olan gezinme liste öğesi ve alışveriş sepetinin tasarımı, gezinme çubuğumuzu nasıl tasarladığımızı etkileyecektir. Bu nedenle, optimal bir işlem akışı, 'en derin' yuvalı bileşenden başlayıp buradan yukarıya doğru inşa etmeyi içerir.

Bileşenleri yuvalamak

İki bileşenimiz hazır olduğunda, bunları içinde yuvalayacağımız bileşeni oluşturmaya başlayabiliriz. Gezinme çubuğunuzu çizin, tuval üzerine seçin ve Araç Çubuğundaki Bileşen aracına tıklayın. Yeni bileşenimize farklı bir bileşen yuvalamak için, başka herhangi bir bileşeni Bileşen Tuvali'ne sürükleyip tasarladığınız gezinme çubuğunun içerisine yerleştirin.

Geçişleri gezinme çubuğundan tetiklemek

Ana tuvale geri döndüğümüzde, 'Giyim' üzerine tıklayarak tamamen yeni bir Ekrana gitmek istiyoruz. Bileşeni, Prototipleme Bağlayıcısını kullanarak yeni bir ekrana bağlarsanız, bir Etkileşim ayarlayabiliriz. Ancak, bu tetikleme, bileşenimiz içindeki herhangi bir yere tıkladığımızda olur. Bunun yerine, yalnızca belirli bir öğeden bu geçişi tetiklemek istiyoruz. Burada Olay Değişkenleri devreye girer; bunlar opaklık veya doldurma gibi özelliklere değil de olaylara bağlı özel türde Değişkenlerdir.