Cards v2

Zadbaj o dobrą organizację dzięki kolekcji Zapisuj i kategoryzuj treści zgodnie ze swoimi preferencjami.

Karta

Karty obsługują zdefiniowany układ, interaktywne elementy interfejsu (np. przyciski) i multimedialne (np. obrazy). Korzystaj z kart, aby prezentować szczegółowe informacje, zbierać informacje od użytkowników i pomagać im zrobić kolejny krok.

W Google Chat karty pojawiają się w kilku miejscach:

  • jako samodzielne wiadomości.
  • Dodatkowy tekst, tuż pod SMS-em.
  • Jako okno.

Ten przykładowy plik JSON tworzy „wizytówkę”, która zawiera:

  • Nagłówek z nazwą kontaktu, tytułem zlecenia, zdjęciem awatara.
  • Sekcja z informacjami kontaktowymi, w tym sformatowanym tekstem.
  • Przyciski, które użytkownicy mogą kliknąć, aby udostępnić kontakt lub wyświetlić więcej lub mniej informacji.

Przykładowa wizytówka 

{
  "cardsV2": [
    {
      "cardId": "unique-card-id",
      "card": {
        "header": {
          "title": "Sasha",
          "subtitle": "Software Engineer",
          "imageUrl":
          "https://developers.google.com/chat/images/quickstart-app-avatar.png",
          "imageType": "CIRCLE",
          "imageAltText": "Avatar for Sasha",
        },
        "sections": [
          {
            "header": "Contact Info",
            "collapsible": true,
            "uncollapsibleWidgetsCount": 1,
            "widgets": [
              {
                "decoratedText": {
                  "startIcon": {
                    "knownIcon": "EMAIL",
                  },
                  "text": "sasha@example.com",
                }
              },
              {
                "decoratedText": {
                  "startIcon": {
                    "knownIcon": "PERSON",
                  },
                  "text": "<font color=\"#80e27e\">Online</font>",
                },
              },
              {
                "decoratedText": {
                  "startIcon": {
                    "knownIcon": "PHONE",
                  },
                  "text": "+1 (555) 555-1234",
                }
              },
              {
                "buttonList": {
                  "buttons": [
                    {
                      "text": "Share",
                      "onClick": {
                        "openLink": {
                          "url": "https://example.com/share",
                        }
                      }
                    },
                    {
                      "text": "Edit",
                      "onClick": {
                        "action": {
                          "function": "goToView",
                          "parameters": [
                            {
                              "key": "viewType",
                              "value": "EDIT",
                            }
                          ],
                        }
                      }
                    },
                  ],
                }
              },
            ],
          },
        ],
      },
    }
  ],
}
Zapis JSON 
{
  "header": {
    object (CardHeader)
  },
  "sections": [
    {
      object (Section)
    }
  ],
  "cardActions": [
    {
      object (CardAction)
    }
  ],
  "name": string,
  "fixedFooter": {
    object (CardFixedFooter)
  },
  "displayStyle": enum (DisplayStyle),
  "peekCardHeader": {
    object (CardHeader)
  }
}
Pola
header

object ( CardHeader )

Nagłówek karty. Nagłówek zwykle zawiera obraz początkowy i tytuł. Nagłówki są zawsze wyświetlane u góry karty.

sections[]

object ( Section )

Zawiera kolekcję widżetów. Każda sekcja ma własny, opcjonalny nagłówek. Sekcje są wizualnie oddzielone linię podziału.

cardActions[]

object ( CardAction )

Działania karty. Czynności są dodawane do menu na karcie paska narzędzi.

Karty aplikacji Google Chat nie mają paska narzędzi, dlatego cardActions[] nie jest obsługiwany w tych aplikacjach.

Ten kod JSON tworzy na przykład menu czynności karty z opcjami Ustawienia i Prześlij opinię: 

"cardActions": [
  {
    "actionLabel": "Settings",
    "onClick": {
      "action": {
        "functionName": "goToView",
        "parameters": [
          {
            "key": "viewType",
            "value": "SETTING"
         }
        ],
        "loadIndicator": "LoadIndicator.SPINNER"
      }
    }
  },
  {
    "actionLabel": "Send Feedback",
    "onClick": {
      "openLink": {
        "url": "https://example.com/feedback"
      }
    }
  }
]
name

string

Nazwa karty. Używany jako identyfikator karty w nawigacji.

Aplikacje Google Chat nie obsługują nawigacji po karcie, dlatego to pole jest ignorowane.

displayStyle

enum ( DisplayStyle )

W dodatkach do Google Workspace ustawia właściwości wyświetlania zasobu peekCardHeader .

Nieobsługiwane w aplikacjach Google Chat.

peekCardHeader

object ( CardHeader )

Podczas wyświetlania treści kontekstowych nagłówek karty podglądu działa jako obiekt zastępczy, który umożliwia użytkownikowi przechodzenie między kartami na stronie głównej a kartami kontekstowymi.

Nieobsługiwane w aplikacjach Google Chat.

KartaNagłówek

Reprezentuje nagłówek karty.

Zapis JSON 
{
  "title": string,
  "subtitle": string,
  "imageType": enum (ImageType),
  "imageUrl": string,
  "imageAltText": string
}
Pola
title

string

Wymagany. Tytuł nagłówka karty. Nagłówek ma stałą wysokość. Jeśli podajesz zarówno tytuł, jak i podtytuł, każdy z nich zajmuje po jednym wierszu. Jeśli określony jest tylko tytuł, zajmuje on oba wiersze.

subtitle

string

Podtytuł nagłówka karty. Jeśli zostanie określony, wyświetli się w osobnym wierszu pod elementem title .

imageType

enum ( ImageType )

Kształt używany do przycinania obrazu.

imageUrl

string

Adres URL HTTPS obrazu w nagłówku karty.

imageAltText

string

Tekst zastępczy obrazu, który służy do ułatwień dostępu.

Typ obrazu

Kształt używany do przycinania obrazu.

Wartości w polu enum
SQUARE Wartość domyślna. Stosuje do maski kwadratowy. Na przykład obraz o wymiarach 4 x 3 stanie się 3 x 3.
CIRCLE Stosuje do maski okrągłą. Na przykład obraz o wymiarach 4 × 3 stanie się okręgiem o średnicy 3 s.

Sekcja

Sekcja zawiera zbiór widżetów renderowanych pionowo, w określonej przez Ciebie kolejności.

Zapis JSON 
{
  "header": string,
  "widgets": [
    {
      object (Widget)
    }
  ],
  "collapsible": boolean,
  "uncollapsibleWidgetsCount": integer
}
Pola
header

string

Tekst wyświetlany u góry sekcji. Obsługuje prosty tekst w formacie HTML.

widgets[]

object ( Widget )

Wszystkie widżety w sekcji. Musi zawierać co najmniej 1 widżet.

collapsible

boolean

Wskazuje, czy tę sekcję można zwijać.

Zwijane sekcje ukrywają niektóre lub wszystkie widżety, ale użytkownicy mogą rozwinąć tę sekcję, aby wyświetlić ukryte widżety. Aby to zrobić, kliknij Pokaż więcej. Użytkownicy mogą ponownie ukrywać widżety, klikając Pokaż mniej.

