كيفية إنشاء مكون styled في Framer X

أريكم كيفية تثبيت المكونات الأنيقة لمشروع Framer X وكيفية إنشاء مكون زر أساسي.

تم نشر المقال الأصلي على موقع zauberware.com

نعم ، يبدو أن Framer X هو أول أداة تصميم ، تدمج إطارًا مثل React بشكل مثالي. حسنًا ، حسنًا ، هناك دائمًا مجال للتحسينات ، لكنه يعمل ، وهناك بعض الميزات الجيدة فيما يتعلق بهذا الموضوع التي أعلن عنها أصحاب المنتجاتFramerX.

يستدعي Framer X مكون React "مكون الكود" ويتم كتابتها في Typescript. لا تخاف من Typescript إذا لم تكن معتادًا عليه. اتبع المسار في هذا البرنامج التعليمي وسترى كم هو بسيط لكتابة مكون التعليمات البرمجية.

إن استخدام المكتبات الخارجية مثل المكونات المصممة يعمل بشكل جيد! في هذه الإرشادات ، سنقوم بإنشاء مكون زر في Framer X باستخدام مكونات نمطية.

إذا لم تكن قد سمعت من قبل بمكونات التصميم قبل أن أنصحك بقراءة مستنداتها. انه رائع جدا. إذا كنت جديدًا في الرد ، فعليك فعل ذلك من قبل.

5 خطوات سهلة لإنشاء مكون على غرار في Framer X:

  1. إنشاء مكون رمز جديد
  2. تثبيت المكونات على غرار
  3. إعداد زر
  4. إنشاء اختلافات زر
  5. إضافة عناصر تحكم الخاصية Framer X

هيا نبدأ!

1. إنشاء مكون رمز جديد

إنشاء مشروع جديد في framer وانتقل إلى علامة التبويب المكون.

انقر فوق "جديد" ، وحدد "الرمز" وأدخل العنوان ، على سبيل المثال "زر". كنت تفضل المحرر يجب فتح ملف Button.tsx.

2. تثبيت المكونات على غرار

مشروع Framer X هو مشروع npm ، حتى نتمكن من إضافة تبعيات مثل كل تطبيق آخر.

ملف مشروع .framerx الخاص بك ليس أكثر من ملف مضغوط ، وإذا قمت بفتح ملف ، فسيحتوي على نسخة في مسار الحفظ التلقائي لنظام التشغيل Mac.

لفتح مسار المشروع ، انقر فوق ملف> إظهار مجلد المشروع. سيؤدي هذا إلى فتح نافذة Finder مع مشروعك.

معرفة الطريق إلى مشروعك. سيكون شيء مثل هذا:

~ / Library / Autosave \ Information / Framer-833DA362-6D23-43F9-A719-06A1753E37C9 / container

افتح الجهاز وقم بتغيير الدليل باستخدام:

$ cd ~ / Library / Autosave \ Information / Framer-833DA362-6D23-43F9-A719-06A1753E37C9 / container

القرص المضغوط للأمر يعني تغيير الدليل ، و ~ هو المسار إلى الدليل الرئيسي للمستخدمين.

إذا كنت تكافح لاكتشاف المسار الصحيح لمشروعك:

  1. انقر بزر الماوس الأيمن على package.json> الحصول على معلومات.
  2. انسخ المسار.
  3. أن يكون وير من نسخ "معلومات الحفظ التلقائي". يجب عليك تغيير هذا إلى "Autosave \ Information" ، لأنه في المحطة الطرفية ليس لديك مساحة فارغة.

إذا كنت في مجلد المشروع ، فيمكننا تثبيت المكونات المصممة على شكل حزمة npm لمشروعك:

npm $ تثبيت مكونات النمط

ارجع إلى المحرر الخاص بك حيث قمت بفتح الملف Button.tsx وأضف إعلان الاستيراد التالي في الأعلى:

استيراد styled من "styled-components"

أنت يجب أن تعمل الآن مع المكونات على غرار. لكننا لم نعد أي عناصر أو تصميم. دعنا نذهب إلى الخطوة 3.

3. إعداد زر

دعنا نزيل في السطر 5 جميع عناصر CSS-Property لأننا نريد استبدالها بمكون مُصمم.

أضف علامة زر أساسية على شكل بعض أشكال التصميم:

const StyledButton = styled.button`
  الحشو: 20px.
  دائرة نصف قطرها الحدود: 10px ؛
  الحدود: 0 ؛
  حجم الخط: 2em ؛
`

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

استخدم StyledButton في طريقة تقديم المكون:

يجعل() {
  إرجاع  {this.props.text} 
}

