เพิ่มข้อความและรูปภาพลงในการ์ด

หน้านี้อธิบายวิธีเพิ่มและจัดรูปแบบข้อความและรูปภาพลงในการ์ด

ดูข้อมูลเพิ่มเติมเกี่ยวกับการสร้างการ์ดได้ที่ สร้างการ์ดสำหรับแอป Google Chat

ใช้เครื่องมือสร้างการ์ดเพื่อออกแบบและแสดงตัวอย่างข้อความการ์ด JSON สำหรับแอป Chat ดังนี้

เปิดเครื่องมือสร้างการ์ด

ข้อกำหนดเบื้องต้น

แอป Google Chat ที่เปิดใช้ฟีเจอร์แบบอินเทอร์แอกทีฟ วิธีสร้าง แอป Chat แบบอินเทอร์แอกทีฟ ทำตามการเริ่มต้นใช้งานอย่างรวดเร็วต่อไปนี้ เกี่ยวกับสถาปัตยกรรมแอปที่คุณต้องการใช้

เพิ่มรูปภาพหรือไอคอน

ส่วนนี้จะอธิบายวิธีเพิ่มองค์ประกอบภาพลงในการ์ด เช่น รูปภาพ คอมโพเนนต์ภาพ และไอคอนต่างๆ

เพิ่มรูปภาพ

วิดเจ็ต Image แสดงรูปภาพ PNG หรือ JPG ที่โฮสต์บน HTTPS URL ความกว้างของรูปภาพที่แสดงจะแสดงเต็มความกว้างทั้งหมดของการ์ดที่แสดง และ ความสูงของรูปภาพจะปรับเพื่อคงอัตราส่วนของรูปภาพ วิดเจ็ต Image รองรับ การดำเนินการ onclick รายการ ที่เกิดขึ้นเมื่อผู้ใช้คลิกรูปภาพ ตัวอย่างการดำเนินการ onclick รายการ

  • เปิดไฮเปอร์ลิงก์ด้วย OpenLink เช่น ไฮเปอร์ลิงก์ไปยังเอกสารประกอบสำหรับนักพัฒนาแอป Google Chat https://developers.google.com/chat
  • เรียกใช้ การดำเนินการ ที่เรียกใช้ฟังก์ชันที่กำหนดเอง เช่น การเรียก API

วิดเจ็ต Image มีข้อจำกัดดังต่อไปนี้

  • ระบบรองรับเฉพาะรูปภาพประเภท PNG และ JPG เท่านั้น
  • URL โฮสต์ต้องเป็น HTTPS
  • ขนาดรูปภาพสูงสุดที่แนะนำคือ 2 MB เพื่อให้การ์ดมีประสิทธิภาพ

ต่อไปนี้คือการ์ดที่ประกอบด้วยวิดเจ็ต Image โดยจะแสดง รูปภาพหน้า Landing Page ในเอกสารประกอบสําหรับนักพัฒนาแอป Google Chat เมื่อผู้ใช้คลิก image, เอกสารประกอบสําหรับนักพัฒนาซอฟต์แวร์ Google Chat จะเปิดขึ้นในแท็บใหม่

เพิ่มคอมโพเนนต์รูปภาพ

วิดเจ็ต Image เป็นรูปภาพที่มีการจัดรูปแบบที่จำกัด CANNOT TRANSLATE วิดเจ็ต imageCompent ช่วยให้คุณใช้ cropStyle และ borderStyle กับรูปภาพได้

ตัวอย่างต่อไปนี้แสดง 2 ภาพในตารางกริด โดยหนึ่งในภาพคือ ครอบตัดแล้ว:

คุณสามารถปรับรูปร่างของคอมโพเนนต์รูปภาพได้โดยใช้ cropStyle ภาพหนึ่งมีรูปร่างต่างๆ ดังนี้

  • ใช้ SQUARE เพื่อครอบตัดสี่เหลี่ยมจัตุรัส
  • ใช้ CIRCLE เพื่อครอบตัดวงกลม
  • ใช้ RECTANGLE_CUSTOM เพื่อครอบตัดรูปสี่เหลี่ยมผืนผ้าด้วยแง่มุมที่กำหนดเอง เช่น คุณสามารถใช้ RECTANGLE_4_3 เพื่อครอบตัดรูปสี่เหลี่ยมผืนผ้า ในอัตราส่วน 4:3

ตัวอย่างต่อไปนี้แสดงภาพ 5 ภาพในตารางกริดที่มี cropStyle ที่แตกต่างกัน ใช้กับรูปภาพแต่ละรูป ดังนี้

เพิ่มไอคอน

วิดเจ็ต Icon แสดงถึง ในตัว หรือ กำหนดเอง ไอคอน คุณสามารถเพิ่มไอคอนในการ์ดเพื่อดำเนินการต่อไปนี้ได้

  • แสดงไอคอนแบบสแตนด์อโลน
  • แสดงไอคอนด้านหน้าข้อความที่เกี่ยวข้อง เป็นส่วนหนึ่งของ วิดเจ็ต DecoratedText
  • แสดงไอคอนเป็นปุ่มอินเทอร์แอกทีฟ เป็นส่วนหนึ่งของ วิดเจ็ต ButtonList

ต่อไปนี้คือการ์ดที่ประกอบด้วยคอมโพเนนต์ Icon ซึ่งมีไอคอนในตัว

ตารางต่อไปนี้แสดงไอคอนในตัวที่พร้อมใช้งานสำหรับข้อความการ์ด

