مرحبا يا هبر! في اليوم الآخر ، صادفت مقالًا ممتعًا للغاية باللغة البرتغالية. لحسن الحظ ، تمكنا من العثور على نسخته الإنجليزية. أوجه انتباهكم إلى الترجمة إلى اللغة الروسية. يمكنك العثور على ترجماتي الأخرى على صفحتي على Habr.
الرابط الأصلي:
البرتغالية والإنجليزيةبالنسبة لأولئك الذين ليسوا في هذا الموضوع. Styled-Components هي مكتبة شائعة جدًا بين مطوري React & Ract. انها تسمح لك لكتابة CSS مخصصة مباشرة في JS.
في Vue ، نعرف مدى ملاءمة العمل مع مكونات الملف الفردي (SFC) ، لأن كل المكونات الضرورية يتم جمعها في مكان واحد. زاد نمط SFC بشكل كبير من شعبية Vue.
خلال الأشهر القليلة الماضية أتيحت لي الفرصة للمشاركة في تطوير مشروع رئيسي على React. استخدمنا Styled-Components فيه ، وكانت تجربة مثيرة جدًا للاهتمام.
ومع ذلك ، في معظم مشاريعي ، أستخدم Vue ، لذلك من الطبيعي أن أرغب في الجمع بين الخبرة الجديدة مع Styled-Components وفوائد نظام Vue.js البيئي. بعد ذلك اكتشفت أن مثل هذا الحل موجود بالفعل ويدعمه نفس المبدعين مثل مكتبة مماثلة تحت React:
vue-styled-components .
بداية
ضع جانباً الثرثرة الفارغة وانتقل إلى الرمز. كالعادة ، استخدم الغزل أو npm.
// for yarn yarn add vue-styled-components // for npm npm install --save vue-styled-components
في
جيثب بلدي ستجد مستودع مع أمثلة لاستخدام هذه المكتبة.
كل عنصر يستخدم في الأمثلة يمكن معالجته بواسطة مكونات مصممة بطريقة vue كعنصر معزول بخصائصه الفردية أو عن طريق تلقي بيانات من مكونات أخرى.
مثالنا الأول هو مجرد زر مع الأنماط الافتراضية.
import styled from "vue-styled-components"; const CButton = styled.button` font-size: 1em; text-align: center; color: #FFFFFF; border-radius: 5px; padding: 10px 15px; background-color: #0057AA; `; export default CButton;
في أي مكان في تطبيقنا يمكننا استخدام هذا المكون.
import CButton from '@/components/elements/Button' export default { name: 'app', components: { CButton }, }
تمرير المعلمات
في مكونات vue-styled ، يمكنك تحديد أنماط أحد المكونات ديناميكيًا بتمرير هذه القيم عبر الخصائص. يوضح هذا المثال أنه عندما يتم تمرير السمة الرئيسية ، سيتلقى الزر نمطًا جديدًا للخط ولون الخلفية.
import styled from "vue-styled-components"; const typeButton = { primary: Boolean }; const CButtonProps = styled('button', typeButton)` font-size: 1em; text-align: center; color: ${props => props.primary ? '#0057AA' : '#FFFFFF'}; border-radius: 5px; padding: 10px 15px; background-color: ${props => props.primary ? '#FFFFFF' : '#0057AA'}; `; export default CButtonProps;
يمكن تحسين المثال أعلاه وحتى إضافة خصائص جديدة (يمكنك تمرير العديد من السمات التي تريدها). كل شيء يسير وفقًا لاحتياجاتك داخل المشروع.
بمساعدة هذه المكتبة ، سنحصل على فرصة لإدارة الأنماط من خلال المنطق. في المثال أدناه ، لديك الفرصة لاختيار نظام الألوان الذي تريد تعيينه لزرك دون التأثير على الآخرين ، وبالتالي تنويع التطبيق الخاص بك.
import styled from "vue-styled-components"; const typeButton = { type: String, radius: Boolean }; const styleButton = type => { switch (type) { case "primary": return ` background-color: #FFFFFF; color: #0057AA; `; case "error": return ` background-color: #B4000B; color: #FDFDFD; `; case "success": return ` background-color: #00C887; color: #37435F; `; default: return ` background-color: #0057AA; color: #FFFFFF; `; } } const CButtonPropsCond = styled('button', typeButton)` font-size: 1em; text-align: center; padding: 10px 15px; border-radius: ${({ radius }) => radius ? "6px" : null}; ${(props) => styleButton(props.type)} `; export default CButtonPropsCond;
لشرح عملية إنشاء هذا الزر بشكل أفضل: علينا أولاً (دائمًا) استيراد المكونات ذات النمط vue ، مباشرة (من السطر 3 إلى السطر 6) نحتاج إلى تحديد أنواع الخصائص التي سيتم تمريرها إلى المكون. من السطر 8 إلى 31 ، نقوم بإنشاء دالة تأخذ قيمة خاصية الكتابة ، وفقًا لما تم تمريره ، فإنها تُرجع سمات الخلفية. لون ولون السجل الخاص بهم ، إذا لم يتم تمرير أي شيء كخاصية ، فسيتم تعيين الزر للقيمة الافتراضية.
بفضل هذه المعرفة ، يمكنك تنفيذ سمات جديدة تجعل المكون المخصص لديك ديناميكيًا للغاية.
تركت هذه الأمثلة الصغيرة في GitHub الخاص بي حتى تتمكن من اتخاذ الخطوة الأولى في إتقان هذه المكتبة. استمتع بها.
رابط إلى مستودع مع أمثلة .