إنشاء مكون فعال مع نظام التصميم

يستخدم فريقنا المكونات ذات النمط لتصميم مكونات التفاعل.

هناك بالفعل مقالات عن مكونات على غرار Habré ، وبالتالي فإننا لن نتناول هذا بالتفصيل.

إدخال مكونات styled
أفضل وأسرع وأكثر قوة: v4 - مكونات على غرار

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

على سبيل المثال ، في العديد من المكونات كتبنا مثل هذا:

padding-top: ${props => props.paddingTop || '0'}; padding-bottom: ${props => props.paddingBottom || '0'}; padding-right: ${props => props.paddingRight || '0'}; padding-left: ${props => props.paddingLeft || '0'}; 

نظام التصميم

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

يوفر نظام Styled-System مجموعة من ميزات النمط. توفر كل دالة نمط مجموعة الخصائص الخاصة بها والتي تقوم عناصر النمط على أساس القيم المحددة في سمة التطبيق. يحتوي النظام المصمم على واجهة برمجة تطبيقات غنية مع وظائف لمعظم خصائص CSS.

مثال على نظام مصمم على أساس مكونات التصميم

 import { space, width, fontSize, color } from 'styled-system'; import styled, { ThemeProvider } from 'styled-components'; import theme from './theme'; const Box = styled.div` ${space} ${width} ${fontSize} ${color} `; render( <ThemeProvider theme={theme}> <Box p={3} bg="whites.10" color="orange"> This is a Box </Box> </ThemeProvider>, ); 

الفوائد الرئيسية

• يضيف الخصائص التي يمكنك استخدامها في السمات الخاصة بك.
• إعداد سريع تستجيب لحجم الخط والهامش والحشو والعرض وخصائص المغلق الأخرى عبر الدعائم
• قابلية الطباعة
• الهامش والتدرج الحشو
• دعم أي لوحة الألوان
• يعمل مع معظم مكتبات css-in-js ، بما في ذلك المكونات الأنيقة والعاطفة
• يستخدم من قبل Rebass و Rebass Grid و نظام تصميم Priceline

ربط المواضيع

أعلاه ، قدمت مثالاً على الكود يستخدم ThemeProvider. نقوم بتمرير موضوعنا إلى الموفر ، ويقوم النظام المصمم بالوصول إليه من خلال الدعائم.

مثال على موضوعنا

 export const theme = { /**   */ fontSizes: [ 12, 14, 16, 18, 24, 32, 36, 72, 96 ], /**    */ space: [ // margin and padding 0, 4, 8, 16, 32, 64, 128, 256 ], /**   */ colors: { UIClientError: '#ff6c00', UIServerError: '#ff0000', UITriggerRed: '#fe3d00', UITriggerBlue: '#00a9f6', UIModalFooterLightBlueGray: '#f3f9ff', UIModalTitleDefault: colorToRgba('#5e6670', 0.4), UICheckboxIconCopy: colorToRgba('#909cac', 0.2) }, /**   */ buttonSizes: { xs: ` height: 16px; padding: 0 16px; font-size: 10px; `, sm: ` height: 24px; padding: 0 24px; font-size: 13px; `, md: ` height: 34px; padding: 0 34px; font-size: 14px; letter-spacing: 0.4px; `, lg: ` height: 56px; padding: 0 56px; font-size: 20px; `, default: ` height: 24px; padding: 0 30px; font-size: 13px; `, }, /**   */ buttonColors: { green: ` background-color: #a2d628; color: ${colorToRgba('#a2d628', 0.5)}; `, blue: ` background-color: #507bfc; color: ${colorToRgba('#507bfc', 0.5)}; `, lightBlue: ` background-color: #10aee7; color: ${colorToRgba('#10aee7', 0.5)}; `, default: ` background-color: #cccccc; color: ${colorToRgba('#cccccc', 0.5)}; ` } } 

سيحاول النظام styled العثور على القيمة في كائن السمة استنادًا إلى الخصائص التي تم تمريرها للمكون. يتم دعم التعشيش العميق للخصائص ، إذا لم يتم العثور على القيمة المرسلة في الموضوع ، فسيتم تفسير القيمة كما هي.

على سبيل المثال ، تجاوزنا مكون اللون = "أحمر". لا توجد قيمة color.red في كائن الموضوع ، ولكن سيتم ترجمة القيمة الحمراء إلى css باللون الأحمر. لذلك بعد التحويل في المفتش سوف نرى

 color: red; 

أمثلة أخرى لاستخدام قيم الموضوع

 // font-size: 24px (theme.fontSizes[4]) <Box fontSize={4} /> // margin: 16px (theme.space[3]) <Box m={3} /> // color: #ff6c00 (theme.colors.UIClientError) <Box color="UIClientError" /> // background color (theme.colors.UITriggerBlue) <Box bg="UITriggerBlue" /> // width: 50% <Box width={1/2} /> 

أنماط استجابة

لوصف الخصائص سريعة الاستجابة ، مرر مجموعة من القيم

 <Box width={[ 1, // 100% below the smallest breakpoint 1/2, // 50% from the next breakpoint and up 1/4 // 25% from the next breakpoint and up ]} /> // responsive font size <Box fontSize={[ 1, 2, 3, 4 ]} /> // responsive margin <Box m={[ 1, 2, 3, 4 ]} /> // responsive padding <Box p={[ 1, 2, 3, 4 ]} /> 

المتغيرات

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

  /**   */ buttonSizes: { xs: ` height: 16px; padding: 0 16px; font-size: 10px; `, sm: ` height: 24px; padding: 0 24px; font-size: 13px; `, default: ` height: 24px; padding: 0 30px; font-size: 13px; `, }, /**   */ buttonColors: { green: ` background-color: #a2d628; color: ${colorToRgba('#a2d628', 0.5)}; `, blue: ` background-color: #507bfc; color: ${colorToRgba('#507bfc', 0.5)}; `, lightBlue: ` background-color: #10aee7; color: ${colorToRgba('#10aee7', 0.5)}; `, default: ` background-color: #cccccc; color: ${colorToRgba('#cccccc', 0.5)}; ` } 

تنفيذ الخيار:

 /**    */ export const buttonSize = variant({ /**   */ prop: 'size', /**  */ key: 'buttonSizes' }); /**    */ export const buttonColor = variant({ /**   */ prop: 'colors', /**  */ key: 'buttonColors' }); 

عنصر الزر

 /**   */ export const Button = styled(Box.withComponent('button'))` ${buttonSize} ${buttonColor} `; Button.propTypes = { ...buttonSize.propTypes, ...buttonColor.propTypes, } 

مثال على استخدام زر أزرق متوسط ​​الحجم

 <Button size="md" colors="blue" /> 

وصف أكثر تفصيلا وتوثيق نظام التصميم في المكتب. صفحة جيثب

محدث: أثناء كتابة مقال ، حصل النظام على صفحته الخاصة مع وثائق وأمثلة https://styled-system.com/ .