เครื่องบิน บุ๊กมาร์ก
รถประจำทาง CAR
นาฬิกา CONFIRMATION_NUMBER_ICON
คำอธิบาย ดอลลาร์
อีเมล EVENT_SEAT
FLIGHT_ARRIVAL FLIGHT_DEPARTURE
โรงแรม HOTEL_ROOM_TYPE
เชิญ MAP_PIN
การเป็นสมาชิก MULTIPLE_PEOPLE
บุคคล โทรศัพท์
RESTAURANT_ICON SHOPPING_CART
STAR ร้านค้า
ตั๋ว รถไฟ
VIDEO_CAMERA VIDEO_PLAY

เพิ่มข้อความลงในการ์ด

ส่วนนี้จะอธิบายวิธีการเพิ่มและจัดรูปแบบข้อความในการ์ด

เพิ่มย่อหน้าจากข้อความที่จัดรูปแบบ

วิดเจ็ต TextParagraph แสดงข้อความย่อหน้าที่มีการจัดรูปแบบ HTML ซึ่งไม่บังคับ เมื่อตั้งค่า เนื้อหาข้อความของวิดเจ็ตเหล่านี้ ก็แค่ใส่แท็ก HTML ที่เกี่ยวข้องไว้ด้วย สำหรับข้อมูลเพิ่มเติมเกี่ยวกับแท็ก HTML ที่สนับสนุน โปรดดู จัดรูปแบบข้อความที่ปรากฏในการ์ด

ตัวอย่างรูปแบบต่อไปนี้ใช้ได้กับข้อความย่อหน้า

  • แสดงข้อความตัวหนา ขีดเส้นใต้ หรือตัวเอียงด้วย HTML <b>, <u>, <i> แท็กทั้งหมด.
  • ลิงก์ไปยังเว็บไซต์ด้วย HTML <a href="https://www.google.com">hyperlinks</a>
  • เพิ่มสีด้วย HTML <font color="#ea9999">font tags</font>

วิดเจ็ต TextParagraph แต่ละรายการจะแสดงผลเป็นย่อหน้าใหม่ และนึกขึ้นได้ว่า คล้ายกับแท็ก HTML <p>

ต่อไปนี้คือการ์ดที่ประกอบด้วยวิดเจ็ต TextParagraph 2 วิดเจ็ตที่ใช้เพื่อ แสดงย่อหน้าสองย่อหน้าด้วยการจัดรูปแบบ HTML แบบง่าย:

เพิ่มย่อหน้าข้อความที่ยุบได้

ย่อหน้าข้อความแบบยุบได้ช่วยให้ผู้ใช้ดูข้อมูลเพิ่มเติมได้ตามความต้องการ วิดเจ็ตนี้เหมาะอย่างยิ่งสำหรับการนำเสนอเนื้อหายาวๆ หรือให้รายละเอียดเพิ่มเติม สามารถสำรวจได้เมื่อเลือกแล้ว ซึ่งเป็นการสร้างผู้ใช้แบบไดนามิกและอินเทอร์แอกทีฟ ประสบการณ์การใช้งาน

ข้อความที่แสดงพร้อมองค์ประกอบตกแต่ง

วิดเจ็ต DecoratedText แสดงข้อความด้วยรูปแบบและความสามารถที่ไม่บังคับ เช่น

  • แสดง icon ด้านหน้าข้อความด้วย startIcon
  • แสดงชื่อหน้าข้อความด้วย topLabel
  • เพิ่มปุ่มที่คลิกได้ด้วย button หรือเปิดปุ่มสลับได้ด้วย switchControl

ใช้วิดเจ็ต DecoratedText เมื่อต้องการนำเสนอข้อมูลใน ง่ายต่อการใช้งานและมีการโต้ตอบ วิดเจ็ตนี้เหมาะอย่างยิ่งสำหรับการใช้งานในกรณีต่างๆ เช่น การ์ดติดต่อ การอัปเดตสถานะการสั่งซื้อ และการแจ้งเตือนตั๋วงาน

วิดเจ็ต DecoratedText รองรับการจัดรูปแบบข้อความ HTML แบบง่าย เมื่อตั้งค่า เนื้อหาข้อความของวิดเจ็ตเหล่านี้ ก็แค่ใส่แท็ก HTML ที่เกี่ยวข้องไว้ด้วย สำหรับ ข้อมูลเพิ่มเติมเกี่ยวกับแท็ก HTML ที่รองรับ โปรดดู การจัดรูปแบบข้อความในการ์ด

ต่อไปนี้คือการ์ดที่ประกอบด้วยวิดเจ็ต DecoratedText ที่ใช้แสดง ข้อมูลติดต่อ เช่น อีเมล สถานะออนไลน์ หมายเลขโทรศัพท์ และ เว็บไซต์:

แก้ปัญหา

เมื่อแอป Google Chat หรือ card จะแสดงผลข้อผิดพลาด อินเทอร์เฟซ Chat แสดงข้อความว่า "เกิดข้อผิดพลาด" หรือ "ไม่สามารถดำเนินการตามคำขอของคุณ" บางครั้ง UI ของ Chat ไม่แสดงข้อความแสดงข้อผิดพลาดใดๆ แต่แอป Chat หรือ ทำให้เกิดผลลัพธ์ที่ไม่คาดคิด เช่น ข้อความในการ์ดอาจ ปรากฏขึ้น

แม้ว่าข้อความแสดงข้อผิดพลาดอาจไม่แสดงใน UI ของแชท มีข้อความแสดงข้อผิดพลาดและข้อมูลบันทึกที่สื่อความหมายเพื่อช่วยคุณแก้ไขข้อผิดพลาด เมื่อมีการเปิดข้อผิดพลาดในการบันทึกสำหรับแอป Chat หากต้องการความช่วยเหลือในการดู การแก้ไขข้อบกพร่องและการแก้ไขข้อผิดพลาด โปรดดู แก้ปัญหาข้อผิดพลาดของ Google Chat