Google पॉलिमर - यह वेब ऐप्स किस तरह से बदलेंगे इसका निर्माण किया गया है

तथा यूआई प्लेयर बनाने वाले तत्व गुप्त रूप से नियंत्रित करते हैं.

आज, वेब घटकों के साथ, हम अपने तत्वों को भी नाम दे सकते हैं। हम जैसे तत्व का निर्माण कर सकते हैं, एक ट्विटर फ़ीड या (शायद) एम्बेड करने के लिए एक चार्ट एम्बेड करने के लिए.

इसके अलावा, इन कस्टम तत्वों में स्वीकृत कस्टम विशेषताओं के एक जोड़े भी हो सकते हैं। के संबंध में तत्व, आप नामक एक विशेषता निर्धारित करते हैं उपयोगकर्ता नाम जिसका उपयोग Twitter उपयोगकर्ता नाम निर्दिष्ट करने के लिए किया जाएगा.

पॉलिमर में कस्टम तत्व

पॉलिमर तत्वों का एक समूह है जो हर वेब एप्लिकेशन की आवश्यकता (लगभग) के लिए आता है। Google इन तत्वों को समूहों में विभाजित करता है: लौह तत्व, कागज तत्व, Google वेब घटक, स्वर्ण तत्व, नियॉन तत्व, प्लेटिनम तत्व और अणु तत्व.

1. लौह तत्व

लौह तत्व मूल तत्वों का एक संग्रह है। ये मूल तत्व वे हैं जो हम सामान्य रूप से उपयोग करते हैं एक वेब पेज बनाएँ जैसे इनपुट, फॉर्म और इमेज। अंतर यह है कि पॉलिमर इन तत्वों में कुछ अतिरिक्त शक्तियाँ जोड़ता है.

इस समूह के सभी तत्व हैं लोहा- उपसर्ग, उदाहरण के लिए , जिसका उपयोग छवि प्रदर्शित करने के लिए किया जाता है। तत्व कुछ अतिरिक्त विशेषताओं से सुसज्जित है जिन्हें हम नियमित रूप से लागू नहीं कर सकते हैं तत्व। हम, उदाहरण के लिए, जोड़ सकते हैं प्रीलोड, मुरझाना, तथा प्लेसहोल्डर विशेषताएं:

उपरोक्त उदाहरण पहले छवि प्लेसहोल्डर को दिखाएगा और फिर वास्तविक छवि में फीका हो जाएगा src क्योंकि यह पूरी तरह से भरी हुई है, एक चिकनी छवि लोडिंग प्रभाव का प्रदर्शन.

2. पेपर एलिमेंट्स

कागज के तत्व सामग्री डिजाइन तत्वों का एक समूह है। मटेरियल डिज़ाइन, Google डिज़ाइन भाषा है, जो यूजर प्लेटफ़ॉर्म और अनुभव को Google प्लेटफ़ॉर्म पर बनाने के लिए वेब और एंड्रॉइड दोनों ऐप को अधिक नेत्रहीन रूप से सुसंगत बनाती है। कुछ तत्व जो सामग्री डिजाइन के लिए अद्वितीय हैं वे कागज और फ्लोटिंग एक्शन बटन (FAB) हैं.

कागज़

कागज़ के लिए Google का रूपक है वह माध्यम जो सामग्री को रेखांकित करता है. पॉलिमर के साथ एक पेपर जोड़ने के लिए, हम इसका उपयोग करते हैं तत्व। यह तत्व 2 गुण लेता है:

• ऊंचाई कागज उठाने के लिए, इसलिए ऊंचाई को सुदृढ़ करने के लिए एक छाया जोड़ना
• एनिमेटेड कागजी उन्नयन के रूप में एनीमेशन लागू करेगा.

फ्लोटिंग एक्शन बटन (FAB)

फ्लोटिंग एक्शन बटन (एफएबी) एक आइकन वाला एक गोलाकार बटन है, जो स्क्रीन पर तैरता है, आमतौर पर एक स्टैंड-आउट रंग के साथ। Google सुझाव देता है कि यह बटन बार-बार पहुँचा जाने वाला कार्य करता है। यहाँ एक उदाहरण है:

निम्न कोड स्निपेट एक छवि और एक FAB के साथ एक पेपर सामग्री जोड़ता है.

हम निम्नलिखित परिणाम होगा:

