একটি কার্ড বা ডায়ালগের গঠন ফর্ম্যাট করুন

এই পৃষ্ঠাটি ব্যাখ্যা করে কিভাবে একটি কার্ড বা ডায়ালগ বার্তায় উইজেটগুলিকে বিন্যাস এবং গঠন করতে হয়।

চ্যাট অ্যাপের জন্য JSON কার্ড মেসেজ ডিজাইন ও প্রিভিউ করতে কার্ড বিল্ডার ব্যবহার করুন:

কার্ড বিল্ডার খুলুন

পূর্বশর্ত

  • Google Chat- এ অ্যাক্সেস সহ একটি Google Workspace অ্যাকাউন্ট ।
  • একটি প্রকাশিত চ্যাট অ্যাপ। একটি চ্যাট অ্যাপ তৈরি করতে, এই কুইকস্টার্টটি অনুসরণ করুন।

    • কলামে কার্ড এবং ডায়ালগ প্রদর্শন করুন

    columns উইজেট একটি কার্ড বা ডায়ালগে 2টি কলাম পর্যন্ত প্রদর্শন করে। আপনি প্রতিটি কলামে উইজেট যোগ করতে পারেন; উইজেটগুলি নির্দিষ্ট ক্রমে প্রদর্শিত হয়। 2টির বেশি কলাম অন্তর্ভুক্ত করতে, বা সারি ব্যবহার করতে, grid উইজেট ব্যবহার করুন।

    প্রতিটি কলামের উচ্চতা লম্বা কলাম দ্বারা নির্ধারিত হয়। উদাহরণস্বরূপ, যদি প্রথম কলামটি দ্বিতীয় কলামের চেয়ে লম্বা হয়, তবে উভয় কলামের উচ্চতা প্রথম কলামের। যেহেতু প্রতিটি কলামে আলাদা সংখ্যক উইজেট থাকতে পারে, আপনি সারি নির্ধারণ করতে পারবেন না বা কলামগুলির মধ্যে উইজেটগুলি সারিবদ্ধ করতে পারবেন না।

    নিম্নলিখিত উদাহরণটি একটি columns উইজেট সহ একটি কার্ড প্রদর্শন করে যা টেক্সটের 2 কলাম বৈশিষ্ট্যযুক্ত। শুধুমাত্র কলামের বিন্যাস দেখতে এবং কোড নমুনাটি সঙ্কুচিত করতে, Collapse এ ক্লিক করুন। যখন স্থান সীমাবদ্ধ থাকে, নিচের উদাহরণের মতো, দ্বিতীয় কলামটি প্রথম কলামের নীচে মোড়ানো হয়।

    একটি কলামের প্রস্থ নির্ধারণ করুন

    কলাম পাশাপাশি প্রদর্শিত হয়. আপনি horizontalSizeStyle ক্ষেত্র ব্যবহার করে প্রতিটি কলামের প্রস্থ কাস্টমাইজ করতে পারেন। যদি ব্যবহারকারীর স্ক্রীনের প্রস্থ খুব সংকীর্ণ হয়, দ্বিতীয় কলামটি প্রথমটির নীচে মোড়ানো হয়:

    • ওয়েবে, স্ক্রিনের প্রস্থ 480 পিক্সেলের কম বা সমান হলে দ্বিতীয় কলামটি মোড়ানো হয়।
    • iOS ডিভাইসে, স্ক্রিনের প্রস্থ 300 pt এর কম বা সমান হলে দ্বিতীয় কলামটি মোড়ানো হয়।
    • অ্যান্ড্রয়েড ডিভাইসে, স্ক্রিনের প্রস্থ 320 ডিপির কম বা সমান হলে দ্বিতীয় কলামটি মোড়ানো হয়।

    নিম্নলিখিত উদাহরণটি একটি columns উইজেট সহ একটি কার্ড প্রদর্শন করে যা কলামে 4টি আইটেম সহ 2 কলাম পাঠ্য বৈশিষ্ট্যযুক্ত। কলামের প্রতিটি আইটেমে 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 যা টেক্সট ইনপুট ক্ষেত্রের পরিবর্তন ঘটলে চালিত হয়, যেমন কোনও ব্যবহারকারী পাঠ্য যোগ করা বা মুছে ফেলা।

    নিম্নলিখিত উদাহরণ হল একটি একক আইটেম সহ 2 কলামের গ্রিড:

    একটি গ্রিডে একটি চিত্র সহ পাঠ্য কোথায় প্রদর্শিত হবে তা নির্ধারণ করুন

    gridItemLayout ক্ষেত্রটি আপনাকে প্রতিটি gridItem মধ্যে সংজ্ঞায়িত করতে দেয়, পাঠ্যটি গ্রিডের আইটেমের উপরে বা নীচে প্রদর্শিত হয় কিনা। gridItemLayout অনির্ধারিত হলে, পাঠ্যটি গ্রিডের আইটেমের নীচে প্রদর্শিত হবে

    নিম্নলিখিত উদাহরণটি প্রতিটি গ্রিডে পাঠ্য এবং একটি চিত্র সহ একটি 3 কলামের গ্রিড। প্রথম গ্রিড চিত্রের উপরে প্রদর্শিত পাঠ্যকে সংজ্ঞায়িত করে, দ্বিতীয় গ্রিডটি চিত্রের নীচে প্রদর্শিত পাঠ্যকে সংজ্ঞায়িত করে এবং তৃতীয় গ্রিড পাঠ্যের অবস্থান নির্ধারণ করে না।

    UI উপাদানগুলিতে একটি সীমানা যোগ করুন

    একটি column বা grid উইজেটে প্রদর্শিত আইটেমগুলির জন্য, আপনি একটি borderType ক্ষেত্র এবং একটি borderStyle ক্ষেত্র সংজ্ঞায়িত করে এই UI উপাদানগুলিতে একটি সীমানা যোগ করতে পারেন। যদি কোনো borderStyle ক্ষেত্র সংজ্ঞায়িত করা না থাকে, তাহলে এটি কোনো বর্ডার দেখানোর জন্য ডিফল্ট হয়। আপনি একটি উইজেটের মধ্যে সমস্ত আইটেম প্রয়োগ করার জন্য একটি borderType সংজ্ঞায়িত করতে পারেন বা একটি উইজেটের মধ্যে প্রতিটি পৃথক আইটেমে স্টাইলিং প্রয়োগ করতে পারেন।

    নিম্নলিখিত উদাহরণ হল একটি 2 কলামের গ্রিড যেখানে প্রতিটি গ্রিডে একটি চিত্র রয়েছে যেখানে বর্ডার টাইপ, শৈলী এবং রঙকে গ্রিডের মধ্যে থাকা সমস্ত আইটেমগুলিতে প্রয়োগ করার জন্য সংজ্ঞায়িত করা হয়েছে।

    নিম্নলিখিত উদাহরণ হল একটি 3 কলামের গ্রিড যার প্রতিটি গ্রিডে একটি ছবি রয়েছে এবং বর্ডার শৈলী এবং প্রকার পৃথকভাবে সংজ্ঞায়িত করা হয়েছে। প্রথম চিত্রটিতে একটি সীমানা রয়েছে যা STROKE হিসাবে সংজ্ঞায়িত করা হয়েছে। দ্বিতীয় চিত্রটিতে NO_BORDER হিসাবে সংজ্ঞায়িত একটি সীমানা রয়েছে। তৃতীয় চিত্রটির কোনো সীমানা নেই।

    সমস্যা সমাধান

    যখন একটি Google চ্যাট অ্যাপ বা কার্ড একটি ত্রুটি ফেরত দেয়, তখন চ্যাট ইন্টারফেস "কিছু ভুল হয়েছে" বলে একটি বার্তা দেখায়। অথবা "আপনার অনুরোধ প্রক্রিয়া করতে অক্ষম।" কখনও কখনও চ্যাট UI কোনও ত্রুটি বার্তা প্রদর্শন করে না, তবে চ্যাট অ্যাপ বা কার্ড একটি অপ্রত্যাশিত ফলাফল তৈরি করে; উদাহরণস্বরূপ, একটি কার্ড বার্তা প্রদর্শিত নাও হতে পারে৷

    যদিও একটি ত্রুটি বার্তা চ্যাট UI-তে প্রদর্শিত নাও হতে পারে, বর্ণনামূলক ত্রুটি বার্তা এবং লগ ডেটা উপলব্ধ রয়েছে যাতে আপনি যখন চ্যাট অ্যাপগুলির জন্য ত্রুটি লগিং চালু থাকে তখন ত্রুটিগুলি ঠিক করতে সহায়তা করে৷ দেখা, ডিবাগিং এবং ত্রুটিগুলি সংশোধন করতে সহায়তার জন্য, Google Chat ত্রুটিগুলি সমস্যা সমাধান এবং ঠিক করুন দেখুন৷