גוגל פולימר - איך זה יהיה לשנות את הדרך יישומי אינטרנט בנויים

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

היום, עם רכיבי אינטרנט, אנחנו יכולים שם אלמנטים שלנו גם כן. אנחנו יכולים לבנות אלמנט כמו, כדי להטביע עדכון Twitter או (אולי) כדי להטביע תרשים.

יתר על כן, אלמנטים מותאמים אישית אלה עשויים להיות גם כמה תכונות מותאמות אישית מקובלים. לגבי אלמנט, אתה מגדיר תכונה הנקראת שם משתמש אשר ישמשו כדי לציין את שם המשתמש של Twitter.

אלמנטים מותאמים אישית פולימר

פולימר מגיע עם חבורה של אלמנטים אשר מהווים (כמעט) כל יישום אינטרנט צריך. גוגל מחלקת את המרכיבים האלה לקבוצות: אלמנטים של ברזל, אלמנטים של נייר, רכיבי אינטרנט של Google, אלמנטים של זהב, אלמנטים של ניאון, אלמנטים פלטינומיים ומולקולות.

1. אלמנטים ברזל

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

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

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

2. אלמנטים של נייר

ה אלמנטים של נייר היא קבוצה של אלמנטים עיצוב חומרים. עיצוב חומרים הוא שפת התכנון של Google כדי להפוך את ממשק המשתמש ואת הניסיון בכל הפלטפורמות של Google, הן ביישומי האינטרנט והן ביישומי Android, באופן עקבי יותר מבחינה ויזואלית. כמה אלמנטים ייחודיים לעיצוב חומרים הם Paper and Floating Button Button (FAB).

עיתון

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

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

לחצן פעולה צף (FAB)

לחצן פעולה צף (FAB) הוא כפתור עגול עם סמל, צף על המסך, בדרך כלל עם צבע ההמתנה. Google מציעה שכפתור זה מבצע פונקציה בתדירות גבוהה. הנה דוגמה:

קטע הקוד הבא מוסיף חומר נייר עם תמונה ו- FAB.

תהיה לנו את התוצאה הבאה:

יש לנו תמונה עם “לב” כפתור צף על גבי זה. לחץ עליו כדי לראות את התמונה, הכפתור כפתור נותן אפקט אדווה כדי לאשר את לחץ.

• הצג את הדגמת הנייר

3. רכיבי אינטרנט של Google

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

להלן דוגמה להצגת מפת Google באמצעות אלמנט.

  זהו Googleplex  

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

• הצג את הדגמת המפה

רוצה להציג סרטון Youtube? אתה יכול להשתמש אלמנט.

כמו כן אנו להתאים אישית את הפלט באמצעות תכונות.

• הצג את ההדגמה של YouTube

4. אלמנטים זהב

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

5. אלמנטים אחרים

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

הערה של עורך: בזמן כתיבת שורות אלו, אלמנטים של ניאון, אלמנטים פלטינום ומולקולות עדיין אינם זמינים.

שילוב פולימרים

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

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

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

 - "פולימרים": "פולימר / פולימר # ^ 1.0.0", "google-web-components": "GoogleWebComponents / google-web-components # ^ 1.0.0", "iron-elements": " פולימרים / אלמנטים מברזל # ^ 1.0.0 "," אלמנטים של נייר ":" PolymerElements / paper- אלמנטים # ^ 1.0.0 "," אלמנטים זהב ":" PolymerElements / זהב אלמנטים # ^ 1.0.0 " 

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

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

פתח את קובץ ה- HTML שבו ברצונך להשתמש ברכיבי הפולימר. בתוך מסמך המסמך, לקשר את WebComponents.js שהוא מילוי עבור דפדפנים שאינם תומכים WebComponents עדיין, ו לייבא את הקבצים רכיב באמצעות ייבוא ​​HTML.

הנה דוגמה:

התקנה זו תאפשר לנו להשתמש , , אלמנטים.

תצוגות

הנה כמה מיישומי האינטרנט שכבר משתמשים ב- Google Polymer.

Google

Google השתמשו ב- Google Polymer בדף האינטרנט של Google IO 2015; Google Fi, השירות האלחוטי של Google עבור ספקים וספקים בשותפות; ו- Google Music.

אלמנטים מותאמים אישית

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

עורך הפיתוח של Chrome

יישום Chrome לעריכת קוד שפועל באופן מפתיע. יישום זה משתמש בלחצן FAB, בתפריט Paper (נייר) וברכיבים של Paper Dial בממשק המשתמש.

מעצב פולימרים

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

יומי יומי תחזית

דו"ח הבורסה ותחזית בנוי כולו עם אלמנטים פולימריים.

פולימר דואר

אפליקציית לקוח דוא"ל עבור Gmail. זה נראה נחמד ונוזל, אם כי למרבה הצער, זה לא מתפקדת במלואה.

סופי מחשבות

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

• הצג הדגמה
• הורד מקור

הפניות שימושי

• מדינת רכיבי האינטרנט
• מבוא מפורט אלמנטים מותאמים אישית
• הבלוג הרשמי של פולימר של גוגל