Class Columns

Columnsวิดเจ็ตจะแสดงได้สูงสุด 2 คอลัมน์ในการ์ดหรือกล่องโต้ตอบ คุณเพิ่มวิดเจ็ตไปยังColumnแต่ละรายการได้ โดยวิดเจ็ตจะปรากฏตามลำดับที่ระบุ ดูตัวอย่างในแอป Google Chat ได้ที่คอลัมน์

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

คอลัมน์จะแสดงแบบเคียงข้างกัน คุณปรับแต่งความกว้างของแต่ละคอลัมน์ได้โดยใช้ช่อง HorizontalSizeStyle หากความกว้างของหน้าจอผู้ใช้แคบเกินไป คอลัมน์ที่ 2 จะ ขึ้นบรรทัดใหม่ใต้คอลัมน์แรก

• ในเว็บ คอลัมน์ที่ 2 จะตัดข้อความหากความกว้างของหน้าจอน้อยกว่าหรือเท่ากับ 480 พิกเซล
• ในอุปกรณ์ iOS คอลัมน์ที่ 2 จะขึ้นบรรทัดใหม่หากความกว้างของหน้าจอน้อยกว่าหรือเท่ากับ 300 pt
• ในอุปกรณ์ Android คอลัมน์ที่ 2 จะตัดข้อความหากความกว้างของหน้าจอน้อยกว่าหรือเท่ากับ 320 dp

พร้อมใช้งานสำหรับแอป Google Chat และส่วนเสริมของ Google Workspace UI ของส่วนเสริมที่รองรับคอลัมน์มีดังนี้

• กล่องโต้ตอบที่แสดงเมื่อผู้ใช้เปิดส่วนเสริมจากฉบับร่างอีเมล
• กล่องโต้ตอบที่แสดงเมื่อผู้ใช้เปิดส่วนเสริมจากเมนูเพิ่มไฟล์แนบในกิจกรรม Google ปฏิทิน

  // Build a column that is aligned in the center and fills the space:
  const column =
      CardService.newColumn()
          .setHorizontalSizeStyle(
              CardService.HorizontalSizeStyle.FILL_AVAILABLE_SPACE)
          .setHorizontalAlignment(CardService.HorizontalAlignment.CENTER)
          .setVerticalAlignment(CardService.VerticalAlignment.CENTER);
  const columns = CardService.newColumns().addColumn(column).setWrapStyle(
      CardService.WrapStyle.WRAP);