Aby określić, które widżety są ukryte, podaj uncollapsibleWidgetsCount .

uncollapsibleWidgetsCount

integer

Liczba widżetów, których nie można zwinąć, nawet jeśli sekcja jest zwinięta.

Jeśli na przykład sekcja zawiera 5 widżetów, a uncollapsibleWidgetsCount ma wartość 2 , pierwsze 2 widżety są zawsze wyświetlane, a pozostałe 3 domyślnie są zwinięte. Wartość uncollapsibleWidgetsCount jest uwzględniana tylko wtedy, gdy collapsible to true .

Widżet

Każda karta składa się z widżetów.

Widżet to obiekt złożony, który może reprezentować jeden z tekstów, obrazów, przycisków lub innych typów obiektów.

Zapis JSON 
{

  // Union field data can be only one of the following:
  "textParagraph": {
    object (TextParagraph)
  },
  "image": {
    object (Image)
  },
  "decoratedText": {
    object (DecoratedText)
  },
  "buttonList": {
    object (ButtonList)
  },
  "textInput": {
    object (TextInput)
  },
  "selectionInput": {
    object (SelectionInput)
  },
  "dateTimePicker": {
    object (DateTimePicker)
  },
  "divider": {
    object (Divider)
  },
  "grid": {
    object (Grid)
  }
  // End of list of possible types for union field data.
}
Pola
Pole sumy data . Widżet może zawierać tylko jeden z tych elementów. Aby wyświetlić więcej elementów, możesz użyć wielu pól widżetów. data może mieć tylko jedną z tych wartości:
textParagraph

object ( TextParagraph )

Wyświetla akapit tekstu. Obsługuje prosty tekst w formacie HTML.

Ten fragment kodu JSON tworzy pogrubiony tekst: 

"textParagraph": {
  "text": "  <b>bold text</b>"
}
image

object ( Image )

Wyświetla obraz.

Na przykład ten JSON tworzy obraz z alternatywnym tekstem: 

"image": {
  "imageUrl":
  "https://developers.google.com/chat/images/quickstart-app-avatar.png",
  "altText": "Chat app avatar"
}
decoratedText

object ( DecoratedText )

Wyświetla ozdobny element tekstowy.

Ten kod JSON tworzy na przykład ozdobny widżet tekstowy zawierający adres e-mail: 

"decoratedText": {
  "icon": {
    "knownIcon": "EMAIL"
  },
  "topLabel": "Email Address",
  "text": "sasha@example.com",
  "bottomLabel": "This is a new Email address!",
  "switchControl": {
    "name": "has_send_welcome_email_to_sasha",
    "selected": false,
    "controlType": "CHECKBOX"
  }
}
buttonList

object ( ButtonList )

Lista przycisków.

Na przykład ten kod JSON tworzy 2 przyciski. Pierwszy to niebieski przycisk tekstowy, a drugi to obraz, który otwiera link: 

"buttonList": {
  "buttons": [
    {
      "text": "Edit",
      "color": {
        "red": 0,
        "green": 0,
        "blue": 1,
        "alpha": 1
      },
      "disabled": true,
    },
    {
      "icon": {
        "knownIcon": "INVITE",
        "altText": "check calendar"
      },
      "onClick": {
        "openLink": {
          "url": "https://example.com/calendar"
        }
      }
    }
  ]
}
textInput

object ( TextInput )

Wyświetla pole tekstowe, w którym użytkownicy mogą pisać.

Na przykład ten kod JSON tworzy tekstowe pole do wpisania adresu e-mail: 

"textInput": {
  "name": "mailing_address",
  "label": "Mailing Address"
}

Oto inny przykład: 

"textInput": {
  "name": "preferred_programing_language",
  "label": "Preferred Language",
  "initialSuggestions": {
    "items": [
      {
        "text": "C++"
      },
      {
        "text": "Java"
      },
      {
        "text": "JavaScript"
      },
      {
        "text": "Python"
      }
    ]
  }
}
selectionInput

object ( SelectionInput )

Wyświetla element wyboru, który umożliwia użytkownikom wybieranie elementów. Do wyboru służą pola wyboru, przyciski, przełączniki i menu.

Ten kod JSON tworzy na przykład menu, które umożliwia użytkownikom wybór rozmiaru: 

"selectionInput": {
  "name": "size",
  "label": "Size"
  "type": "DROPDOWN",
  "items": [
    {
      "text": "S",
      "value": "small",
      "selected": false
    },
    {
      "text": "M",
      "value": "medium",
      "selected": true
    },
    {
      "text": "L",
      "value": "large",
      "selected": false
    },
    {
      "text": "XL",
      "value": "extra_large",
      "selected": false
    }
  ]
}
dateTimePicker

object ( DateTimePicker )

Wyświetla widżet wyboru/wprowadzania daty, godziny lub daty i godziny.

Nieobsługiwane w aplikacjach Google Chat. Już wkrótce obsługiwane będą aplikacje do obsługi czatu.

Na przykład ten kod JSON tworzy selektor daty i godziny, aby zaplanować spotkanie: 

"dateTimePicker": {
  "name": "appointment_time",
  "label": "Book your appointment at:",
  "type": "DATE_AND_TIME",
  "valueMsEpoch": "796435200000"
}
divider

object ( Divider )

Wyświetla poziome separatory między widżetami.

Separator tworzy np. taki kod JSON: 

"divider": {
}
grid

object ( Grid )

Wyświetla siatkę z kolekcją elementów.

Siatka obsługuje dowolną liczbę kolumn i elementów. Liczba wierszy jest określana przez górne granice liczby elementów podzielone przez liczbę kolumn. Siatka zawiera 10 elementów i 2 kolumny, a 5 wierszy Siatka zawiera 11 elementów i 2 kolumny, a 6 wierszy

Na przykład ten JSON tworzy 2-kolumnową siatkę z jednym elementem: 

"grid": {
  "title": "A fine collection of items",
  "columnCount": 2,
  "borderStyle": {
    "type": "STROKE",
    "cornerRadius": 4
  },
  "items": [
    {
      "image": {
        "imageUri": "https://www.example.com/image.png",
        "cropStyle": {
          "type": "SQUARE"
        },
        "borderStyle": {
          "type": "STROKE"
        }
      },
      "title": "An item",
      "textAlignment": "CENTER"
    }
  ],
  "onClick": {
    "openLink": {
      "url": "https://www.example.com"
    }
  }
}

Akapit tekstowy

Akapit z tekstem, który obsługuje formatowanie. Więcej informacji znajdziesz w sekcji Formatowanie tekstu.

Zapis JSON 
{
  "text": string
}
Pola
text

string

Tekst wyświetlany w widżecie.

Obraz

Obraz określony za pomocą adresu URL, który może zawierać działanie onClick .

Zapis JSON 
{
  "imageUrl": string,
  "onClick": {
    object (OnClick)
  },
  "altText": string
}
Pola
imageUrl

string

Adres URL pliku https , który hostuje obraz.

