React MDL Merges להגיב עם חומר עיצוב לייט

גוגל לאחרונה הוציאה ספריה בשם חומר עיצוב לייט שהוא משאב Frontend עבור מפתחים. זה באופן אוטומטי סגנונות כל אתר באמצעות הנחיות עיצוב החומר עם CSS שנבנו מראש JS.

זוהי מסגרת פופולרי עבור פרויקטים dev פשוטה. React MDL משלב את המסגרת של Google עם ספריית React כדי ליצור משאב Frontend מעוגל.

עיצוב החומר של גוגל הוא בבירור העתיד של UI / UX בעולם של Google. ועם חומר עיצוב לייט זה יותר קל מאשר אי פעם ליישם את התכונות הללו על גבי כל אתר אינטרנט עם ספריית קוד פתוח קנייני.

React הוא גם רחוק ביותר JS Frontend הקדמי מסגרת המשמש רכיבי להציג Frontend. בעזרת React MDL תוכל למזג רכיבים אלה של React עם ספריית MDL כדי לקבל תצוגה מפורטת כמו שתמצא בתיעוד המקוון של Google.

הנה דוגמה תבנית המאמר, כך שאתה יכול לקבל תחושה של איך זה נראה.

דף זה אינו מכיל רכיבים רבים של React, אך הוא מדגים את האסתטיקה של עיצוב החומר. תוכלו למצוא פעולה רבה יותר על הדגמה זו שנבנתה באמצעות רכיבי React.

אתה יכול למעשה למצוא מידע נוסף על חומר עיצוב לייט על ריפו GitHub אם אתה סקרן ללמוד יותר. משם ניתן להוריד את CSS גלם ו- JS ליישם לתוך הדף שלך אשר תומך באופן אוטומטי את כל הדפדפנים המודרניים ואת השפלה חיננית.

למרבה הצער מאז React MDL הוא עדיין די חדש זה אין תמיכה מלאה עבור כל הרכיבים.

אבל אתה יכול לראות רשימה מלאה כאן, כולל הדגמות קטנות עבור כל אחד. זה כולל גם פיסות קוד המקור שאתה יכול להעתיק / להדביק לתוך הפרויקטים שלך לפי הצורך.

אני אעשה לא מומלץ ללמוד מחדש את MDL עד שתרגיש נוח עם שתי הספריות.

חבילת עיצוב חומרים לייט הוא די פשוט להתחיל אבל התגובה היא הרבה יותר מורכבת.

כדי ללמוד עוד על MDL בדוק את דף השאלות הנפוצות באתר הרשמי שלהם. הוא מציע טיפים על איפה להשתמש MDL, אילו תכונות הוא מציע, וכיצד הוא יכול להתאים לתוך workdev טיפוסי.

אבל בכנות גם אם אתה לא מבין תגובה היטב אתה עדיין יכול להסתדר עם כל הדגימות בדף הרכיבים. לדוגמה, לדף הטקסט יש שדות טקסט פועלים באמצעות עיצוב חומר, אך עם קטעי קוד React.

אתה מוזמן לשחק מסביב ולראות מה אתה יכול לבנות. שתי הספריות הן לגמרי בחינם וקוד פתוח לכל הפרויקטים, בין אם אישיים או מסחריים.

אתה יכול למצוא יותר מדף GITHUB תגובה MDL אם אתה רוצה ללמוד את המקור לצלול פנימה.