Class Columns

열

Columns 위젯은 카드 또는 대화상자에 최대 2개의 열을 표시합니다. 각 Column에 위젯을 추가할 수 있습니다. 위젯은 지정된 순서대로 표시됩니다. Google Chat 앱의 예는 열을 참고하세요.

각 열의 높이는 더 높은 열에 따라 결정됩니다. 예를 들어 첫 번째 열이 두 번째 열보다 높으면 두 열 모두 첫 번째 열의 높이를 갖습니다. 각 열에 서로 다른 수의 위젯이 포함될 수 있으므로 행을 정의하거나 열 간에 위젯을 정렬할 수 없습니다.

열이 나란히 표시됩니다. HorizontalSizeStyle 필드를 사용하여 각 열의 너비를 맞춤설정할 수 있습니다. 사용자의 화면 너비가 너무 좁으면 두 번째 열이 첫 번째 열 아래로 래핑됩니다.

• 웹에서는 화면 너비가 480픽셀 이하인 경우 두 번째 열이 줄바꿈됩니다.
• iOS 기기에서는 화면 너비가 300pt 이하인 경우 두 번째 열이 줄바꿈됩니다.
• Android 기기에서 화면 너비가 320dp 이하이면 두 번째 열이 줄바꿈됩니다.

Google Chat 앱 및 Google Workspace 부가기능에서 사용할 수 있습니다. 열을 지원하는 부가기능 UI는 다음과 같습니다.

• 사용자가 이메일 초안에서 부가기능을 열 때 표시되는 대화상자입니다.
• 사용자가 Google Calendar 일정의 첨부파일 추가 메뉴에서 부가기능을 열 때 표시되는 대화상자입니다.

  // 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);

메서드

메서드	반환 유형	간략한 설명
addColumn(column)	Columns	열 위젯에 Column를 추가합니다.
setWrapStyle(wrapStyle)	Columns	열의 줄바꿈 스타일을 설정하고 화면 너비에 따라 열 크기가 조절되는 방식을 제어합니다.

자세한 문서

addColumn(column)

열 위젯에 Column를 추가합니다. 열은 추가된 순서대로 표시됩니다. 열은 최대 2개까지 추가할 수 있습니다.

const columns = CardService.newColumns().addColumn(CardService.newColumn());

매개변수

이름	유형	설명
column	Column	Columns 위젯에 추가할 하위 열입니다.

리턴

Columns: 연결을 위한 객체입니다.

---

setWrapStyle(wrapStyle)

열의 줄바꿈 스타일을 설정하고 화면 너비에 따라 열 크기가 조절되는 방식을 제어합니다.

const columns = CardService.newColumns()
                    .addColumn(CardService.newColumn())
                    .setWrapStyle(CardService.WrapStyle.WRAP);

매개변수

이름	유형	설명
wrapStyle	WrapStyle	열에 설정할 줄바꿈 스타일입니다.

리턴

Columns: 연결을 위한 객체입니다.