Przykład: 

https://developers.google.com/chat/images/quickstart-app-avatar.png
onClick

object ( OnClick )

To działanie jest aktywowane, gdy użytkownik kliknie obraz.

altText

string

Tekst zastępczy obrazu, który ułatwia dostęp.

OnClick

Określa sposób reagowania, gdy użytkownik klika interaktywny element na karcie, taki jak przycisk.

Zapis JSON 
{

  // Union field data can be only one of the following:
  "action": {
    object (Action)
  },
  "openLink": {
    object (OpenLink)
  },
  "openDynamicLinkAction": {
    object (Action)
  },
  "card": {
    object (Card)
  }
  // End of list of possible types for union field data.
}
Pola

Pole sumy data .

data może mieć tylko jedną z tych wartości:

action

object ( Action )

Jeśli jest określona, aktywuje to działanie onClick .

card

object ( Card )

Nowa karta zostanie przesłana do stosu kart po kliknięciu, jeśli zostanie podana.

Obsługiwane przez dodatki do Google Workspace, ale nie w przypadku aplikacji Google Chat.

Czynność

Działanie opisujące działanie po przesłaniu formularza. Na przykład można wywołać skrypt Apps Script, aby obsłużyć formularz. Jeśli czynność zostanie wywołana, wartości formularzy są przesyłane na serwer.

Zapis JSON 
{
  "function": string,
  "parameters": [
    {
      object (ActionParameter)
    }
  ],
  "loadIndicator": enum (LoadIndicator),
  "persistValues": boolean,
  "interaction": enum (Interaction)
}
Pola
function

string

Funkcja niestandardowa wywoływana po kliknięciu lub aktywacji elementu zawierającego.

Przykładowe użycie to tworzenie kart interaktywnych.

parameters[]

object ( ActionParameter )

Lista parametrów działań.

loadIndicator

enum ( LoadIndicator )

Określa wskaźnik wczytywania wyświetlany podczas wykonywania wywołania.

persistValues

boolean

Wskazuje, czy po formularzu dane wartości pozostają bez zmian. Wartością domyślną jest false .

Jeśli true , wartości w formularzu pozostaną po uruchomieniu działania. Aby pozwolić użytkownikowi na wprowadzanie zmian w trakcie przetwarzania działania, ustaw LoadIndicator na NONE . W przypadku wiadomości na karcie w aplikacjach Google Chat musisz też ustawić ResponseType na UPDATE_MESSAGE i używać tego samego cardId na karcie zawierającej dane działanie.

Jeśli false , wartości w formularzu zostaną wyczyszczone po wywołaniu działania. Aby uniemożliwić użytkownikowi wprowadzanie zmian podczas przetwarzania działania, ustaw zmienną LoadIndicator na SPINNER .

interaction

enum ( Interaction )

Opcjonalnie. Wymagane podczas otwierania okna.

Co zrobić w odpowiedzi na interakcję z użytkownikiem, na przykład kliknąć przycisk karty w wiadomości na karcie.

Jeśli nie określisz stanu, aplikacja w zwykły sposób wykonuje polecenie action , na przykład otwierając link lub uruchamiając funkcję.

Dzięki użyciu właściwości interaction aplikacja może reagować w specjalny sposób. Na przykład ustawiając zasadę interaction na OPEN_DIALOG , aplikacja może otwierać okno.

Jeśli jest podany, wskaźnik ładowania nie jest wyświetlany.

Działa w aplikacjach Google Chat, ale nie w dodatkach do Google Workspace. Jeśli dodatek jest określony, cała karta jest usuwana i klient nie widzi żadnych informacji.

Parametr działania

Lista parametrów ciągu znaków do podania podczas wywoływania metody działania. Weźmy na przykład 3 przyciski drzemki: drzemka teraz, drzemka 1 dzień, drzemka w przyszłym tygodniu. Możesz użyć metody działania = drzemka(), która przekazuje typ drzemki i czas drzemki na liście parametrów ciągu znaków.

Więcej informacji znajdziesz na stronie CommonEventObject.

Zapis JSON 
{
  "key": string,
  "value": string
}
Pola
key

string

Nazwa parametru skryptu działań.

value

string

Wartość parametru.

Wskaźnik obciążenia

Określa wskaźnik wczytywania wyświetlany podczas wykonywania wywołania.

Wartości w polu enum
SPINNER Wyświetla wskaźnik postępu wczytywania treści.
NONE Nic nie jest wyświetlane.

Interakcja

Opcjonalnie. Wymagane podczas otwierania okna.

Co zrobić w odpowiedzi na interakcję z użytkownikiem, na przykład kliknąć przycisk karty w wiadomości na karcie.

Jeśli nie określisz stanu, aplikacja w zwykły sposób wykonuje polecenie action , na przykład otwierając link lub uruchamiając funkcję.

Dzięki użyciu właściwości interaction aplikacja może reagować w specjalny sposób. Na przykład ustawiając zasadę interaction na OPEN_DIALOG , aplikacja może otwierać okno.

Jeśli jest podany, wskaźnik ładowania nie jest wyświetlany.

Działa w aplikacjach Google Chat, ale nie w dodatkach do Google Workspace. Jeśli dodatek jest określony, cała karta jest usuwana i klient nie widzi żadnych informacji.

Wartości w polu enum
INTERACTION_UNSPECIFIED Wartość domyślna. action wykonuje się normalnie.
OPEN_DIALOG

Otwiera okno, które działa w formie okna i służy do obsługi kart w celu interakcji użytkowników z Google Chat.

Działa tylko przez aplikacje do obsługi czatu w odpowiedzi na kliknięcie przycisku w wiadomości na karcie.

Nieobsługiwane przez dodatki do Google Workspace. Jeśli dodatek jest określony, cała karta jest usuwana i klient nie widzi żadnych informacji.

Otwórz jako

Po kliknięciu linku OnClick klient może otworzyć go w pełnym oknie (jeśli jest to ramka używana przez klienta) albo w nakładce (np. w wyskakującym okienku). Implementacja zależy od możliwości platformy klienta, a wybrana wartość może zostać zignorowana, jeśli klient jej nie obsługuje. FULL_SIZE jest obsługiwany przez wszystkie klienty.

Obsługiwane przez dodatki do Google Workspace, ale nie w przypadku aplikacji Google Chat.

Wartości w polu enum
FULL_SIZE Link otwiera się w pełnym rozmiarze (jeśli jest to ramka używana przez klienta).
OVERLAY Link otwiera się jako nakładka, np. w wyskakującym okienku.

OnClose

Co robi klient, gdy link otwarty przez działanie OnClick zostanie zamknięty.

Implementacja zależy od możliwości platformy klienta. Na przykład przeglądarka może otworzyć link w wyskakującym okienku za pomocą modułu obsługi OnClose .

Jeśli ustawione są moduły obsługi OnOpen i OnClose , a platforma klienta nie może obsługiwać obu wartości, pierwszeństwo ma OnClose .

Obsługiwane przez dodatki do Google Workspace, ale nie w przypadku aplikacji Google Chat.

