التنقل أمر أساسي في أي واجهة رقمية. تمكّننا المكونات الذكية من إنشاء مكونات تنقل تفاعلية مخصصة تعمل بشكل مثالي مع بقية النموذج الخاص بك. في هذا الدليل، سنغطي مفاهيم تضمين المكونات، وإضافة أحداث إلى عناصر في مكون باستخدام المتغيرات الحدثية، وتمريرها من خلال مكوناتك. واحدة من المزايا الرئيسية لاستخدام المكونات المتداخلة هي أنها توفر لك السيطرة الكاملة على حالاتها، مثل حالات التحويل الفريدة للعناصر داخل مكون آخر.

البداية من المستوى الذري

تتيح لك Framer إنشاء مكونات تفاعلية كاملة ومتحركة، وتتيح لك أيضًا تضمين المكونات داخل مكونات أخرى. نحن نقوم بإنشاء مكون شريط التنقل لموقع ويب سيحتوي على نوعين مختلفين من المكونات المتداخلة، مع تفاعلاتها الفريدة الخاصة. سيحتوي مشروعنا على شريط تنقل يحتوي على مكونات متداخلة متنوعة، وهي عبارة عن خمس عناصر في القائمة الرئيسية ومكون سلة التسوق واحد. تأثير تصميم المكونات المتداخلة لدينا، عنصر عناصر القائمة وسلة التسوق، سيؤثر على كيفية تصميم شريط التنقل. لهذا السبب، يشمل سير العمل الأمثل بدء العمل بالمكون المتداخل "الأعمق" وبنائه من هناك.

تضمين المكونات

بمجرد أن يكون لدينا المكونين جاهزين، يمكننا بدء إنشاء المكون الذي سنقوم بتضمينه فيه. ارسم شريط التنقل الخاص بك، ثم حدده على اللوحة وانقر فوق أداة المكون في شريط الأدوات. لتضمين مكون مختلف في مكوننا الجديد، قم بسحب أي مكون آخر إلى اللوحة وضعه داخل شريط التنقل الذي صممته.

تشغيل التفاعلات من شريط التنقل

على اللوحة الرئيسية، نود أن نكون قادرين على النقر فوق "الملابس" والانتقال إلى شاشة جديدة بالكامل. إذا قمنا بربط المكون باستخدام موصل Prototyping إلى شاشة جديدة، يمكننا إعداد تفاعل. ومع ذلك، سيتم تنشيط هذا التحويل إذا قمنا بالنقر في أي مكان داخل مكوننا. وهذا ليس ما نريد القيام به، حيث نرغب في تنشيط هذا التحول فقط من عنصر معين. هنا يأتي دور المتغيرات الحدثية، وهي أنواع خاصة من المتغيرات غير مرتبطة بالخصائص (مثل الشفافية أو الملء) ولكنها مرتبطة بالأحداث.