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