Wartości w polu enum
NOTHING Wartość domyślna. Karta nie zostanie ponownie wczytana. Nic się nie dzieje.
RELOAD

Wczytuje kartę ponownie po zamknięciu okna podrzędnego.

Jeśli jest używane w połączeniu z zasadą OpenAs.OVERLAY, okno podrzędne działa jako okno modalne, a karta nadrzędna jest blokowana do momentu zamknięcia okna.

Dekorowany tekst

Widżet wyświetlający tekst z opcjonalnymi dekoracjami, takimi jak etykieta nad lub pod tekstem, ikona znajdująca się przed tekstem, widżet wyboru lub przycisk po tekście.

Zapis JSON 
{
  "icon": {
    object (Icon)
  },
  "startIcon": {
    object (Icon)
  },
  "topLabel": string,
  "text": string,
  "wrapText": boolean,
  "bottomLabel": string,
  "onClick": {
    object (OnClick)
  },

  // Union field control can be only one of the following:
  "button": {
    object (Button)
  },
  "switchControl": {
    object (SwitchControl)
  },
  "endIcon": {
    object (Icon)
  }
  // End of list of possible types for union field control.
}
Pola
icon
(deprecated)

object ( Icon )

Wycofanie: startIcon .

startIcon

object ( Icon )

Ikona wyświetlana przed tekstem.

topLabel

string

Tekst widoczny nad: text . Zawsze skraca.

text

string

Wymagany. Tekst główny.

Obsługuje proste formatowanie. Szczegóły formatowania znajdziesz w sekcji Formatowanie tekstu.

wrapText

boolean

Ustawienie zawijania tekstu. Jeśli true , tekst zostanie zawinięty i wyświetlony w kilku wierszach. W przeciwnym razie tekst zostanie skrócony.

Dotyczy tylko text , nie topLabel i bottomLabel .

bottomLabel

string

Tekst widoczny poniżej: text Zawsze skraca.

onClick

object ( OnClick )

To działanie jest wyzwalane, gdy użytkownik kliknie topLabel lub bottomLabel .

Pole sumy control . Przycisk, przełącznik, pole wyboru lub obraz wyświetlany po prawej stronie tekstu w widżecie decoratedText . control może mieć tylko jedną z tych wartości:
button

object ( Button )

Przycisk, który można kliknąć, aby wywołać działanie.

switchControl

object ( SwitchControl )

Widżet przełączania można kliknąć, aby zmienić stan i aktywować działanie.

endIcon

object ( Icon )

Ikona wyświetlana po tekście.

Obsługuje ikony wbudowane i niestandardowe.

Ikona

Ikona wyświetlana w widżecie na karcie.

Obsługuje ikony wbudowane i niestandardowe.

Zapis JSON 
{
  "altText": string,
  "imageType": enum (ImageType),

  // Union field icons can be only one of the following:
  "knownIcon": string,
  "iconUrl": string
  // End of list of possible types for union field icons.
}
Pola
altText

string

Opcjonalnie. Opis ikony ułatwień dostępu. Jeśli wartość nie jest określona, podawana jest wartość domyślna „Button”. Warto ustawić przydatny opis tego, co wyświetla się na ikonie, a jeśli to możliwe – do czego służy. na przykład A user's account portrait lub Opens a new browser tab and navigates to the Google Chat developer documentation at https://developers.google.com/chat .

Jeśli ikona jest ustawiona w Button , altText pojawi się jako tekst pomocniczy, gdy użytkownik najedzie na niego kursorem. Jeśli jednak przycisk ma też wartość text , altText jest ignorowana.

imageType

enum ( ImageType )

Styl przycinania zastosowany do obrazu. W niektórych przypadkach zastosowanie przycięcia CIRCLE powoduje, że obraz zostanie narysowany jako większy niż wbudowana.

Pole sumy icons . Ikona wyświetlana w widżecie na karcie. icons może mieć tylko jedną z tych wartości:
knownIcon

string

Wyświetlaj jedną z wbudowanych ikon Google Workspace.

Aby na przykład wyświetlić ikonę samolotu, określ AIRPLANE . W przypadku autobusu wybierz BUS .

Pełną listę obsługiwanych ikon znajdziesz w sekcji wbudowanych ikon.

iconUrl

string

Wyświetlaj niestandardową ikonę pod adresem URL HTTPS.

Przykład: 

"iconUrl":
"https://developers.google.com/chat/images/quickstart-app-avatar.png"

Obsługiwane typy plików to .png i .jpg .

Przycisk

Tekst, ikona lub przycisk tekstowy + ikona, które użytkownicy mogą kliknąć.

Aby umożliwić kliknięcie obrazu, określ Image (a nie ImageComponent ) i ustaw działanie onClick .

Obecnie obsługiwane w aplikacjach Google Chat (w tym oknach i wiadomościach na karcie) oraz w dodatkach do Google Workspace.

Zapis JSON 
{
  "text": string,
  "icon": {
    object (Icon)
  },
  "color": {
    object (Color)
  },
  "onClick": {
    object (OnClick)
  },
  "disabled": boolean,
  "altText": string
}
Pola
text

string

Tekst wyświetlany na przycisku.

icon

object ( Icon )

Obraz ikony. Jeśli ustawisz zarówno icon , jak i text , ikona pojawi się przed tekstem.

color

object ( Color )

Po ustawieniu przycisk jest wypełniany jednolitym kolorem tła, a kolor czcionki zmienia się, aby zachować kontrast z kolorem tła. Na przykład ustawienie niebieskiego tła spowoduje wyświetlanie białego tekstu.

Jeśli zasada jest nieskonfigurowana, tło obrazu jest białe, a czcionka ma kolor niebieski.

W przypadku czerwonego, zielonego i niebieskiego wartość każdego pola jest liczbą float , którą można wyrazić na 2 sposoby: jako liczbę z przedziału 0–255 podzieloną przez 255 (153/255) lub jako wartość między 0 a 1 (0,6). 0 oznacza brak koloru, a 1 lub 255/255 oznacza pełną obecność tego koloru na skali RGB.

Opcjonalnie ustaw alfa, aby ustawić poziom przezroczystości przy użyciu tego równania: 

pixel color = alpha * (this color) + (1.0 - alpha) * (background color)

W przypadku wersji alfa wartość 1 oznacza kolor jednolity, a wartość 0 odpowiada całkowicie przezroczystemu kolorowi.

Na przykład ten kolor to półprzezroczysty czerwony: 

"color": {
   "red": 1,
   "green": 0,
   "blue": 0,
   "alpha": 0.5
}
onClick

object ( OnClick )

Wymagany. Działanie wykonywane po kliknięciu przycisku, np. otwarcie hiperlinku lub uruchomienie funkcji niestandardowej.

disabled

boolean

Jeśli true , przycisk jest wyświetlany w stanie nieaktywnym i nie odpowiada na działania użytkownika.

altText

string

Alternatywny tekst używany przy ułatwieniach dostępu.

