Starting and Growing a Career in Web Design

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

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

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

تداخل المكونات

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

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

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