इस पेज में बताया गया है कि कॉम्पोनेंट और स्ट्रक्चर कैसे तैयार किए जाते हैं card. कार्ड का इस्तेमाल उपयोगकर्ता करता है ऐसे इंटरफ़ेस जिनका इस्तेमाल Google Chat ऐप्लिकेशन, प्रज़ेंट और इकट्ठा करने के लिए कर सकते हैं Chat इस्तेमाल करने वाले लोगों से मिली जानकारी. चैट ऐप्लिकेशन बिल्ड कर सकते हैं और नीचे दिए गए इंटरफ़ेस में कार्ड दिखाएं:
- मैसेज जिनमें एक या एक से ज़्यादा कार्ड होते हैं.
- होम पेज, यह एक कार्ड है. यह सीधे तौर पर होम टैब से दिखता है Google Chat ऐप्लिकेशन का इस्तेमाल करके मैसेज भेजने के लिए किया जा सकता है.
- डायलॉग: इसमें खुलने वाले कार्ड होते हैं किसी नए विंडो में मैसेज और होम पेज से.
इस पेज में, कार्ड के इन कॉम्पोनेंट के बारे में बताया गया है:
- हेडर, जिनमें आम तौर पर किसी कार्ड या कार्ड का टाइटल होता है सेक्शन में जाएं.
- सेक्शन, जो मुख्य भाग बनाते हैं इसमें विजेट और इंटरैक्टिव एलिमेंट शामिल हैं. कार्ड में सेक्शन में, कार्ड में कॉलम और ग्रिड के साथ ज़्यादा स्ट्रक्चर जोड़ा जा सकता है.
- फ़िक्स किए गए फ़ुटर, जो सबसे नीचे दिखते हैं लगातार यूज़र इंटरफ़ेस (यूआई) एलिमेंट दिखाने के लिए डायलॉग बॉक्स.
ज़रूरी शर्तें
Google Chat ऐप्लिकेशन, जिसमें इंटरैक्टिव सुविधाएं चालू हैं. बनाने के लिए इंटरैक्टिव चैट ऐप्लिकेशन. इनमें से किसी एक क्विकस्टार्ट के आधार पर उसे पूरा करें का इस्तेमाल करें जिसका इस्तेमाल करना है:
- Google Cloud Functions के साथ एचटीटीपी सेवा
- Google Apps स्क्रिप् ट
- Google Cloud Dialogflow CX
- Google Cloud Pub/Sub
कार्ड बिल्डर का इस्तेमाल करके, चैट ऐप्लिकेशन के लिए मैसेज सेवा और यूज़र इंटरफ़ेस को डिज़ाइन करें और उसकी झलक देखें:
कार्ड बिल्डर खोलेंहेडर जोड़ें
CardHeader विजेट
कार्ड के हेडर को दिखाता है. हेडर में
आपके कार्ड के लिए टाइटल, सबटाइटल, और अवतार इमेज.
यहां CardHeader का उदाहरण दिया गया है:
कार्ड में एक या उससे ज़्यादा सेक्शन जोड़ें
CardSection विजेट
कार्ड में एक हाई-लेवल कंटेनर होता है. आप कार्ड का इस्तेमाल करते हैं
सेक्शन पर क्लिक करें. हर कार्ड सेक्शन के लिए,
एक हेडर और एक या ज़्यादा विजेट होते हैं.
यहां CardSection का उदाहरण दिया गया है, जिसमें दो textParagraph हैं
विजेट:
विजेट के बीच हॉरिज़ॉन्टल डिवाइडर जोड़ना
कॉन्टेंट बनाने
divider विजेट
कार्ड की चौड़ाई में फैली हॉरिज़ॉन्टल लाइन दिखाता है
की सुविधा देता है. यह रेखा एक विज़ुअल डिवाइडर है, जो
उपयोगकर्ता एक विजेट और दूसरे विजेट के बीच अंतर करते हैं, जिससे कार्ड को स्कैन करना आसान हो जाता है
और समझें.
नीचे दिए गए कार्ड में अन्य तरह के विकल्पों के बीच divider विजेट शामिल है
विजेट:
कॉलम जोड़ें
कॉन्टेंट बनाने
columns विजेट
एक कार्ड में ज़्यादा से ज़्यादा दो कॉलम दिखाता है. आप ये चीज़ें जोड़ सकते हैं
हर कॉलम पर ले जाने वाले विजेट; विजेट उसी क्रम में दिखते हैं जिस क्रम में वे बताया गया है.
दो से ज़्यादा कॉलम शामिल करने या पंक्तियां इस्तेमाल करने के लिए, grid विजेट का इस्तेमाल करें.
हर कॉलम की ऊंचाई, बड़े कॉलम के हिसाब से तय की जाती है. उदाहरण के लिए, अगर पहला कॉलम दूसरे कॉलम से लंबा है, दोनों कॉलम में ऊंचाई. क्योंकि हर कॉलम में एक अलग संख्या हो सकती है के विजेट हैं, तो आप पंक्तियों को परिभाषित नहीं कर सकते या विजेट को कॉलम के बीच अलाइन नहीं कर सकते.
इस उदाहरण में, columns विजेट वाला एक कार्ड दिखाया गया है, जिसमें ये सुविधाएं हैं
टेक्स्ट के दो कॉलम. सिर्फ़ कॉलम का लेआउट देखने और कोड को छोटा करने के लिए
सैंपल के तौर पर, छोटा करें पर क्लिक करें.
जब स्पेस सीमित होता है, जैसा कि इस उदाहरण में दिखाया गया है,
पहले कॉलम के नीचे दूसरा कॉलम आ जाता है.
कॉलम की चौड़ाई तय करें
कॉलम साथ-साथ दिखाए जाते हैं. हर कॉलम की चौड़ाई को अपनी पसंद के मुताबिक बनाया जा सकता है
इसका इस्तेमाल करके
horizontalSizeStyle फ़ील्ड.
अगर उपयोगकर्ता की स्क्रीन चौड़ाई बहुत कम है, तो दूसरा कॉलम
पहला:
- वेब पर, अगर स्क्रीन की चौड़ाई इससे कम या उसके बराबर है, तो दूसरा कॉलम रैप हो जाता है 480 पिक्सल.
- iOS डिवाइस पर, अगर स्क्रीन की चौड़ाई या से कम है, तो दूसरा कॉलम रैप होता है 300 पॉइंट के बराबर.
- Android डिवाइस पर, अगर स्क्रीन की चौड़ाई इससे कम है, तो दूसरा कॉलम रैप हो जाएगा या 320 dp के बराबर हो.
इस उदाहरण में, columns विजेट वाला एक कार्ड दिखाया गया है, जिसमें ये सुविधाएं हैं
टेक्स्ट के दो कॉलम, जिनमें चार आइटम हैं. कॉलम के हर आइटम में
टेक्स्ट में मौजूद स्टोरेज में बदलाव करने के लिए, horizontalSizeStyle का इस्तेमाल किया गया
हर कॉलम को भरता है:
- टेक्स्ट के पहले पैराग्राफ़ में
FILL_MINIMUM_SPACEका इस्तेमाल किया गया है, ताकि वह 30% से ज़्यादा न भर पाए साइज़, कार्ड की चौड़ाई के हिसाब से होता है. - दूसरे टेक्स्ट पैराग्राफ़ में
FILL_AVAILABLE_SPACEका इस्तेमाल किया गया है, ताकि उपलब्ध कार्ड की चौड़ाई में खाली जगह छोड़ें. इस उदाहरण में, यह कार्ड के 70% को भरता है चौड़ाई. - तीसरे टेक्स्ट का पैराग्राफ़
horizontalSizeStyleतय नहीं करता, इसलिए यह डिफ़ॉल्ट रूप से सेट होता है ताकि कार्ड की जगह में खाली जगह भर सकें. - टेक्स्ट के चौथे पैराग्राफ़ में
FILL_MINIMUM_SPACEका इस्तेमाल किया गया है, ताकि वह 30% से ज़्यादा न भर पाए साइज़, कार्ड की चौड़ाई के हिसाब से होता है.
कॉलम का हॉरिज़ॉन्टल अलाइनमेंट तय करना
विजेट को कॉलम के बाएं, दाएं या बीच में हॉरिज़ॉन्टल तौर पर अलाइन किया जा सकता है.
horizontalAligment फ़ील्ड.
अगर horizontalAlignment फ़ील्ड तय नहीं है, तो विजेट
कॉलम में बाईं ओर.
नीचे दिए गए उदाहरण में, टेक्स्ट को बाईं ओर के कॉलम में हॉरिज़ॉन्टल तौर पर अलाइन किया गया है:
नीचे दिए गए उदाहरण में, टेक्स्ट को बीच में एक कॉलम में हॉरिज़ॉन्टल तौर पर अलाइन किया गया है:
नीचे दिए गए उदाहरण में, टेक्स्ट को दाईं ओर के कॉलम में हॉरिज़ॉन्टल तौर पर अलाइन किया गया है:
कॉलम का वर्टिकल अलाइनमेंट तय करना
विजेट को कॉलम के ऊपर, नीचे या बीच में वर्टिकल तौर पर अलाइन किया जा सकता है.
verticalAlignment फ़ील्ड.
अगर verticalAlignment फ़ील्ड के बारे में कोई जानकारी नहीं है, तो कॉलम में मौजूद विजेट अलाइन होते हैं
को सबसे ऊपर ले जाना है.
इस उदाहरण में, एक कॉलम में टेक्स्ट को ऊपर की ओर वर्टिकल तरीके से अलाइन किया गया है:
इस उदाहरण में, टेक्स्ट को बीच में एक कॉलम में वर्टिकल तौर पर अलाइन किया गया है:
इस उदाहरण में, नीचे मौजूद कॉलम में टेक्स्ट को वर्टिकल तौर पर अलाइन किया गया है:
आइटम का संग्रह दिखाने के लिए ग्रिड जोड़ें
कॉन्टेंट बनाने
grid विजेट
आइटम के कलेक्शन के साथ ग्रिड दिखाता है. ग्रिड को कितनी भी संख्या में सेट किया जा सकता है
कॉलम और आइटम. पंक्तियों की संख्या, आइटम को कॉलम से भाग देकर तय की जाती है.
10 आइटम और 2 कॉलम वाले ग्रिड में 5 पंक्तियां होती हैं. 11 आइटम और 2 वाला ग्रिड
कॉलम में छह लाइनें होती हैं.
विजेट पर सुझाव काम करते हैं, जिससे उपयोगकर्ताओं को एक जैसा डेटा डालने में मदद मिलती है और
ऑन-चेंज ऐक्शन, जो
Actions
ये तब काम करते हैं, जब टेक्स्ट इनपुट फ़ील्ड में कोई बदलाव होता है. जैसे:
टेक्स्ट मिटा रहा है.
यहां दिए गए उदाहरण में, एक आइटम के साथ दो कॉलम वाला ग्रिड दिखाया गया है:
ग्रिड में इमेज के साथ टेक्स्ट कहां दिखे, यह तय करने के लिए
gridItemLayout फ़ील्ड.
इस फ़ील्ड की मदद से, यह तय किया जा सकता है कि टेक्स्ट ऊपर दिखे या नीचे
ग्रिड में मौजूद आइटम. अगर gridItemLayout तय नहीं है, तो टेक्स्ट डिफ़ॉल्ट रूप से इस पर सेट होता है
ग्रिड में आइटम के नीचे दिखते हैं.
नीचे दिए गए उदाहरण में टेक्स्ट और एक इमेज के साथ तीन कॉलम वाला ग्रिड है डालें. पहला ग्रिड, इमेज के ऊपर दिखने वाले टेक्स्ट को परिभाषित करता है. इसके बाद, दूसरा ग्रिड ग्रिड, इमेज के नीचे दिखने वाले टेक्स्ट को तय करता है और तीसरा ग्रिड, टेक्स्ट के बारे में नहीं बताता टेक्स्ट की जगह.
ग्रिड या कॉलम में बॉर्डर जोड़ना
column या grid विजेट में दिखने वाले आइटम के लिए, बॉर्डर जोड़ा जा सकता है
ये यूज़र इंटरफ़ेस (यूआई) एलिमेंट
borderType फ़ील्ड
और एक
borderStyle फ़ील्ड.
अगर कोई borderStyle फ़ील्ड तय नहीं किया गया है, तो वह डिफ़ॉल्ट रूप से कोई बॉर्डर नहीं दिखाता. आप
विजेट के सभी आइटम पर लागू करने के लिए borderType तय करें या शैली लागू करें
विजेट में मौजूद हर आइटम को लिंक करता है.
नीचे दिए गए उदाहरण में, दो कॉलम का ग्रिड है. हर ग्रिड में इमेज मौजूद है बॉर्डर प्रकार, शैली, और रंग को ग्रिड.
नीचे दिए गए उदाहरण में, तीन कॉलम वाले ग्रिड के हर ग्रिड में एक इमेज है और
बॉर्डर शैली और प्रकार अलग-अलग परिभाषित किया गया है. पहला
इमेज में बॉर्डर STROKE के रूप में बताया गया है. दूसरी इमेज के बॉर्डर को इस तरह परिभाषित किया गया है
NO_BORDER. तीसरी चित्र का कोई बॉर्डर परिभाषित नहीं है.
स्थायी फ़ुटर जोड़ें
CardFixedFooter
विजेट एक ऐसे डायलॉग मैसेज का फ़ुटर दिखाता है जो इसके ज़रिए भेजा गया है
एक चैट ऐप्लिकेशन.
फ़ुटर में मुख्य बटन और दूसरा बटन शामिल किया जा सकता है.
CardFixedFooter विजेट सिर्फ़ इनके लिए उपलब्ध है
डायलॉग.
यहां दो बटन वाले CardFixedFooter विजेट का उदाहरण दिया गया है:
समस्या हल करें
जब Google Chat ऐप्लिकेशन या card कोई गड़बड़ी दिखाता है, Chat के इंटरफ़ेस पर, "कोई गड़बड़ी हुई" मैसेज दिखता है. या "आपका अनुरोध प्रोसेस नहीं किया जा सका." कभी-कभी Chat यूज़र इंटरफ़ेस (यूआई) गड़बड़ी का कोई मैसेज नहीं दिखाता है. हालांकि, Chat ऐप्लिकेशन या कार्ड से कोई अनचाहा नतीजा मिलता है; उदाहरण के लिए, कार्ड मैसेज शायद दिखाना चाहते हैं.
हालांकि, Chat के यूज़र इंटरफ़ेस (यूआई) में गड़बड़ी का मैसेज शायद न दिखे, गड़बड़ी ठीक करने में आपकी मदद करने के लिए, जानकारी देने वाले गड़बड़ी के मैसेज और लॉग डेटा उपलब्ध है जब चैट ऐप्लिकेशन के लिए गड़बड़ी लॉग करने की सेटिंग चालू हो. मदद के लिए, डीबग करने और गड़बड़ियां ठीक करने के लिए, देखें Google Chat से जुड़ी गड़बड़ियां हल करना और गड़बड़ियां ठीक करना.