Ustaw opisowy tekst, który będzie informował użytkowników, do czego służy przycisk. Jeśli na przykład przycisk otwiera hiperlink, możesz napisać: „Otwiera się nową kartę przeglądarki i otwiera dokumentację dla deweloperów w Google Chat na stronie https://developers.google.com/chat”.

Kolor

Reprezentuje kolor w przestrzeni kolorów RGBA. Została ona stworzona z myślą o prostocie i kompaktowej obsłudze przeliczania na różne kolory w różnych językach. Na przykład pola tej prezentacji można w niestandardowy sposób przekazać konstruktorowi java.awt.Color w języku Java. Można go też stosować do metody +colorWithRed:green:blue:alpha UIColor w systemie iOS. Niewielkim nakładom pracy można też z łatwością sformatować ciąg znaków JavaScript rgba() w CSS.

Na tej stronie referencyjnej nie ma informacji o bezwzględnej przestrzeni kolorów, która powinna posłużyć do zinterpretowania wartości RGB (np. sRGB, Adobe RGB, DCI-P3, BT.2020 itp.). Domyślnie aplikacje powinny przyjmować przestrzeń kolorów sRGB.

Jeśli konieczne jest określenie równości kolorów, implementacje, o ile nie udokumentowane inaczej, będą traktować 2 kolory tak samo, jeśli wszystkie ich wartości czerwone, zielone, niebieskie i alfa będą się różnić od siebie o maksymalnie 1–5.

Przykład (Java): 

 import com.google.type.Color;

 // ...
 public static java.awt.Color fromProto(Color protocolor) {
   float alpha = protocolor.hasAlpha()
       ? protocolor.getAlpha().getValue()
       : 1.0;

   return new java.awt.Color(
       protocolor.getRed(),
       protocolor.getGreen(),
       protocolor.getBlue(),
       alpha);
 }

 public static Color toProto(java.awt.Color color) {
   float red = (float) color.getRed();
   float green = (float) color.getGreen();
   float blue = (float) color.getBlue();
   float denominator = 255.0;
   Color.Builder resultBuilder =
       Color
           .newBuilder()
           .setRed(red / denominator)
           .setGreen(green / denominator)
           .setBlue(blue / denominator);
   int alpha = color.getAlpha();
   if (alpha != 255) {
     result.setAlpha(
         FloatValue
             .newBuilder()
             .setValue(((float) alpha) / denominator)
             .build());
   }
   return resultBuilder.build();
 }
 // ...

Przykład (iOS / Obj-C): 

 // ...
 static UIColor* fromProto(Color* protocolor) {
    float red = [protocolor red];
    float green = [protocolor green];
    float blue = [protocolor blue];
    FloatValue* alpha_wrapper = [protocolor alpha];
    float alpha = 1.0;
    if (alpha_wrapper != nil) {
      alpha = [alpha_wrapper value];
    }
    return [UIColor colorWithRed:red green:green blue:blue alpha:alpha];
 }

 static Color* toProto(UIColor* color) {
     CGFloat red, green, blue, alpha;
     if (![color getRed:&red green:&green blue:&blue alpha:&alpha]) {
       return nil;
     }
     Color* result = [[Color alloc] init];
     [result setRed:red];
     [result setGreen:green];
     [result setBlue:blue];
     if (alpha <= 0.9999) {
       [result setAlpha:floatWrapperWithValue(alpha)];
     }
     [result autorelease];
     return result;
}
// ...

Przykład (JavaScript): 

// ...

var protoToCssColor = function(rgb_color) {
   var redFrac = rgb_color.red || 0.0;
   var greenFrac = rgb_color.green || 0.0;
   var blueFrac = rgb_color.blue || 0.0;
   var red = Math.floor(redFrac * 255);
   var green = Math.floor(greenFrac * 255);
   var blue = Math.floor(blueFrac * 255);

   if (!('alpha' in rgb_color)) {
      return rgbToCssColor(red, green, blue);
   }

   var alphaFrac = rgb_color.alpha.value || 0.0;
   var rgbParams = [red, green, blue].join(',');
   return ['rgba(', rgbParams, ',', alphaFrac, ')'].join('');
};

var rgbToCssColor = function(red, green, blue) {
  var rgbNumber = new Number((red << 16) | (green << 8) | blue);
  var hexString = rgbNumber.toString(16);
  var missingZeros = 6 - hexString.length;
  var resultBuilder = ['#'];
  for (var i = 0; i < missingZeros; i++) {
     resultBuilder.push('0');
  }
  resultBuilder.push(hexString);
  return resultBuilder.join('');
};

// ...
Zapis JSON 
{
  "red": number,
  "green": number,
  "blue": number,
  "alpha": number
}
Pola
red

number

Ilość czerwonego koloru w wartości z przedziału [0, 1].

green

number

Ilość zieleni w kolorze jako wartość z przedziału [0, 1].

blue

number

Długość niebieskiego koloru jako wartość z przedziału [0, 1].

alpha

number

Część tego koloru, która powinna zostać zastosowana do piksela. Oznacza to, że kolor koloru końcowego jest określany przez równanie:

pixel color = alpha * (this color) + (1.0 - alpha) * (background color)

Oznacza to, że wartość 1,0 odpowiada jednolitym kolorowi, a wartość 0,0 oznacza całkowicie przezroczysty kolor. Stosuje się komunikat z kodem, a nie prostą pływającą skalarkę, więc można odróżnić wartość domyślną od nieskonfigurowanej. Jeśli ten parametr nie zostanie podany, obiekt koloru będzie renderowany w jednolitym kolorze (tak jakby wartość alfa wynosiła 1.0).

SwitchControl

Przełącznik stylu przełącznika lub pole wyboru w widżecie decoratedText .

Działa tylko w widżecie decoratedText .

Zapis JSON 
{
  "name": string,
  "value": string,
  "selected": boolean,
  "onChangeAction": {
    object (Action)
  },
  "controlType": enum (ControlType)
}
Pola
name

string

Nazwa, która służy do identyfikowania widżetu przełączania w zdarzeniu danych wejściowych formularza.

Szczegółowe informacje o pracy z danymi w formularzach znajdziesz w artykule Odbieranie danych formularza.

value

string

Wartość wprowadzona przez użytkownika w ramach zdarzenia wejściowego formularza.

Szczegółowe informacje o pracy z danymi w formularzach znajdziesz w artykule Odbieranie danych formularza.

selected

boolean

Gdy true jest wybrany, przełącznik jest wybrany.

onChangeAction

object ( Action )

Działanie, które ma być wykonywane po zmianie stanu przełącznika, np. funkcja do uruchomienia.

controlType

enum ( ControlType )

Wygląd przełącznika w interfejsie.

Typ elementu sterującego

Wygląd przełącznika w interfejsie.

Wartości w polu enum
SWITCH Przełącznik w stylu przełącznika.
CHECKBOX Wycofanie: CHECK_BOX .
CHECK_BOX Pole wyboru.

Lista przycisków

Lista przycisków rozmieszczonych poziomo.

Zapis JSON 
{
  "buttons": [
    {
      object (Button)
    }
  ]
}
Pola
buttons[]

object ( Button )

Tablica przycisków.

Dane wejściowe – tekst

