कार्ड या डायलॉग बॉक्स के स्ट्रक्चर को फ़ॉर्मैट करना

इस पेज पर बताया गया है कि कार्ड या डायलॉग मैसेज में विजेट को फ़ॉर्मैट और स्ट्रक्चर कैसे करें.

कार्ड बिल्डर से कार्ड डिज़ाइन करें और उनकी झलक देखें.

कार्ड बिल्डर खोलें

ज़रूरी शर्तें

  • Google Workspace खाता, जिसमें Google Chat का ऐक्सेस हो.
  • पब्लिश किया गया Chat ऐप्लिकेशन. Chat ऐप्लिकेशन बनाने के लिए, इस quickstart को अपनाएं.

    • कॉलम में कार्ड और डायलॉग दिखाएं

    columns विजेट, किसी कार्ड या डायलॉग में ज़्यादा से ज़्यादा दो कॉलम दिखाता है. हर कॉलम में विजेट जोड़े जा सकते हैं. विजेट, तय किए गए क्रम में दिखते हैं. दो से ज़्यादा कॉलम शामिल करने या लाइनों का इस्तेमाल करने के लिए, grid विजेट का इस्तेमाल करें.

    हर कॉलम की ऊंचाई, लंबे कॉलम की मदद से तय होती है. उदाहरण के लिए, अगर पहला कॉलम, दूसरे कॉलम से लंबा है, तो दोनों कॉलम में पहले कॉलम की ऊंचाई होगी. हर कॉलम में अलग-अलग संख्या में विजेट हो सकते हैं. इसलिए, न तो पंक्तियां तय की जा सकती हैं और न ही कॉलम के बीच विजेट को अलाइन किया जा सकता है.

    इस उदाहरण में, columns विजेट वाला कार्ड दिखाया गया है, जिसमें टेक्स्ट के दो कॉलम हैं. सिर्फ़ कॉलम लेआउट देखने और कोड सैंपल को छोटा करने के लिए, छोटा करें पर क्लिक करें. जब स्पेस सीमित होता है, जैसा कि नीचे दिए गए उदाहरण में दिखाया गया है, तो दूसरा कॉलम पहले कॉलम के नीचे रैप होता है.

    कॉलम की चौड़ाई तय करना

    कॉलम साथ-साथ दिखते हैं. horizontalSizeStyle फ़ील्ड का इस्तेमाल करके, हर कॉलम की चौड़ाई को पसंद के मुताबिक बनाया जा सकता है. अगर उपयोगकर्ता की स्क्रीन की चौड़ाई बहुत कम है, तो दूसरा कॉलम पहले कॉलम के नीचे दिखेगा:

    • वेब पर, स्क्रीन की चौड़ाई 480 पिक्सल से कम या उसके बराबर होने पर, दूसरा कॉलम रैप हो जाता है.
    • iOS डिवाइस पर, अगर स्क्रीन की चौड़ाई 300 पॉइंट से कम या उसके बराबर है, तो दूसरे कॉलम को रैप किया जाता है.
    • Android डिवाइस पर, अगर स्क्रीन की चौड़ाई 320 dp से कम या उसके बराबर है, तो दूसरे कॉलम को रैप किया जाता है.

    इस उदाहरण में, columns विजेट के साथ एक कार्ड दिखाया गया है. इसमें टेक्स्ट के दो कॉलम दिखाए गए हैं और कॉलम में चार आइटम हैं. कॉलम के हर आइटम में horizontalSizeStyle लागू किया गया है, ताकि यह बदलाव किया जा सके कि हर कॉलम में टेक्स्ट कितनी जगह भरता है:

    • पहले टेक्स्ट पैराग्राफ़ में, कार्ड की चौड़ाई का 30% से ज़्यादा हिस्सा न भरने के लिए, FILL_MINIMUM_SPACE का इस्तेमाल किया जाता है.
    • दूसरे टेक्स्ट पैराग्राफ़ में, कार्ड की चौड़ाई में उपलब्ध जगह को भरने के लिए, FILL_AVAILABLE_SPACE का इस्तेमाल किया जाता है. इस उदाहरण में, यह कार्ड की चौड़ाई का 70% हिस्सा भरता है.
    • तीसरा टेक्स्ट पैराग्राफ़ horizontalSizeStyle के बारे में नहीं बताता है. इसलिए, यह डिफ़ॉल्ट रूप से कार्ड के स्पेस में खाली जगह भरता है.
    • चौथे टेक्स्ट पैराग्राफ़ में, कार्ड की चौड़ाई का 30% से ज़्यादा हिस्सा न भरने के लिए, FILL_MINIMUM_SPACE का इस्तेमाल किया जाता है.

    कॉलम का हॉरिज़ॉन्टल अलाइनमेंट तय करना

    horizontalAligment फ़ील्ड तय करके, विजेट को कॉलम के बाएं, दाएं या बीच में हॉरिज़ॉन्टल तौर पर अलाइन किया जा सकता है. अगर horizontalAlignment शुरू होने की जानकारी नहीं दी गई है, तो विजेट, कॉलम में बाईं ओर अलाइन किए जाते हैं.

    नीचे दिया गया उदाहरण, कॉलम में टेक्स्ट को बाईं ओर हॉरिज़ॉन्टल तौर पर अलाइन करता है:

    नीचे दिया गया उदाहरण, टेक्स्ट को बीच में कॉलम में हॉरिज़ॉन्टल तौर पर अलाइन करता है:

    नीचे दिया गया उदाहरण, कॉलम में टेक्स्ट को दाईं ओर हॉरिज़ॉन्टल तौर पर अलाइन करता है:

    कॉलम का वर्टिकल अलाइनमेंट तय करना

    verticalAlignment फ़ील्ड तय करके, विजेट को कॉलम के ऊपर, नीचे या बीच में वर्टिकल तौर पर अलाइन किया जा सकता है. अगर verticalAlignment फ़ील्ड के बारे में जानकारी नहीं है, तो कॉलम में मौजूद विजेट, सबसे ऊपर अलाइन हो जाते हैं.

    नीचे दिया गया उदाहरण, कॉलम में टेक्स्ट को सबसे ऊपर की ओर अलाइन करता है:

    नीचे दिया गया उदाहरण, टेक्स्ट को बीच में एक कॉलम में वर्टिकल तौर पर अलाइन करता है:

    नीचे दिया गया उदाहरण, सबसे नीचे वाले कॉलम में टेक्स्ट को वर्टिकल तौर पर अलाइन करता है:

    विजेट के बीच हॉरिज़ॉन्टल डिवाइडर जोड़ना

    divider विजेट, वर्टिकल स्टैक किए गए विजेट के बीच कार्ड की चौड़ाई को दिखाता है. लाइन एक विज़ुअल डिवाइडर है. इससे उपयोगकर्ताओं को एक विजेट और दूसरे विजेट के बीच अंतर करने में मदद मिलती है. इससे कार्ड को स्कैन करना और समझना आसान हो जाता है.

    नीचे दिया गया कार्ड, जिसमें दूसरे तरह के विजेट के बीच divider विजेट होता है:

    आइटम के संग्रह के साथ एक ग्रिड दिखाएं

    grid विजेट, आइटम के कलेक्शन वाला एक ग्रिड दिखाता है. ग्रिड में, कितने भी कॉलम और आइटम हो सकते हैं. पंक्तियों की संख्या, आइटम को कॉलम से भाग देकर तय की जाती है. 10 आइटम और 2 कॉलम वाले ग्रिड में 5 पंक्तियां होती हैं. 11 आइटम और 2 कॉलम वाले ग्रिड में 6 पंक्तियां होती हैं.

    विजेट सुझावों पर काम करता है. इनसे उपयोगकर्ताओं को एक जैसा डेटा डालने और बदलाव पर कार्रवाइयां करने में मदद मिलती है. ये कार्रवाइयां Actions, टेक्स्ट इनपुट फ़ील्ड में कोई बदलाव होने पर चलती हैं. जैसे, उपयोगकर्ता को टेक्स्ट जोड़ना या मिटाना.

    नीचे दिए गए उदाहरण में, एक आइटम वाली दो कॉलम वाली ग्रिड है:

    तय करें कि ग्रिड में इमेज के साथ टेक्स्ट कहां दिखेगा

    gridItemLayout फ़ील्ड की मदद से, हर gridItem में यह तय किया जा सकता है कि ग्रिड में आइटम के ऊपर या नीचे टेक्स्ट दिखे या नहीं. अगर gridItemLayout तय नहीं है, तो डिफ़ॉल्ट रूप से टेक्स्ट, ग्रिड में आइटम के नीचे दिखता है

    नीचे दिए गए उदाहरण में तीन कॉलम वाला ग्रिड है, जिसमें टेक्स्ट और हर ग्रिड में एक इमेज है. पहला ग्रिड, इमेज के ऊपर दिखने वाले टेक्स्ट के बारे में बताता है. दूसरा ग्रिड, इमेज के नीचे दिखने वाले टेक्स्ट के बारे में बताता है. तीसरा ग्रिड, टेक्स्ट की जगह तय नहीं करता है.

    यूज़र इंटरफ़ेस (यूआई) एलिमेंट में बॉर्डर जोड़ना

    column या grid विजेट में दिखने वाले आइटम के लिए, borderType फ़ील्ड और borderStyle फ़ील्ड तय करके, इन यूज़र इंटरफ़ेस (यूआई) एलिमेंट में बॉर्डर जोड़ा जा सकता है. अगर कोई borderStyle फ़ील्ड तय नहीं है, तो डिफ़ॉल्ट रूप से कोई बॉर्डर नहीं दिखता है. विजेट में मौजूद सभी आइटम पर लागू करने के लिए, borderType तय किया जा सकता है या विजेट में मौजूद हर आइटम पर स्टाइल लागू की जा सकती है.

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

    नीचे दिए गए उदाहरण में तीन कॉलम वाली एक ग्रिड है, जिसके हर ग्रिड में एक इमेज है और बॉर्डर की शैली और प्रकार अलग-अलग तय किया गया है. पहली इमेज में बॉर्डर STROKE होता है. दूसरी इमेज में एक बॉर्डर है, जिसे NO_BORDER के तौर पर दिखाया गया है. तीसरी इमेज में कोई बॉर्डर तय नहीं किया गया है.

    समस्या हल करें

    जब Google Chat ऐप्लिकेशन या कार्ड में गड़बड़ी दिखती है, तो Chat इंटरफ़ेस पर "कुछ गड़बड़ी हुई" या "आपके अनुरोध को प्रोसेस नहीं किया जा सका" मैसेज दिखता है. कभी-कभी Chat के यूज़र इंटरफ़ेस (यूआई) में गड़बड़ी का कोई मैसेज नहीं दिखता, लेकिन Chat ऐप्लिकेशन या कार्ड से अनचाहा नतीजा मिलता है. उदाहरण के लिए, हो सकता है कि कार्ड मैसेज न दिखे.

    हो सकता है कि Chat के यूज़र इंटरफ़ेस (यूआई) में गड़बड़ी का मैसेज न दिखे. हालांकि, चैट ऐप्लिकेशन में गड़बड़ी को लॉग करने की सुविधा चालू होने पर, गड़बड़ियों को ठीक करने के लिए, उनके बारे में जानकारी देने वाले मैसेज और लॉग डेटा उपलब्ध होते हैं. गड़बड़ियों को देखने, डीबग करने, और ठीक करने में मदद पाने के लिए, Google Chat की गड़बड़ियों को ठीक करना और उन्हें हल करना लेख पढ़ें.