हमारे पास एक फोटो है “दिल” इसके ऊपर बटन तैर रहा है। इसे क्लिक करें फोटो की तरह, बटन को स्वीकार करने के लिए बटन पर क्लिक करने से रिप्ले प्रभाव दिखाई देता है.

• पेपर डेमो देखें

3. Google वेब घटक

Google वेब घटक कुछ विशेष तत्व हैं जो Google API और Google मैप्स, Youtube, और साथ ही Google फ़ीड जैसी सेवाओं का सामना करते हैं, कुछ का नाम। इस समूह में तत्व Google सेवाओं के साथ कुछ ही दूरी पर बातचीत करें.

निम्नलिखित Google मानचित्र का उपयोग करके दिखाने के लिए एक उदाहरण है तत्त्व.

  यह Googleplex है  

जैसा कि आप ऊपर, कर सकते हैं तत्व लेता है अक्षांश तथा देशान्तर मानचित्र पर स्थान निर्दिष्ट करने के लिए। हम घोंसला भी बना सकते हैं एक पाठ के साथ उस स्थान का एक मानचित्र मार्कर दिखाने के लिए जो मार्कर पर क्लिक करने पर दिखाई देगा.

• नक्शा डेमो देखें

एक Youtube वीडियो दिखाना चाहते हैं? आप उपयोग कर सकते हैं तत्त्व.

इसी प्रकार हम आउटपुट को विशेषताओं के माध्यम से अनुकूलित करते हैं.

• Youtube डेमो देखें

4. स्वर्ण तत्व

गोल्ड एलिमेंट्स हैं ई-कॉमर्स ऐप्स के लिए विशेष रूप से डिज़ाइन किए गए तत्व. यहां आपको क्रेडिट कार्ड, ईमेल, ईमेल और जिप इनपुट दिखाने के लिए तत्व मिलेंगे जो सभी से सुसज्जित हैं प्रारूप सत्यापन सही डेटा इनपुट और सुरक्षा सुनिश्चित करने के लिए। यहां वीज़ा क्रेडिट कार्ड इनपुट जोड़ने का एक उदाहरण है.

5. अन्य तत्व

शेष तत्वों में एनीमेशन और विशेष प्रभावों के लिए नियॉन तत्व, ऑफ़लाइन के लिए प्लेटिनम तत्व और पुश सूचनाएँ और अंतिम रूप से अणु, तीसरे पक्ष के पुस्तकालयों के लिए रैपर शामिल हैं।.

संपादक की टिप्पणी: इस लेखन के समय, नियॉन एलीमेंट्स, प्लेटिनम एलिमेंट्स और अणु अभी भी उपलब्ध नहीं हैं.

पॉलिमर का घालमेल

अपने वेब विकास में पॉलिमर का उपयोग करना चाहते हैं? यहां बताया गया है कि इसे अपने वेब पृष्ठों में कैसे स्थापित और एकीकृत किया जाए। जैसा कि अधिकांश पॉलिमर तत्व एक दूसरे पर भरोसा करते हैं, पॉलिमर को स्थापित करने का सबसे अच्छा तरीका बोवर के माध्यम से है.

बोवर एक परियोजना निर्भरता प्रबंधक है जो परियोजना को चलाने के लिए आवश्यक स्क्रिप्ट या शैलियों को स्थापित करना आसान बनाता है। बावर के साथ आसानी से वेब लाइब्रेरी को स्थापित, अद्यतन और हटाने के बारे में हमारी पिछली पोस्ट देखें.

पॉलिमर को एकीकृत करने के लिए, टर्मिनल लॉन्च करें फिर अपनी परियोजना निर्देशिका में नेविगेट करें, यह मानते हुए कि आपने एक बनाया है। फिर भागो धौंकनी init अपने प्रोजेक्ट में bower.json फ़ाइल आरंभ करने के लिए कमांड करें, जिसका उपयोग प्रोजेक्ट निर्भरता को रिकॉर्ड करने के लिए किया जाएगा। Bower.json खोलें और निम्नलिखित पंक्तियाँ जोड़ें.

 "निर्भरताएं": "बहुलक": "पॉलिमर / बहुलक # ^ 1.0.0", "Google-वेब-घटक": "GoogleWebCompenders / google-web-Components # ^ 1.0.0", "लौह-तत्व": " पोलीमराइल्स / लौह-तत्व # ^ 1.0.0 "," पेपर-एलिमेंट्स ":" पॉलिमर एलीमेंट्स / पेपर-एलीमेंट्स # ^ 1.0.0 "," गोल्ड-एलिमेंट्स ":" पॉलिमर एलीमेंट्स / गोल्ड-एलिमेंट्स # ^ 1.0.0 " 