Pole, w którym użytkownicy mogą wpisywać tekst. Obsługuje sugestie i zmiany wprowadzane przez użytkownika.

Aplikacje do obsługi czatu otrzymują i przetwarzają wartość wpisanego tekstu podczas wprowadzania danych w formularzu. Szczegółowe informacje o pracy z danymi w formularzach znajdziesz w artykule Odbieranie danych formularza.

Jeśli chcesz zbierać abstrakcyjne dane użytkowników, użyj danych tekstowych. Aby zbierać określone dane od użytkowników, użyj widżetu wyboru.

Zapis JSON 
{
  "name": string,
  "label": string,
  "hintText": string,
  "value": string,
  "type": enum (Type),
  "onChangeAction": {
    object (Action)
  },
  "initialSuggestions": {
    object (Suggestions)
  },
  "autoCompleteAction": {
    object (Action)
  }
}
Pola
name

string

Nazwa, dzięki której dane tekstowe są identyfikowane w zdarzeniu wprowadzania formularza.

Szczegółowe informacje o pracy z danymi w formularzach znajdziesz w artykule Odbieranie danych formularza.

label

string

Tekst wyświetlany nad polem do wprowadzania tekstu w interfejsie.

Określ tekst, który pomoże użytkownikowi wpisać potrzebne informacje. Jeśli na przykład pytasz o czyjeś imię i nazwisko, ale potrzebujesz nazwiska, wpisz „nazwisko” zamiast „nazwisko”.

Wymagane, jeśli pole hintText nie jest określone. W przeciwnym razie (opcjonalnie).

hintText

string

Tekst wyświetlany pod polem do wprowadzania tekstu, który ma pomóc użytkownikom w wpisaniu określonej wartości. Ten tekst jest zawsze widoczny.

Wymagane, jeśli pole label nie jest określone. W przeciwnym razie (opcjonalnie).

value

string

Wartość wprowadzona przez użytkownika w ramach zdarzenia wejściowego formularza.

Szczegółowe informacje o pracy z danymi w formularzach znajdziesz w artykule Odbieranie danych formularza.

type

enum ( Type )

Sposób wyświetlania pola do wprowadzania tekstu w interfejsie Na przykład to, czy pole jest pojedyncze czy wielowierszowe.

onChangeAction

object ( Action )

Co zrobić, gdy zmiana zostanie wprowadzona w polu tekstowym.

Przykładowe zmiany to dodawanie przez użytkownika w polu lub usuwanie tekstu.

Przykładowe działania to uruchomienie funkcji niestandardowej lub otwarcie okna w Google Chat.

initialSuggestions

object ( Suggestions )

Sugerowane wartości, które użytkownicy mogą wpisać. Te wartości pojawiają się, gdy użytkownik kliknie pole tekstowe. Gdy użytkownicy wpisują wartości, sugerowane wartości dynamicznie filtrują do treści wpisanych przez użytkownika.

Na przykład pole do wprowadzania tekstu w języku programowania może proponować język Java, JavaScript, Python i C++. Gdy użytkownicy zaczną wpisywać „Jav”, na liście sugestii pojawią się tylko języki Java i JavaScript.

Sugerowane wartości ułatwiają użytkownikom wpisywanie wartości, które mogą być przydatne dla Twojej aplikacji. Gdy odwołujesz się do JavaScriptu, niektórzy użytkownicy mogą wpisać „javascript”, a inni „JavaScript”. Sugerowanie kodu JavaScript może ujednolicić sposób interakcji użytkowników z aplikacją.

Jeśli zasada jest określona, właściwość TextInput.type ma zawsze wartość SINGLE_LINE , nawet jeśli jest ustawiona na MULTIPLE_LINE .

autoCompleteAction

object ( Action )

Opcjonalnie. Określ, co zrobić, jeśli pole do wprowadzania tekstu zawiera sugestie dotyczące użytkowników.

Jeśli nie określono inaczej, sugestie są ustawiane przez initialSuggestions i przetwarzane przez klienta.

Jeśli zasada jest określona, aplikacja wykonuje działanie określone w tym miejscu, np. uruchamia funkcję niestandardową.

Obsługiwane przez dodatki do Google Workspace, ale nie w przypadku aplikacji Google Chat. Wkrótce obsługiwane będą aplikacje do obsługi czatu.

Typ

Sposób wyświetlania pola do wprowadzania tekstu w interfejsie Na przykład pole wprowadzania tekstu jednowierszowego lub wielowierszowe

Jeśli określono właściwość initialSuggestions , właściwość type ma zawsze wartość SINGLE_LINE , nawet jeśli jest ustawiona na MULTIPLE_LINE .

Wartości w polu enum
SINGLE_LINE Pole do wprowadzania tekstu ma stałą wysokość 1 wiersza.
MULTIPLE_LINE Pole do wprowadzania tekstu ma stałą wysokość obejmującą wiele wierszy.

Sugestie

Sugerowane wartości, które użytkownicy mogą wpisać. Te wartości pojawiają się, gdy użytkownik kliknie pole tekstowe. Gdy użytkownicy wpisują wartości, sugerowane wartości dynamicznie filtrują do treści wpisanych przez użytkownika.

Na przykład pole do wprowadzania tekstu w języku programowania może proponować język Java, JavaScript, Python i C++. Gdy użytkownicy zaczną wpisywać „Jav”, na liście sugestii pojawią się tylko języki Java i JavaScript.

Sugerowane wartości ułatwiają użytkownikom wpisywanie wartości, które mogą być przydatne dla Twojej aplikacji. Gdy odwołujesz się do JavaScriptu, niektórzy użytkownicy mogą wpisać „javascript”, a inni „JavaScript”. Sugerowanie kodu JavaScript może ujednolicić sposób interakcji użytkowników z aplikacją.

Jeśli zasada jest określona, właściwość TextInput.type ma zawsze wartość SINGLE_LINE , nawet jeśli jest ustawiona na MULTIPLE_LINE .

Zapis JSON 
{
  "items": [
    {
      object (SuggestionItem)
    }
  ]
}
Pola
items[]

object ( SuggestionItem )

Lista sugestii używanych do autouzupełniania rekomendacji w polach wprowadzania tekstu.

Element propozycji

Jedna sugerowana wartość, którą użytkownicy mogą wpisać w polu tekstowym.

Zapis JSON 
{

  // Union field content can be only one of the following:
  "text": string
  // End of list of possible types for union field content.
}
Pola

Pole sumy content .

content może mieć tylko jedną z tych wartości:

text

string

Wartość sugerowanego pola do wprowadzania tekstu. Jest to odpowiednik tego, co użytkownicy wpisaliby na stronie.

Źródło sygnału

Widżet, który tworzy element interfejsu z opcjami do wyboru przez użytkowników. Na przykład menu lub listę kontrolną.

Aplikacje do obsługi czatu otrzymują i przetwarzają wartość wpisanego tekstu podczas wprowadzania danych w formularzu. Szczegółowe informacje o pracy z danymi w formularzach znajdziesz w artykule Odbieranie danych formularza.