يجب أن يبدو المكون الخاص بك الآن كما يلي:

استيراد * كرد فعل من "رد فعل"
استيراد {PropertyControls، ControlType} من "framer"
استيراد نصب من "المكونات على غرار"
const StyledButton = styled.button`
  الحشو: 20px.
  دائرة نصف قطرها الحدود: 10px ؛
  الحدود: 0 ؛ حجم الخط: 2em ؛
`
/ / حدد نوع العقار
واجهة الدعائم {
  سلسلة نصية؛
}
زر فئة التصدير يمتد React.Component  {
  // تعيين الخصائص الافتراضية
  defaultProps ثابت = {
    النص: "مرحبا العالم!"
  }
  // العناصر المعروضة في لوحة الممتلكات
  خاصية التحكم الثابتة: PropertyControls = {
    text: {type: ControlType.String، title: "Text"}،
  }
  يجعل() {
    إرجاع  {this.props.text} 
  }
}

4. إنشاء تباين الزر

دعنا نستخدم فوائد المكونات المصممة و Framer X. ماذا لدى كل نظام تصميم: نعم ، زر أساسي وثانوي.

دعونا نضيف بعض الاختلاف لزرنا.

const StyledButton = styled.button`
  الحشو: 20px.
  دائرة نصف قطرها الحدود: 10px ؛
  الحدود: 0 ؛
  حجم الخط: 2em ؛
  $ {props => props.primary && css`
    اللون الابيض؛
    لون الخلفية: أخضر.
  `}
  $ {props => props.secondary && css`
    اللون الابيض؛
    لون الخلفية: الأزرق.
  `}
`

المغلق غير موجود؟ لا تقلق ، فلنستورده من المكونات المصممة:

استيراد styled ، {css} من "styled-components"

استخدم الخاصية في المكون:

يجعل() {
  إرجاع  {this.props.text} 
}
// أو الثانوية
يجعل() {
  إرجاع  {this.props.text} 
}

5. إضافة الضوابط الملكية Framer X

تغيير الخاصية في التعليمات البرمجية غير مرغوب فيه بعض الشيء. دعونا نخلق إمكانية لتغيير نوع الزر في Framer X.

أضف خاصية جديدة ، على سبيل المثال "اكتب"

/ / حدد نوع العقار
واجهة الدعائم {
  سلسلة نصية؛
  النوع: سلسلة.
}

لنفترض أننا نريد زرًا أساسيًا افتراضيًا:

// تعيين الخصائص الافتراضية
defaultProps ثابت = {
  النص: "مرحبا العالم!" ،
  النوع: "أساسي" ،
}

إضافة عنصر تحكم خاصية جديد لاختيار نوع لدينا. نحن نستخدم ControlType.Enum لتحقيق هدفنا:

// العناصر المعروضة في لوحة الممتلكات
خاصية التحكم الثابتة: PropertyControls = {
  النص: {
     نوع: نوع Control.String ،
     العنوان: "نص"
   }،
  اكتب: {
     نوع: نوع التحكم.
    العنوان: "النوع" ،
    خيارات: ['الأساسي' ، 'الثانوي'] ،
    optionTitles: ['الزر الأساسي' ، 'الزر الثانوي']
   }،
}

إذا ذهبت إلى Framer X ، فسترى خيارًا محددًا لنوع الزر.

لكن ، حسنًا ، لا شيء يتغير ، عندما وصلنا إلى الاختيار. لهذا السبب لم نستخدم خاصية النوع في مكوننا.

علينا أن نغير قليلا رمز. أولاً ، نريد نقل الملكية إلى مكون التصميم.

يجعل() {
  إرجاع (
    
      {this.props.text}
    
  )
}

في StyledButton لدينا ، يمكننا الآن أن نقرر بناءً على "type" أي تصميم للزر الذي نريد تحميله:

$ {props => props.type == 'primary' && css`
  اللون الابيض؛
  لون الخلفية: أخضر.
`}
$ {props => props.type == 'secondary' && css`
  اللون الابيض؛
  لون الخلفية: الأزرق.
`}

مبروك! جربه في Framer X!

لديك الآن فهم أساسي للغاية لكيفية دمج مكتبة الجزء الثالث في Framer X وكيفية إنشاء مكون أساسي مع الاختلافات.

شكرا للقراءة! أنا سيمون فرانزين ، المؤسس المشارك لبرنامج zauberware. لا تتردد في التواصل معي عبر تويتر.

يمكنك العثور على المصادر النهائية لهذا الكيفية في gist: https://gist.github.com/simonfranzen/f46ff1a8b24356f6729d11a6ca8b968b