بناء مكون تصفح باستخدام المتغيرات

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

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

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

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

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

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

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