Jeśli chcesz zbierać dane od użytkowników, którzy pasują do ustawionych opcji, użyj wyboru wejściowego. Aby zbierać abstrakcyjne dane od użytkowników, użyj widżetu wprowadzania tekstu.

Zapis JSON 
{
  "name": string,
  "label": string,
  "type": enum (SelectionType),
  "items": [
    {
      object (SelectionItem)
    }
  ],
  "onChangeAction": {
    object (Action)
  }
}
Pola
name

string

Nazwa, która określa dane wejściowe zaznaczone w zdarzeniu do wypełnienia formularza.

Szczegółowe informacje o pracy z danymi w formularzach znajdziesz w artykule Odbieranie danych formularza.

label

string

Tekst wyświetlany nad polem wyboru w interfejsie.

Określ tekst, który pomoże użytkownikowi wpisać potrzebne informacje. Jeśli na przykład użytkownik wybierze z menu opcję pilności, może to być „Pilna” lub „Wybierz pilną”.

type

enum ( SelectionType )

Sposób, w jaki użytkownicy widzą daną opcję. Różne opcje obsługują różne typy interakcji. Użytkownicy mogą np. włączyć wiele pól wyboru, ale z menu mogą wybrać tylko jedną wartość.

Każdy wpisany tekst obsługuje 1 typ wyboru. Nie można na przykład łączyć pól wyboru i przełączników.

items[]

object ( SelectionItem )

Tablica wybranych elementów. Dotyczy to np. wszystkich zaznaczonych pól wyboru.

onChangeAction

object ( Action )

Jeśli ta opcja jest określona, formularz jest wysyłany, gdy zmieni się wybór. Jeśli nie określisz tego ustawienia, musisz podać oddzielny przycisk, który służy do przesyłania formularza.

Szczegółowe informacje o pracy z danymi w formularzach znajdziesz w artykule Odbieranie danych formularza.

Typ wyboru

Sposób, w jaki użytkownicy widzą daną opcję. Różne opcje obsługują różne typy interakcji. Użytkownicy mogą np. włączyć wiele pól wyboru, ale z menu mogą wybrać tylko jedną wartość.

Każdy wpisany tekst obsługuje 1 typ wyboru. Nie można na przykład łączyć pól wyboru i przełączników.

Wartości w polu enum
CHECK_BOX Zestaw pól wyboru. Użytkownicy mogą zaznaczyć wiele pól wyboru na dane wejściowe.
RADIO_BUTTON Zestaw przycisków opcji. Każdy użytkownik może wybrać tylko jedną opcję.
SWITCH Zestaw przełączników. Użytkownicy mogą włączyć wiele przełączników naraz.
DROPDOWN Menu. Użytkownicy mogą wybrać z menu jeden element menu.

Element wyboru

Element do wyboru w opcji wyboru, np. pole wyboru lub przełącznik.

Zapis JSON 
{
  "text": string,
  "value": string,
  "selected": boolean
}
Pola
text

string

Tekst wyświetlany użytkownikom.

value

string

Wartość powiązana z tym elementem. Klient powinien go używać jako wartości wejściowej formularza.

Szczegółowe informacje o pracy z danymi w formularzach znajdziesz w artykule Odbieranie danych formularza.

selected

boolean

Gdy true wybiera więcej niż 1 element. Jeśli wybierzesz więcej niż jeden przycisk opcji i menu, pierwszy wybrany element zostanie odebrany, a pozostałe zostaną zignorowane.

Selektor daty i godziny

Pozwala użytkownikom określić datę, godzinę lub zarówno datę, jak i godzinę.

Akceptuje wprowadzanie tekstu przez użytkowników, ale udostępnia interaktywny selektor daty i godziny, który umożliwia użytkownikom prawidłowe wpisanie dat i godzin. Jeśli użytkownik wpisze nieprawidłową datę lub godzinę, w widżecie wyświetli się komunikat o błędzie.

Nieobsługiwane w aplikacjach Google Chat. Wkrótce obsługiwane będą aplikacje do obsługi czatu.

Zapis JSON 
{
  "name": string,
  "label": string,
  "type": enum (DateTimePickerType),
  "valueMsEpoch": string,
  "timezoneOffsetDate": integer,
  "onChangeAction": {
    object (Action)
  }
}
Pola
name

string

Nazwa, po której identyfikuje selektor daty i godziny w zdarzeniu wprowadzania formularza.

Szczegółowe informacje o pracy z danymi w formularzach znajdziesz w artykule Odbieranie danych formularza.

label

string

Tekst, który zachęca użytkowników do wpisania daty, godziny lub daty.

Określ tekst, który pomoże użytkownikowi wpisać potrzebne informacje. Jeśli np. użytkownicy ustalają termin spotkania, etykiety takie jak „Data spotkania” czy „Data i godzina spotkania” mogą się sprawdzić.

type

enum ( DateTimePickerType )

Rodzaj daty i godziny podany w selektorze daty i godziny.

valueMsEpoch

string ( int64 format)

Wartość wyświetlana jako wartość domyślna przed danymi wejściowymi lub poprzednimi użytkownikami, wyrażona w milisekundach (czas uniksowy).

W przypadku typu DATE_AND_TIME używana jest pełna wartość epoki.

W przypadku typu DATE_ONLY używana jest tylko data epoki.

W przypadku typu TIME_ONLY używany jest tylko czas epoki. Aby na przykład ustawić godzinę 3:00, ustaw czas epoki na 3 * 60 * 60 * 1000 .

timezoneOffsetDate

integer

Liczba wskazująca przesunięcie czasu względem strefy czasowej UTC w minutach. Jeśli zasada jest skonfigurowana, pole valueMsEpoch jest wyświetlane w określonej strefie czasowej. Jeśli zasada nie jest skonfigurowana, używa ustawienia strefy czasowej użytkownika po stronie klienta.

onChangeAction

object ( Action )

Wywoływane, gdy użytkownik kliknie Zapisz lub Wyczyść w interfejsie selektora daty i godziny.

Typ selektora daty i godziny

Rodzaj daty i godziny podany w selektorze daty i godziny.

Wartości w polu enum
DATE_AND_TIME Użytkownik może wybrać datę i godzinę.
DATE_ONLY Użytkownik może wybrać tylko datę.
TIME_ONLY Użytkownik może wybrać tylko godzinę.

Separator

Wyświetla linię poziomą między widżetami a poziomą linią.

Separator tworzy np. taki kod JSON: 

"divider": {}

Siatka

Wyświetla siatkę z kolekcją elementów.

Siatka obsługuje dowolną liczbę kolumn i elementów. Liczba wierszy jest określana przez pozycje podzielone przez kolumny. Siatka zawiera 10 elementów i 2 kolumny, a 5 wierszy Siatka zawiera 11 elementów i 2 kolumny, a 6 wierszy

Na przykład ten JSON tworzy 2-kolumnową siatkę z jednym elementem: 