यह सेटअप मानता है कि हम प्रत्येक समूह से सभी तत्वों का उपयोग करने जा रहे हैं। आप निर्भरता सूची से आपको क्या जरूरत नहीं है हटा सकते हैं। जैसा कि निर्भरताएं निर्धारित की जाती हैं, चलाएं बोवर इंस्टॉल सूची पर निर्भरता स्थापित करने के लिए कमांड.

इस प्रक्रिया में कुछ समय लग सकता है क्योंकि इसमें रिपॉजिटरी से बड़ी मात्रा में फाइल हथियाना शामिल है। एक बार हो जाने के बाद, आपको उन्हें इसमें सहेज कर रखना चाहिए bower_components फ़ोल्डर.

उस HTML फ़ाइल को खोलें जिसमें आप पॉलिमर घटकों का उपयोग करना चाहते हैं। दस्तावेज़ के भीतर, WebCompords.js लिंक करें कौन सा polyfill उन ब्राउज़रों के लिए जो अभी तक WebCompords का समर्थन नहीं करते हैं, और घटक फ़ाइलों को आयात करें HTML आयात का उपयोग करना.

यहाँ एक उदाहरण है:

यह सेटअप हमें उपयोग करने में सक्षम करेगा , , तत्वों.

शोकेस

यहां कुछ ऐसे वेब ऐप हैं जो पहले से ही Google पॉलिमर का उपयोग कर रहे हैं.

गूगल

Google ने Google IO 2015 वेब पेज में Google पॉलिमर का उपयोग किया; Google Fi, साझेदारी में वाहक और विक्रेताओं के लिए Google वायरलेस सेवा; और Google संगीत.

कस्टम तत्व

CustomElements एक हब है जहां आप वेब अवयवों के साथ निर्मित कस्टम तत्व पा सकते हैं। यह सूची को समाहित करने और बनाने के लिए पेपर तत्व का उपयोग करता है। यह बोवर और एनपीएम के माध्यम से इन तत्वों को स्थापित करने के लिए एक सुविधाजनक मार्ग भी प्रदान करता है.

क्रोम देव संपादक

कोड संपादन के लिए एक क्रोम एप्लिकेशन जो आश्चर्यजनक रूप से अच्छी तरह से काम करता है। यह ऐप यूजर इंटरफेस में FAB बटन, पेपर मेन्यू और पेपर डायलॉग एलिमेंट्स का इस्तेमाल करता है.

पॉलिमर डिजाइनर

ड्रैग-एंड-ड्रॉप इंटरफ़ेस का उपयोग करके पॉलिमर तत्वों के साथ वेब एप्लिकेशन बनाने का एक उपकरण.

दैनिक स्टॉक पूर्वानुमान

एक स्टॉक एक्सचेंज रिपोर्ट और पूर्वानुमान पूरी तरह से पॉलिमर तत्वों के साथ बनाया गया है.

पॉलिमर मेल

जीमेल के लिए एक ईमेल क्लाइंट ऐप। यह अच्छा और तरल दिखता है, हालांकि दुख की बात है कि यह पूरी तरह से काम नहीं कर रहा है.

अंतिम विचार

पॉलिमर में एक बहुत बड़ा स्कोप होता है और आपको सभी कस्टम तत्वों के साथ-साथ इसके एपीआई की भी आदत पड़ने में थोड़ा समय लग सकता है। बहरहाल, वेब कंपोनेंट्स और पॉलिमर निश्चित रूप से वेब एप्लिकेशन बनाने के तरीके को प्रभावित करेंगे। वेब घटकों के बारे में अधिक पढ़कर भीड़ से आगे रहें - संदर्भ नीचे पाए जाते हैं.

• डेमो देखें
• स्रोत डाउनलोड करें

उपयोगी संदर्भ

• वेब घटकों की स्थिति
• कस्टम तत्वों के लिए एक विस्तृत परिचय
• Google पॉलिमर का आधिकारिक ब्लॉग