"grid": {
  "title": "A fine collection of items",
  "columnCount": 2,
  "borderStyle": {
    "type": "STROKE",
    "cornerRadius": 4
  },
  "items": [
    {
      "image": {
        "imageUri": "https://www.example.com/image.png",
        "cropStyle": {
          "type": "SQUARE"
        },
        "borderStyle": {
          "type": "STROKE"
        }
      },
      "title": "An item",
      "textAlignment": "CENTER"
    }
  ],
  "onClick": {
    "openLink": {
      "url": "https://www.example.com"
    }
  }
}
Zapis JSON 
{
  "title": string,
  "items": [
    {
      object (GridItem)
    }
  ],
  "borderStyle": {
    object (BorderStyle)
  },
  "columnCount": integer,
  "onClick": {
    object (OnClick)
  }
}
Pola
title

string

Tekst wyświetlany w nagłówku siatki.

items[]

object ( GridItem )

Elementy wyświetlane w siatce.

borderStyle

object ( BorderStyle )

Styl obramowania, który chcesz zastosować do każdego elementu siatki.

columnCount

integer

Liczba kolumn wyświetlanych w siatce. Jeśli nie określisz wartości tego pola, zostanie użyta wartość domyślna, która różni się w zależności od tego, gdzie wyświetla się siatka (okno dialogowe a reklama towarzysząca).

onClick

object ( OnClick )

To wywołanie zwrotne jest używane przez każdy element siatki, ale z identyfikatorem elementu i indeksem na liście elementów dodanym do parametrów wywołania zwrotnego.

Element siatki

Reprezentuje jeden element w układzie siatki.

Zapis JSON 
{
  "id": string,
  "image": {
    object (ImageComponent)
  },
  "title": string,
  "subtitle": string,
  "layout": enum (GridItemLayout)
}
Pola
id

string

Określony przez użytkownika identyfikator tego elementu siatki. Ten identyfikator jest zwracany w nadrzędnym parametrze wywołania zwrotnego Click Grid.

image

object ( ImageComponent )

Obraz wyświetlany w elemencie siatki.

title

string

Tytuł elementu siatki.

subtitle

string

Podtytuł elementu siatki.

layout

enum ( GridItemLayout )

Układ używany w elemencie siatki.

Składnik obrazu

Reprezentuje obraz.

Zapis JSON 
{
  "imageUri": string,
  "altText": string,
  "cropStyle": {
    object (ImageCropStyle)
  },
  "borderStyle": {
    object (BorderStyle)
  }
}
Pola
imageUri

string

Adres URL obrazu.

altText

string

Etykieta ułatwień dostępu obrazu.

cropStyle

object ( ImageCropStyle )

Styl przycinania, który ma zostać zastosowany do obrazu.

borderStyle

object ( BorderStyle )

Styl obramowania, który chcesz zastosować do obrazu.

Styl Przycięcia

Reprezentuje styl przycięcia zastosowany do obrazu.

Oto przykład zastosowania współczynnika proporcji 16 na 9: 

cropStyle {
 "type": "RECTANGLE_CUSTOM",
 "aspectRatio": 16/9
}
Zapis JSON 
{
  "type": enum (ImageCropType),
  "aspectRatio": number
}
Pola
type

enum ( ImageCropType )

Typ przycięcia.

aspectRatio

number

Współczynnik proporcji, który ma zostać użyty, jeśli typ przycinania to RECTANGLE_CUSTOM .

Oto przykład zastosowania współczynnika proporcji 16 na 9: 

cropStyle {
 "type": "RECTANGLE_CUSTOM",
 "aspectRatio": 16/9
}

Typ przycinania obrazu

Reprezentuje styl przycięcia zastosowany do obrazu.

Wartości w polu enum
IMAGE_CROP_TYPE_UNSPECIFIED Nie określono wartości. Nie używać.
SQUARE Wartość domyślna. Zastosuj przycięcie kwadratowe.
CIRCLE Stosuje przycinanie koła.
RECTANGLE_CUSTOM Stosuje prostokątne przycięcia w niestandardowym formacie. Ustaw niestandardowy współczynnik proporcji za pomocą atrybutu aspectRatio .
RECTANGLE_4_3 Stosuje prostokątne przycięcia w formacie 4:3.

Styl obramowania

Odzwierciedla pełny styl obramowania zastosowany do elementów w widżecie.

Zapis JSON 
{
  "type": enum (BorderType),
  "strokeColor": {
    object (Color)
  },
  "cornerRadius": integer
}
Pola
type

enum ( BorderType )

typ obramowania;

strokeColor

object ( Color )

Kolory do użycia, gdy typ to BORDER_TYPE_STROKE .

cornerRadius

integer

Promień narożnika obramowania.

Typ obramowania

Określa typy obramowania zastosowane do widżetów.

Wartości w polu enum
BORDER_TYPE_UNSPECIFIED Nie określono wartości.
NO_BORDER Wartość domyślna. Brak obramowania.
STROKE Kontur.

Układ siatki

Odzwierciedla różne opcje układu dostępne dla elementu siatki.

Wartości w polu enum
GRID_ITEM_LAYOUT_UNSPECIFIED Nie określono układu.
TEXT_BELOW Tytuł i podtytuł są widoczne pod obrazem elementu siatki.
TEXT_ABOVE Tytuł i podtytuł są wyświetlane nad obrazem elementu siatki.

Działanie karty

Działanie karty to działanie powiązane z kartą. Karta może na przykład zawierać takie działania jak usunięcie faktury lub e-maila czy otwarcie faktury w przeglądarce.

Nieobsługiwane w aplikacjach Google Chat.

Zapis JSON 
{
  "actionLabel": string,
  "onClick": {
    object (OnClick)
  }
}
Pola
actionLabel

string

Etykieta wyświetlana jako element menu czynności.

onClick

object ( OnClick )

Działanie onClick dla tego działania.

KartaNaprawiono

Trwała (przyklejona) stopka, która pojawia się u dołu karty.

Ustawienie fixedFooter bez określenia primaryButton lub secondaryButton powoduje błąd.

Aplikacje do obsługi czatu obsługują fixedFooter w oknach, ale nie w wiadomościach na karcie.

Zapis JSON 
{
  "primaryButton": {
    object (Button)
  },
  "secondaryButton": {
    object (Button)
  }
}
Pola
primaryButton

object ( Button )

Przycisk główny stopki. Musi to być przycisk tekstowy z ustawionym tekstem i kolorem.

secondaryButton

object ( Button )

Przycisk dodatkowy stopki. Musi to być przycisk tekstowy z ustawionym tekstem i kolorem. Jeśli ustawiono secondaryButton , musisz określić primaryButton .

Styl wyświetlania

W dodatkach do Google Workspace określa sposób wyświetlania karty.

Nieobsługiwane w aplikacjach Google Chat.

Wartości w polu enum
DISPLAY_STYLE_UNSPECIFIED Nie używać.
PEEK Nagłówek karty jest wyświetlany u dołu paska bocznego, częściowo zasłaniając bieżącą górną kartę stosu. Kliknięcie nagłówka spowoduje umieszczenie karty w stosie. Jeśli karta nie ma nagłówka, zostanie wygenerowany nagłówek.
REPLACE Wartość domyślna. Karta jest wyświetlana, zastępując widok górnej karty w stosie kart.