Karta
Interfejs karty wyświetlany w wiadomości w Google Chat lub w dodatku do Google Workspace.
Karty obsługują zdefiniowany układ, interaktywne elementy interfejsu (np. przyciski) oraz multimedia (np. obrazy). Korzystaj z kart, aby prezentować szczegółowe informacje, zbierać informacje od użytkowników i pomagać im zrobić kolejny krok.
Instrukcje tworzenia kart znajdziesz w tej dokumentacji:
- Informacje o aplikacjach Google Chat znajdziesz w artykule Projektowanie dynamicznych, interaktywnych i spójnych interfejsów użytkownika za pomocą kart.
- Informacje o dodatkach do Google Workspace znajdziesz w artykule Interfejsy kart.
Przykład: wiadomość z kartą w aplikacji Google Chat
Aby utworzyć przykładową wiadomość karty w Google Chat, użyj tego kodu JSON:
{
"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 ( |
Pola | |
---|---|
header
|
Nagłówek karty. Nagłówek zwykle zawiera obraz na początku i tytuł. Nagłówki są zawsze wyświetlane u góry karty. |
sections[]
|
Zawiera kolekcję widżetów. Każda sekcja ma własny, opcjonalny nagłówek. Sekcje są wizualnie oddzielone liniami. Przykład w aplikacjach Google Chat znajdziesz w sekcji kart. |
sectionDividerStyle
|
Styl separatora między sekcjami. |
cardActions[]
|
Działania na karcie. Działania są dodawane do menu karty na pasku narzędzi.
Karty aplikacji Google Chat nie mają paska narzędzi, dlatego
Na przykład ten kod JSON tworzy menu działań karty z opcjami
|
name
|
Nazwa karty. Używany jako identyfikator karty podczas nawigacji po kartach. Aplikacje do obsługi czatu nie obsługują nawigacji po kartach, dlatego ignorują to pole. |
fixedFooter
|
Stała stopka wyświetlana u dołu tej karty.
Ustawienie Obsługiwane przez dodatki do Google Workspace i aplikacje do obsługi czatu. W przypadku aplikacji do obsługi czatu możesz używać stałych stopek w oknach dialogowych, ale nie wiadomości z kartami. |
displayStyle
|
W dodatkach do Google Workspace ustawia właściwości wyświetlania elementu Nieobsługiwane przez aplikacje do obsługi czatu. |
peekCardHeader
|
Podczas wyświetlania treści kontekstowych nagłówek karty szybkiego dostępu pełni funkcję obiektu zastępczego, dzięki czemu użytkownik może przechodzić między kartami na stronie głównej i kartami kontekstowymi. Nieobsługiwane przez aplikacje do obsługi czatu. |
Nagłówek karty
Reprezentuje nagłówek karty. Przykład w aplikacjach Google Chat znajdziesz w sekcji Nagłówek karty.
Zapis JSON |
---|
{
"title": string,
"subtitle": string,
"imageType": enum (
|
Pola | |
---|---|
title
|
Wymagany. Tytuł nagłówka karty. Nagłówek ma stałą wysokość: jeśli określono zarówno tytuł, jak i podtytuł, zajmują po 1 wierszu. Jeśli określisz tylko tytuł, element zajmuje oba wiersze. |
subtitle
|
Podtytuł karty. Jeśli podasz wartość, pojawi się w osobnym wierszu pod |
imageType
|
Kształt użyty do przycięcia obrazu. |
imageUrl
|
Adres URL HTTPS obrazu w nagłówku karty. |
imageAltText
|
Tekst zastępczy tego obrazu, który jest używany na potrzeby ułatwień dostępu. |
Typ obrazu
Kształt użyty do przycięcia obrazu.
Wartości w polu enum | |
---|---|
SQUARE
|
Wartość domyślna. Dodaje do obrazu kwadratową maskę. Na przykład obraz o wymiarach 4 x 3 zmienia się w 3 x 3. |
CIRCLE
|
Dodaje do obrazu maskę okrągłą. Na przykład obraz o wymiarach 4 x 3 stanie się kołem o średnicy 3. |
Sekcja
Sekcja zawiera zbiór widżetów, które są renderowane pionowo w określonej kolejności.
Zapis JSON |
---|
{
"header": string,
"widgets": [
{
object (
|
Pola | |
---|---|
header
|
Tekst wyświetlany u góry sekcji. Obsługuje prosty tekst w formacie HTML. Więcej informacji o formatowaniu tekstu znajdziesz w artykułach Formatowanie tekstu w aplikacjach Google Chat i Formatowanie tekstu w dodatkach do Google Workspace. |
widgets[]
|
Wszystkie widżety w sekcji. Musi zawierać co najmniej 1 widżet. |
collapsible
|
Wskazuje, czy tę sekcję można zwijać. Sekcje zwijane ukrywają niektóre lub wszystkie widżety, ale użytkownicy mogą je rozwinąć, aby zobaczyć ukryte widżety, klikając Pokaż więcej. Użytkownicy mogą ponownie ukryć widżety, klikając Pokaż mniej.
Aby określić, które widżety są ukryte, wybierz |
uncollapsibleWidgetsCount
|
Liczba widżetów, których nie można zwijać, które pozostają widoczne nawet po zwinięciu sekcji.
Jeśli na przykład sekcja zawiera 5 widżet, a |
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 oraz innych typów obiektów.
Zapis JSON |
---|
{ "horizontalAlignment": enum ( |
Pola | |
---|---|
horizontalAlignment
|
Określa, czy widżety mają być wyrównywane do lewej, do prawej czy do środka kolumny. |
Pole sumy data . Widżet może zawierać tylko jeden z poniższych elementów. Aby wyświetlić więcej elementów, możesz użyć wielu pól widżetu.
data może mieć tylko jedną z tych wartości:
|
|
textParagraph
|
Wyświetla akapit tekstu. Obsługuje prosty tekst w formacie HTML. Więcej informacji o formatowaniu tekstu znajdziesz w artykułach Formatowanie tekstu w aplikacjach Google Chat i Formatowanie tekstu w dodatkach do Google Workspace. Na przykład ten kod JSON tworzy pogrubienie tekstu:
|
image
|
Wyświetla obraz. Na przykład ten plik JSON tworzy obraz z tekstem alternatywnym:
|
decoratedText
|
Wyświetla ozdobiony element tekstowy. Na przykład poniższy kod JSON tworzy ozdobny widżet tekstowy z adresem e-mail:
|
buttonList
|
Lista przycisków. Na przykład podany niżej kod JSON powoduje utworzenie 2 przycisków. Pierwszy to niebieski przycisk tekstowy, a drugi to przycisk graficzny, którego kliknięcie umożliwia otwarcie linku:
|
textInput
|
Wyświetla pole tekstowe, w którym użytkownicy mogą pisać. Na przykład ten kod JSON tworzy pole tekstowe do adresu e-mail:
W kolejnym przykładzie ten plik JSON tworzy dane wejściowe tekstowe dla języka programowania ze statycznymi sugestiami:
|
selectionInput
|
Wyświetla element sterujący, który pozwala użytkownikom wybierać elementy. Elementami sterującymi wyboru mogą być pola wyboru, przyciski, przełączniki lub menu rozwijane. Na przykład ten plik JSON tworzy menu, które pozwala użytkownikom wybrać rozmiar:
|
dateTimePicker
|
Wyświetla widżet, który umożliwia użytkownikom wpisywanie daty, godziny lub daty i godziny. Na przykład poniższy kod JSON tworzy selektor daty i godziny, aby zaplanować spotkanie:
|
divider
|
Wyświetla poziomą linię podziału między widżetami. Na przykład taki kod JSON tworzy separator:
|
grid
|
Wyświetla siatkę z kolekcją elementów. Siatka obsługuje dowolną liczbę kolumn i elementów. Liczba wierszy jest określana na podstawie górnej granicy liczby elementów podzielonej przez liczbę kolumn. Siatka z 10 elementami i 2 kolumnami ma 5 wierszy. Siatka z 11 elementami i 2 kolumnami ma 6 wierszy. Na przykład ten kod JSON tworzy siatkę z 2 kolumnami z 1 elementem:
|
columns
|
Wyświetla do 2 kolumn.
Aby uwzględnić więcej niż 2 kolumny lub użyć wierszy, użyj widżetu Na przykład ten plik JSON tworzy 2 kolumny, z których każda zawiera akapity:
|
Akapit tekstu
Akapit tekstu, który obsługuje formatowanie. Przykład dotyczący aplikacji Google Chat znajdziesz w sekcji Akapit tekstu. Więcej informacji o formatowaniu tekstu znajdziesz w artykułach Formatowanie tekstu w aplikacjach Google Chat i Formatowanie tekstu w dodatkach do Google Workspace.
Zapis JSON |
---|
{ "text": string } |
Pola | |
---|---|
text
|
Tekst widoczny w widżecie. |
Obraz
Obraz określony za pomocą adresu URL i może zawierać działanie onClick
. Przykład: Obraz.
Zapis JSON |
---|
{
"imageUrl": string,
"onClick": {
object (
|
Pola | |
---|---|
imageUrl
|
Adres URL HTTPS hostujący obraz. Na przykład:
|
onClick
|
Kliknięcie tego przycisku powoduje uruchomienie tego działania, gdy użytkownik kliknie obraz. |
altText
|
Tekst zastępczy tego obrazu, który jest używany na potrzeby ułatwień dostępu. |
Po kliknięciu
Określa, jak zareagować, gdy użytkownik kliknie interaktywny element na karcie, np. przycisk.
Zapis JSON |
---|
{ // Union field |
Pola | |
---|---|
Pole sumy
|
|
action
|
Jeśli określisz działanie, zostanie ono aktywowane przez ten |
openLink
|
Jeśli określisz ten element, |
openDynamicLinkAction
|
Dodatek aktywuje to działanie, gdy musi otworzyć link. Różni się to od metody |
card
|
Nowa karta jest przekazywana do stosu kart po kliknięciu (jeśli została podana). Ta funkcja jest obsługiwana przez dodatki do Google Workspace, ale nie przez aplikacje Google Chat. |
Działanie
Działanie opisujące zachowanie po przesłaniu formularza. Możesz na przykład wywołać skrypt Apps Script do obsługi formularza. W przypadku wywołania działania wartości formularza są przesyłane na serwer.
Zapis JSON |
---|
{ "function": string, "parameters": [ { object ( |
Pola | |
---|---|
function
|
Funkcja niestandardowa wywoływana po kliknięciu elementu zawierającego nazwę lub po jego włączeniu. Przykład użycia znajdziesz w artykule Tworzenie kart interaktywnych. |
parameters[]
|
Lista parametrów działań. |
loadIndicator
|
Określa wskaźnik wczytywania, który wyświetla się podczas wywoływania działania. |
persistValues
|
Wskazuje, czy wartości formularza pozostają po wykonaniu działania. Wartością domyślną jest
Jeśli
Jeśli |
interaction
|
Opcjonalnie. Wymagane przy otwieraniu okna. Co ma zrobić w odpowiedzi na interakcję z użytkownikiem, np. kliknięcie przez niego przycisku w komunikacie na karcie.
Jeśli nie określono inaczej, aplikacja odpowiada, wykonując
Dzięki określeniu właściwości Jest obsługiwane przez aplikacje do obsługi czatu, ale nie przez dodatki do Google Workspace. Jeśli określisz, że to dodatek, karta zostanie usunięta w całości i nic nie będzie wyświetlane w kliencie. |
Parametr ActionParametr
Lista parametrów ciągów tekstowych, które należy dostarczyć po wywołaniu metody działania. Dostępne są na przykład trzy przyciski drzemki: Odłóż teraz, Odłóż na jeden dzień lub Drzemka w kolejnym tygodniu. Możesz użyć funkcji action method = snooze()
, która przekazuje typ drzemki i czas drzemki na liście parametrów ciągu znaków.
Więcej informacji: CommonEventObject
.
Zapis JSON |
---|
{ "key": string, "value": string } |
Pola | |
---|---|
key
|
Nazwa parametru skryptu działania. |
value
|
Wartość parametru. |
Wskaźnik wczytywania
Określa wskaźnik wczytywania, który wyświetla się podczas wywoływania działania.
Wartości w polu enum | |
---|---|
SPINNER
|
Wskaźnik postępu ładowania treści. |
NONE
|
Nic nie jest wyświetlane. |
Interakcja
Opcjonalnie. Wymagane przy otwieraniu okna.
Co ma zrobić w odpowiedzi na interakcję z użytkownikiem, np. kliknięcie przez niego przycisku w komunikacie na karcie.
Jeśli nie określono inaczej, aplikacja odpowiada, wykonując action
(np. otwierając link lub uruchamiając funkcję) w zwykły sposób.
Dzięki określeniu właściwości interaction
aplikacja może reagować w specjalny, interaktywny sposób. Jeśli na przykład ustawisz interaction
na OPEN_DIALOG
, aplikacja będzie mogła otworzyć okno.
Jeśli jest określony, wskaźnik wczytywania się nie wyświetla.
Jest obsługiwane przez aplikacje do obsługi czatu, ale nie przez dodatki do Google Workspace. Jeśli określisz, że to dodatek, karta zostanie usunięta w całości i nic nie będzie wyświetlane w kliencie.
Wartości w polu enum | |
---|---|
INTERACTION_UNSPECIFIED
|
Wartość domyślna. action działa normalnie.
|
OPEN_DIALOG
|
Otwiera okno, czyli interfejs z kartami, za pomocą którego aplikacje do obsługi czatu kontaktują się z użytkownikami. Obsługiwane tylko przez aplikacje do obsługi czatu w odpowiedzi na kliknięcia przycisków w wiadomościach z kartą. Nieobsługiwane przez dodatki do Google Workspace. Jeśli określisz, że to dodatek, karta zostanie usunięta w całości i nic nie będzie wyświetlane w kliencie. |
OpenLink
Reprezentuje zdarzenie onClick
, które otwiera hiperlink.
Zapis JSON |
---|
{ "url": string, "openAs": enum ( |
Pola | |
---|---|
url
|
Adres URL do otwarcia. |
openAs
|
Jak otworzyć link. Nieobsługiwane przez aplikacje do obsługi czatu. |
onClose
|
Czy klient zapomni o linku po jego otwarciu, czy będzie go obserwować, aż okno się nie zamknie. Nieobsługiwane przez aplikacje do obsługi czatu. |
OpenAs
Gdy akcja OnClick
powoduje otwarcie linku, klient może otworzyć go jako pełnowymiarowe okno (jeśli jest to ramka używana przez klienta) lub jako nakładkę (np. wyskakujące okienko). Implementacja zależy od możliwości platformy klienta i wybrana wartość może być ignorowana, jeśli klient jej nie obsługuje.
Usługa FULL_SIZE
jest obsługiwana przez wszystkie klienty.
Ta funkcja jest obsługiwana przez dodatki do Google Workspace, ale nie przez aplikacje Google Chat.
Wartości w polu enum | |
---|---|
FULL_SIZE
|
Link otwiera się jako okno pełnowymiarowe (jeśli jest to ramka używana przez klienta). |
OVERLAY
|
Link otwiera się jako nakładka, np. w wyskakującym okienku. |
Przy zamknięciu
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 z modułem obsługi OnClose
.
Jeśli ustawione są zarówno moduły obsługi OnOpen
, jak i OnClose
, a platforma klienta nie obsługuje obu wartości, parametr OnClose
ma pierwszeństwo.
Ta funkcja jest obsługiwana przez dodatki do Google Workspace, ale nie przez aplikacje Google Chat.
Wartości w polu enum | |
---|---|
NOTHING
|
Wartość domyślna. Karta nie jest doładowywana i nic się nie dzieje. |
RELOAD
|
Wczytuje ponownie kartę po zamknięciu okna podrzędnego.
W połączeniu z |
Tekst Dekorowany
Widżet wyświetlający tekst z opcjonalnymi dekoracjami, takimi jak etykieta nad lub pod tekstem, ikona przed tekstem, widżet wyboru czy przycisk po tekście. Przykład dotyczący aplikacji Google Chat znajdziesz w sekcji Dekorowany tekst.
Zapis JSON |
---|
{ "icon": { object ( |
Pola | |
---|---|
icon
|
Wycofano na rzecz
|
startIcon
|
Ikona wyświetlana przed tekstem. |
topLabel
|
Tekst, który wyświetla się nad |
text
|
Wymagany. Tekst główny. Obsługuje proste formatowanie. Więcej informacji o formatowaniu tekstu znajdziesz w artykułach Formatowanie tekstu w aplikacjach Google Chat i Formatowanie tekstu w dodatkach do Google Workspace. |
wrapText
|
Ustawienie zawijania tekstu. W przypadku
Dotyczy tylko |
bottomLabel
|
Tekst widoczny poniżej pola |
onClick
|
To działanie jest wywoływane, gdy użytkownik kliknie |
Pole sumy control . Przycisk, przełącznik, pole wyboru lub obraz wyświetlane po prawej stronie tekstu w widżecie decoratedText .
control może mieć tylko jedną z tych wartości:
|
|
button
|
Przycisk, który użytkownik może kliknąć, aby wywołać określone działanie. |
switchControl
|
Widżet przełączania, który użytkownik może kliknąć, aby zmienić swój stan i wywołać działanie. |
endIcon
|
Ikona wyświetlana pod tekstem. Obsługuje ikony wbudowane i niestandardowe. |
Ikona
Ikona wyświetlana w widżecie na karcie. Przykład dotyczący aplikacji Google Chat znajdziesz w sekcji Ikona.
Obsługuje ikony wbudowane i niestandardowe.
Zapis JSON |
---|
{ "altText": string, "imageType": enum ( |
Pola | |
---|---|
altText
|
Opcjonalnie. Opis ikony używanej na potrzeby ułatwień dostępu. Jeśli nie określono inaczej, podawana jest wartość domyślna
Jeśli ikona jest ustawiona w |
imageType
|
Styl przycinania zastosowany do obrazu. W niektórych przypadkach przycięcie obrazu |
Pole sumy icons . Ikona wyświetlana w widżecie na karcie.
icons może mieć tylko jedną z tych wartości:
|
|
knownIcon
|
Wyświetla jedną z wbudowanych ikon dostępnych w Google Workspace.
Aby na przykład wyświetlić ikonę samolotu, podaj Pełną listę obsługiwanych ikon znajdziesz na stronie wbudowanych ikon. |
iconUrl
|
Wyświetlaj ikonę niestandardową hostowaną pod adresem URL HTTPS. Na przykład:
Obsługiwane typy plików to |
Przycisk
Przycisk z tekstem, ikoną lub tekstem i ikoną, który użytkownicy mogą kliknąć. Przykład dotyczący aplikacji Google Chat znajdziesz w sekcji Lista przycisków.
Aby ustawić obraz jako klikalny przycisk, określ właściwość
(nie Image
) i ustaw działanie ImageComponent
onClick
.
Zapis JSON |
---|
{ "text": string, "icon": { object ( |
Pola | |
---|---|
text
|
Tekst wyświetlany na przycisku. |
icon
|
Obraz ikony. Jeśli ustawione są zarówno |
color
|
Jeśli zasada jest skonfigurowana, przycisk jest wypełniany jednolitym kolorem tła, a kolor czcionki zmienia się, aby zachować kontrast z tłem. Na przykład jeśli ustawisz niebieskie tło, prawdopodobnie uzyskasz biały tekst. Jeśli zasada jest nieskonfigurowana, tło obrazu jest białe, a czcionka jest niebieska.
W przypadku czerwonego, zielonego i niebieskiego wartość każdego pola jest liczbą
Opcjonalnie ustaw
W przypadku Na przykład ten kolor oznacza półprzezroczystą czerwień:
|
onClick
|
Wymagany. Działanie, jakie ma zostać wykonane po kliknięciu przycisku przez użytkownika, na przykład otwarcie hiperlinku lub uruchomienie funkcji niestandardowej. |
disabled
|
Jeśli |
altText
|
Tekst alternatywny używany na potrzeby ułatwień dostępu. Ustaw opis, który poinformuje użytkowników, do czego służy dany przycisk. Jeśli na przykład przycisk otwiera hiperlink, możesz napisać: „Otwiera nową kartę przeglądarki i przechodzi do dokumentacji dla deweloperów Google Chat na stronie https://developers.google.com/chat”. |
Kolor
Reprezentuje kolor w przestrzeni kolorów RGBA. Ta prezentacja została zaprojektowana z myślą o uproszczeniu konwersji na różne wersje kolorystyczne i reprezentacje kolorów w różnych językach. Na przykład pola tej reprezentacji można w prosty sposób przekazać do konstruktora java.awt.Color
w języku Java; można je też w prosty sposób podać w metodzie +colorWithRed:green:blue:alpha
UIColor w iOS. Nie wymaga to żadnego nakładu pracy, a można je też łatwo sformatować jako ciąg CSS rgba()
w JavaScript.
Na tej stronie nie ma informacji o bezwzględnej przestrzeni kolorów, która powinna być użyta do interpretacji wartości RGB, np. sRGB, Adobe RGB, DCI-P3 i BT.2020. Domyślnie aplikacje powinny zakładać przestrzeń kolorów sRGB.
Gdy trzeba określić równość kolorów, implementacje (o ile nie udokumentowano inaczej), traktuj 2 kolory jako jednakowe, jeśli wszystkie ich wartości czerwonego, zielonego, niebieskiego i alfa różnią się maksymalnie o 1e-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 / OJ-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
|
Ilość czerwonego koloru jako wartość przedziału [0, 1]. |
green
|
Ilość koloru zielonego w kolorze jako wartość przedziału [0, 1]. |
blue
|
Ilość koloru niebieskiego jako wartość przedziału [0, 1]. |
alpha
|
Odsetek tego koloru, jaki ma zostać zastosowany do piksela. To oznacza, że ostateczny kolor w pikselach jest określany przez równanie:
Oznacza to, że wartość 1,0 odpowiada jednolitego koloru, a wartość 0,0 – całkowicie przezroczystemu. Stosuje komunikat opakowujący, a nie prostą wartość skalarną zmiennoprzecinkową, dzięki czemu można odróżnić wartość domyślną od nieustawionej wartości. Jeśli ten argument zostanie pominięty, obiekt koloru będzie renderowany jako jednolity kolor (jak gdyby wartość alfa została wyraźnie określona jako 1,0). |
SwitchControl
Przełącznik stylu lub pole wyboru w widżecie decoratedText
.
Obsługiwane tylko w widżecie decoratedText
.
Zapis JSON |
---|
{ "name": string, "value": string, "selected": boolean, "onChangeAction": { object ( |
Pola | |
---|---|
name
|
Nazwa, pod którą widżet przełączania jest identyfikowany w zdarzeniu wprowadzania danych w formularzu. Więcej informacji o pracy z danymi wejściowymi w formularzach znajdziesz w sekcji Odbieranie danych formularzy. |
value
|
Wartość wpisana przez użytkownika, zwrócona w ramach zdarzenia wprowadzania danych w formularzu. Więcej informacji o pracy z danymi wejściowymi w formularzach znajdziesz w sekcji Odbieranie danych formularzy. |
selected
|
Jeśli wybierzesz |
onChangeAction
|
Działanie wykonywane po zmianie stanu przełącznika – na przykład wybór funkcji, która ma zostać uruchomiona. |
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 trybu przełączania. |
CHECKBOX
|
Wycofano na rzecz
CHECK_BOX .
|
CHECK_BOX
|
Pole wyboru. |
Lista przycisków
Lista przycisków ułożonych w poziomie. Przykład dotyczący aplikacji Google Chat znajdziesz w sekcji Lista przycisków.
Zapis JSON |
---|
{
"buttons": [
{
object (
|
Pola | |
---|---|
buttons[]
|
Tablica przycisków. |
Pole tekstowe
Pole, w którym użytkownicy mogą wpisywać tekst. Obsługuje sugestie i działania dotyczące zmian. Przykład dotyczący aplikacji Google Chat znajdziesz w sekcji Wprowadzanie tekstu.
Aplikacje do obsługi czatu odbierają i mogą przetwarzać wartość wpisanego tekstu podczas zdarzeń wprowadzania danych w formularzu. Więcej informacji o pracy z danymi wejściowymi w formularzach znajdziesz w sekcji Odbieranie danych formularzy.
Jeśli chcesz zbierać niezdefiniowane lub abstrakcyjne dane o użytkownikach, korzystaj z wpisywania tekstu. Aby zbierać określone lub wyliczane dane od użytkowników, użyj widżetu SelectionInput
.
Zapis JSON |
---|
{ "name": string, "label": string, "hintText": string, "value": string, "type": enum ( |
Pola | |
---|---|
name
|
Nazwa, pod którą identyfikowany jest tekst w zdarzeniu wprowadzania danych w formularzu. Więcej informacji o pracy z danymi wejściowymi w formularzach znajdziesz w sekcji Odbieranie danych formularzy. |
label
|
Tekst wyświetlany nad polem do wprowadzania tekstu w interfejsie.
Wpisz tekst, który pomoże użytkownikowi wpisać informacje, których potrzebuje aplikacja. Jeśli na przykład pytasz kogoś o imię, a konkretnie imię i nazwisko tej osoby, wpisz
Wymagane, jeśli właściwość |
hintText
|
Tekst wyświetlany pod polem do wprowadzania tekstu, by pomóc użytkownikom, zachęcając ich do podania określonej wartości. Ten tekst jest zawsze widoczny.
Wymagane, jeśli właściwość |
value
|
Wartość wpisana przez użytkownika, zwrócona w ramach zdarzenia wprowadzania danych w formularzu. Więcej informacji o pracy z danymi wejściowymi w formularzach znajdziesz w sekcji Odbieranie danych formularzy. |
type
|
Sposób wyświetlania pola do wprowadzania tekstu w interfejsie. Na przykład pole jest jedno- czy wielowierszowe. |
onChangeAction
|
Co zrobić, gdy zmiana wprowadzona w polu wprowadzania tekstu Na przykład użytkownik dodał pole lub usunął tekst. Może to być na przykład uruchomienie funkcji niestandardowej lub otwarcie okna w Google Chat. |
initialSuggestions
|
Sugerowane wartości, które użytkownicy mogą wpisywać. Te wartości pojawiają się, gdy użytkownik kliknie w polu do wprowadzania tekstu. Gdy użytkownik wpisuje tekst, sugerowane wartości są dynamicznie filtrowane na podstawie wpisanego tekstu.
Na przykład w polu do wprowadzania tekstu w języku programowania możesz zobaczyć sugestie Javy, JavaScriptu, Pythona i C++. Gdy użytkownik zacznie wpisywać
Sugerowane wartości pomagają nakłaniać użytkowników do wpisywania wartości, które są zrozumiałe dla aplikacji. W odniesieniu do języka JavaScript niektórzy użytkownicy mogą wpisać
Jeśli jest określona, |
autoCompleteAction
|
Opcjonalnie. Określ działanie, które ma być wykonywane, gdy w polu do wprowadzania tekstu pojawią się sugestie użytkownikom, którzy z niego korzystają.
Jeśli nie określono inaczej, sugestie są ustawiane przez Jeśli określisz to ustawienie, aplikacja wykona określone tutaj działanie, na przykład uruchomi funkcję niestandardową. Ta funkcja jest obsługiwana przez dodatki do Google Workspace, ale nie przez aplikacje Google Chat. |
placeholderText
|
Tekst, który pojawia się w polu do wprowadzania tekstu, gdy to pole jest puste. Użyj tego tekstu, aby poprosić użytkowników o wpisanie wartości. Na przykład: Jest obsługiwane przez aplikacje Google Chat, ale nie przez dodatki do Google Workspace. |
Typ
Sposób wyświetlania pola do wprowadzania tekstu w interfejsie. Może to być na przykład pole do wprowadzania danych w jednym lub wielu wierszach.
Jeśli określono initialSuggestions
, 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ść wielu wierszy. |
Sugestie
Sugerowane wartości, które użytkownicy mogą wpisywać. Te wartości pojawiają się, gdy użytkownik kliknie w polu do wprowadzania tekstu. Gdy użytkownik wpisuje tekst, sugerowane wartości są dynamicznie filtrowane na podstawie wpisanego tekstu.
Na przykład w polu do wprowadzania tekstu w języku programowania możesz zobaczyć sugestie Javy, JavaScriptu, Pythona i C++. Gdy użytkownik zacznie wpisywać Jav
, pojawi się lista filtrów sugestii do wyświetlenia Java
i JavaScript
.
Sugerowane wartości pomagają nakłaniać użytkowników do wpisywania wartości, które są zrozumiałe dla aplikacji. W odniesieniu do języka JavaScript niektórzy użytkownicy mogą wpisać javascript
, a inni java script
. Sugerowanie typu JavaScript
może ujednolicić sposób interakcji użytkowników z aplikacją.
Jeśli jest określona, TextInput.type
ma zawsze wartość SINGLE_LINE
, nawet jeśli jest ustawiona na MULTIPLE_LINE
.
Zapis JSON |
---|
{
"items": [
{
object (
|
Pola | |
---|---|
items[]
|
Lista sugestii używanych do autouzupełniania rekomendacji w polach do wprowadzania tekstu. |
Element sugestii
Jedna sugerowana wartość, którą użytkownicy mogą wpisać w polu do wprowadzania tekstu.
Zapis JSON |
---|
{ // Union field |
Pola | |
---|---|
Pole sumy
|
|
text
|
Wartość sugerowanej wartości wejściowej w polu do wprowadzania tekstu. Jest to odpowiednik haseł wprowadzanych przez użytkowników. |
Dane wejściowe wyboru
Widżet, który tworzy jeden lub więcej elementów interfejsu, które użytkownicy mogą wybrać. Może to być na przykład menu lub pola wyboru. Za pomocą tego widżetu możesz zbierać dane, które można przewidzieć lub wyliczyć. Przykład dotyczący aplikacji Google Chat znajdziesz w sekcji Wprowadzanie wyboru.
Aplikacje do obsługi czatu mogą przetwarzać wartość elementów wybranych lub wprowadzonych przez użytkowników. Więcej informacji o pracy z danymi wejściowymi w formularzach znajdziesz w sekcji Odbieranie danych formularzy.
Aby zbierać niezdefiniowane lub abstrakcyjne dane o użytkownikach, używaj widżetu TextInput
.
Zapis JSON |
---|
{ "name": string, "label": string, "type": enum ( |
Pola | |
---|---|
name
|
Nazwa, która określa pole wyboru w zdarzeniu wprowadzania danych w formularzu. Więcej informacji o pracy z danymi wejściowymi w formularzach znajdziesz w sekcji Odbieranie danych formularzy. |
label
|
Tekst wyświetlany nad polem wyboru w interfejsie. Wpisz tekst, który pomoże użytkownikowi wpisać informacje, których potrzebuje aplikacja. Jeśli na przykład użytkownicy wybierają z menu pilne zgłoszenie dotyczące pracy, etykieta może mieć wartość „Pilne” lub „Wybierz pilność”. |
type
|
Typ elementów wyświetlanych użytkownikom w widżecie |
items[]
|
Tablica elementów do wyboru. Może to być na przykład tablica opcji lub pól wyboru. Obsługuje do 100 elementów. |
onChangeAction
|
Jeśli określisz tę wartość, formularz zostanie przesłany po zmianie wyboru. Jeśli go nie podasz, musisz określić osobny przycisk, który będzie służyć do przesyłania formularza. Więcej informacji o pracy z danymi wejściowymi w formularzach znajdziesz w sekcji Odbieranie danych formularzy. |
multiSelectMaxSelectedItems
|
W przypadku menu wielokrotnego wyboru jest to maksymalna liczba elementów, które użytkownik może wybrać. Minimalna wartość to 1 element. Jeśli nie określono inaczej, ustaw na 3 elementy.
|
multiSelectMinQueryLength
|
W przypadku menu wielokrotnego wyboru jest to liczba znaków tekstowych, które użytkownik wpisuje, zanim zapytanie zostanie automatycznie uzupełnione i wyświetlone na karcie sugerowane elementy. Jeśli nie określono inaczej, ustaw na 0 znaków w przypadku statycznych źródeł danych i 3 znaki w przypadku zewnętrznych źródeł danych.
|
Pole sumy multi_select_data_source . Tylko komunikatory. W przypadku menu wielokrotnego wyboru jest to typ źródła danych.
multi_select_data_source może być tylko jedną z tych wartości:
|
|
externalDataSource
|
Zewnętrzne źródło danych, np. relacyjna baza danych.
|
platformDataSource
|
Źródło danych z aplikacji hosta Google Workspace.
|
Typ wyboru
Format elementów, które użytkownicy mogą wybierać. Różne opcje obsługują różne typy interakcji. Na przykład użytkownicy mogą zaznaczyć wiele pól wyboru, ale tylko jeden element z menu.
Każde pole wyboru obsługuje jeden 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ć jedno lub więcej pól wyboru. |
RADIO_BUTTON
|
Zestaw przycisków. Użytkownicy mogą wybrać 1 przycisk. |
SWITCH
|
Zestaw przełączników. Użytkownicy mogą włączyć 1 lub więcej przełączników. |
DROPDOWN
|
Menu. Użytkownicy mogą wybrać jedną pozycję z menu. |
MULTI_SELECT
|
Jest obsługiwane przez aplikacje do obsługi czatu, ale nie przez dodatki do Google Workspace. Menu wielokrotnego wyboru na potrzeby danych statycznych lub dynamicznych. Na pasku menu użytkownicy wybierają co najmniej 1 element. Użytkownicy mogą też wpisywać wartości, aby wypełnić dane dynamiczne. Użytkownicy mogą na przykład zacząć wpisywać nazwę pokoju w Google Chat, a widżet automatycznie zasugeruje pokój. Aby wypełnić pozycje w menu wielokrotnego wyboru, możesz użyć jednego z tych typów źródeł danych:
Przykłady implementacji menu wielokrotnego wyboru znajdziesz na
stronie widżetów
|
Element wyboru
Element, który użytkownicy mogą wybrać w polu wyboru, np. pole wyboru lub przełącznik.
Zapis JSON |
---|
{ "text": string, "value": string, "selected": boolean, "startIconUri": string, "bottomText": string } |
Pola | |
---|---|
text
|
Tekst, który identyfikuje lub opisuje produkt użytkownikom. |
value
|
Wartość powiązana z tym elementem. Klient powinien go użyć jako wartości wejściowej formularza. Więcej informacji o pracy z danymi wejściowymi w formularzach znajdziesz w sekcji Odbieranie danych formularzy. |
selected
|
Określa, czy element jest wybrany domyślnie. Jeśli dane wejściowe wyboru akceptują tylko jedną wartość (np. przyciski opcji lub menu), ustaw to pole tylko dla 1 elementu. |
startIconUri
|
W przypadku menu wielokrotnego wyboru jest to adres URL ikony wyświetlany obok pola
|
bottomText
|
W przypadku menu wielokrotnego wyboru jest to opis tekstowy lub etykieta wyświetlana pod polem
|
Źródło danych platformy
Tylko komunikatory. W przypadku widżetu
, który używa menu wielokrotnego wyboru, są to dane z aplikacji hosta Google Workspace. Służy do wypełniania elementów w menu wielokrotnego wyboru.
SelectionInput
Zapis JSON |
---|
{ // Union field |
Pola | |
---|---|
Pole sumy data_source . Źródło danych.
data_source może być tylko jedną z tych wartości:
|
|
commonDataSource
|
W przypadku widżetu
|
hostAppDataSource
|
Źródło danych unikalne dla aplikacji hosta Google Workspace, takie jak e-maile z Gmaila, wydarzenia z Kalendarza Google czy wiadomości z Google Chat.
|
CommonDataSource
Tylko komunikatory. Źródło danych współdzielone przez wszystkie aplikacje hostujące Google Workspace.
Wartości w polu enum | |
---|---|
UNKNOWN
|
Wartość domyślna. Nie używaj. |
USER
|
Lista użytkowników podana przez aplikację hosta Google Workspace. Aby na przykład pozyskać użytkowników z Google Chat, użyj nazwy zasobu użytkownika. Format: użytkownicy/{użytkownik}
|
HostAppDataSourceMarkup
Tylko komunikatory. W przypadku widżetu
korzystającego z menu wielokrotnego wyboru jest to źródło danych z aplikacji hosta Google Workspace.
SelectionInput
Zapis JSON |
---|
{ // Union field |
Pola | |
---|---|
Pole sumy data_source . Aplikacja Google Workspace, która pozyskuje dane na potrzeby menu wielokrotnego wyboru.
data_source może mieć tylko jedną z tych wartości:
|
|
chatDataSource
|
Źródło danych to Google Chat.
|
Znacznik źródła danych klienta
Tylko komunikatory. W przypadku widżetu
, który używa menu wielokrotnego wyboru, jest to źródło danych z Google Chat. Może to być na przykład lista pokoi Google Chat, do których należy użytkownik.
SelectionInput
Zapis JSON |
---|
{ // Union field |
Pola | |
---|---|
Pole sumy source . Źródło danych Google Chat.
source może mieć tylko jedną z tych wartości:
|
|
spaceDataSource
|
Źródło danych reprezentujące pokój w Google Chat. Format: spacje/{spacja}
|
Źródło danych Kosmicznych
Źródło danych reprezentujące pokój w Google Chat.
Format: spacje/{spacja}
Zapis JSON |
---|
{ "defaultToCurrentSpace": boolean } |
Pola | |
---|---|
defaultToCurrentSpace
|
Gdy
|
DateTimePicker
Umożliwia użytkownikom wpisywanie daty, godziny lub zarówno daty, jak i godziny. Przykład dotyczący aplikacji Google Chat znajdziesz w sekcji Selektor daty i godziny.
Użytkownicy mogą wprowadzić tekst lub wybrać datę i godzinę przy użyciu selektora. Jeśli użytkownik wprowadzi nieprawidłową datę lub godzinę, selektor wyświetli komunikat o błędzie i wyświetli prośbę o poprawne wpisanie informacji.
Zapis JSON |
---|
{ "name": string, "label": string, "type": enum ( |
Pola | |
---|---|
name
|
Nazwa, dzięki której Więcej informacji o pracy z danymi wejściowymi w formularzach znajdziesz w sekcji Odbieranie danych formularzy. |
label
|
Tekst zachęcający użytkowników do wpisania daty, godziny lub daty i godziny. Jeśli na przykład użytkownicy planują spotkanie, użyj etykiety |
type
|
Określa, czy widżet obsługuje wpisywanie daty, godziny czy daty i godziny. |
valueMsEpoch
|
Wartość domyślna wyświetlana w widżecie w milisekundach od czasu uniksowego.
Określ wartość na podstawie typu selektora (
|
timezoneOffsetDate
|
Liczba określająca przesunięcie strefy czasowej względem UTC (w minutach). Jeśli zasada jest skonfigurowana, |
onChangeAction
|
Wywoływane, gdy użytkownik kliknie Zapisz lub Wyczyść w interfejsie |
Typ elementu DateTimePicker
Format daty i godziny w widżecie DateTimePicker
. Określa, czy użytkownicy mogą wpisać datę, godzinę czy datę i godzinę.
Wartości w polu enum | |
---|---|
DATE_AND_TIME
|
Użytkownicy wpisują datę i godzinę. |
DATE_ONLY
|
Użytkownicy wpisują datę. |
TIME_ONLY
|
Użytkownicy wpisują godzinę. |
Separator
Ten typ nie ma żadnych pól.
Wyświetla separację między widżetami w postaci linii poziomej. Przykład dotyczący aplikacji Google Chat znajdziesz w sekcji Rozgraniczenie.
Na przykład taki kod JSON tworzy separator:
"divider": {}
Siatka
Wyświetla siatkę z kolekcją elementów. Elementy mogą zawierać tylko tekst lub obrazy. Jeśli chcesz dodać kolumny elastyczne lub dodać coś więcej niż tekst lub obrazy, użyj właściwości
. Przykład dotyczący aplikacji Google Chat znajdziesz w sekcji Siatka.
Columns
Siatka obsługuje dowolną liczbę kolumn i elementów. Liczba wierszy jest określana przez liczbę elementów podzielonych przez kolumny. Siatka z 10 elementami i 2 kolumnami ma 5 wierszy. Siatka z 11 elementami i 2 kolumnami ma 6 wierszy.
Na przykład ten kod JSON tworzy siatkę z 2 kolumnami z 1 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 ( |
Pola | |
---|---|
title
|
Tekst wyświetlany w nagłówku siatki. |
items[]
|
Elementy do wyświetlenia w siatce. |
borderStyle
|
Styl obramowania, który ma być stosowany do każdego elementu siatki. |
columnCount
|
Liczba kolumn wyświetlanych w siatce. Jeśli to pole nie zostanie określone, zostanie użyta wartość domyślna, a wartość ta będzie różna w zależności od miejsca, w którym wyświetlana jest siatka (okno dialogowe lub towarzyszące). |
onClick
|
To wywołanie zwrotne jest używane ponownie przez poszczególne elementy siatki, ale z identyfikatorem i indeksem elementu na liście elementów dodanymi do parametrów wywołania zwrotnego. |
Element siatki
Reprezentuje element w układzie siatki. Elementy mogą zawierać tekst, obraz lub zarówno tekst, jak i obraz.
Zapis JSON |
---|
{ "id": string, "image": { object ( |
Pola | |
---|---|
id
|
Określony przez użytkownika identyfikator tego elementu siatki. Ten identyfikator jest zwracany w parametrach wywołania zwrotnego |
image
|
Obraz wyświetlany w elemencie siatki. |
title
|
Tytuł elementu siatki. |
subtitle
|
Podtytuł elementu siatki. |
layout
|
Układ, który ma być używany dla elementu siatki. |
Komponent Obraz
Reprezentuje obraz.
Zapis JSON |
---|
{ "imageUri": string, "altText": string, "cropStyle": { object ( |
Pola | |
---|---|
imageUri
|
Adres URL obrazu. |
altText
|
Etykieta ułatwień dostępu do obrazu. |
cropStyle
|
Styl przycinania, który ma być stosowany do obrazu. |
borderStyle
|
Styl obramowania, który ma być zastosowany do obrazu. |
StylCropStyle
Reprezentuje styl przycięcia obrazu zastosowany do obrazu.
Oto jak na przykład zastosować format obrazu 16:9:
cropStyle {
"type": "RECTANGLE_CUSTOM",
"aspectRatio": 16/9
}
Zapis JSON |
---|
{
"type": enum (
|
Pola | |
---|---|
type
|
Typ przycięcia. |
aspectRatio
|
Format obrazu używany przy przycięciu Oto jak na przykład zastosować format obrazu 16:9:
|
TypKapsowania Obrazu
Reprezentuje styl przycięcia obrazu zastosowany do obrazu.
Wartości w polu enum | |
---|---|
IMAGE_CROP_TYPE_UNSPECIFIED
|
Nie używaj. Nie określono. |
SQUARE
|
Wartość domyślna. Stosuje przycięcie kwadratowe. |
CIRCLE
|
Stosuje przycięcie okrągłe. |
RECTANGLE_CUSTOM
|
Pozwala zastosować prostokątne przycięcie o niestandardowym współczynniku proporcji. Ustaw niestandardowy format obrazu za pomocą aspectRatio .
|
RECTANGLE_4_3
|
Pozwala zastosować prostokątne przycięcie o współczynniku proporcji 4:3. |
Styl obramowania
Opcje stylu obramowania karty lub widżetu, w tym typ i kolor obramowania.
Zapis JSON |
---|
{ "type": enum ( |
Pola | |
---|---|
type
|
Typ obramowania. |
strokeColor
|
Kolory, które mają być używane, gdy typ to |
cornerRadius
|
Promień narożnika obramowania. |
Typ obramowania
Reprezentuje typy obramowań zastosowane do widżetów.
Wartości w polu enum | |
---|---|
BORDER_TYPE_UNSPECIFIED
|
Nie używaj. Nie określono. |
NO_BORDER
|
Wartość domyślna. Brak obramowania. |
STROKE
|
Outline. |
Układ elementu siatki
Reprezentuje różne opcje układu dostępne dla elementu siatki.
Wartości w polu enum | |
---|---|
GRID_ITEM_LAYOUT_UNSPECIFIED
|
Nie używaj. Nie określono. |
TEXT_BELOW
|
Tytuł i podtytuł są wyświetlane pod obrazem elementu siatki. |
TEXT_ABOVE
|
Tytuł i podtytuł są wyświetlane nad obrazem elementu siatki. |
Kolumny
Widżet Columns
wyświetla maksymalnie 2 kolumny w komunikacie na karcie lub w oknie. Do każdej kolumny możesz dodawać widżety. Widżety wyświetlają się w określonej kolejności. Przykład dotyczący aplikacji Google Chat znajdziesz w sekcji Kolumny.
Wysokość każdej kolumny jest określana na podstawie wyższej kolumny. Jeśli np. pierwsza kolumna jest wyższa od drugiej, obie kolumny mają wysokość pierwszej kolumny. Każda kolumna może zawierać różną liczbę widżetów, więc nie możesz definiować wierszy ani wyrównywać widżetów między kolumnami.
Kolumny są wyświetlane obok siebie. Za pomocą pola HorizontalSizeStyle
możesz dostosować szerokość każdej kolumny. Jeśli szerokość ekranu użytkownika jest zbyt mała, druga kolumna zawija się poniżej pierwszej:
- Na stronach internetowych druga kolumna zawija się, gdy szerokość ekranu jest mniejsza lub równa 480 pikseli.
- Na urządzeniach z iOS druga kolumna zawija się, gdy szerokość ekranu nie przekracza 300 punktów.
- Na urządzeniach z Androidem druga kolumna zawija się, gdy szerokość ekranu jest mniejsza lub równa 320 dp.
Aby uwzględnić więcej niż 2 kolumny lub użyć wierszy, użyj widżetu
.
Grid
Jest obsługiwane przez aplikacje do obsługi czatu, ale nie przez dodatki do Google Workspace.
Zapis JSON |
---|
{
"columnItems": [
{
object (
|
Pola | |
---|---|
columnItems[]
|
Tablica kolumn. Na karcie lub w oknie możesz umieścić maksymalnie 2 kolumny. |
Kolumna
Kolumna.
Zapis JSON |
---|
{ "horizontalSizeStyle": enum ( |
Pola | |
---|---|
horizontalSizeStyle
|
Określa sposób wypełniania kolumny na szerokość karty. |
horizontalAlignment
|
Określa, czy widżety mają być wyrównywane do lewej, do prawej czy do środka kolumny. |
verticalAlignment
|
Określa, czy widżety mają być wyrównywane u góry, na dole czy do środka kolumny. |
widgets[]
|
Tablica widżetów w kolumnie. Widżety są wyświetlane w określonej kolejności. |
Styl rozmiaru poziomego
Określa sposób wypełniania kolumny na szerokość karty. Szerokość każdej kolumny zależy od szerokości HorizontalSizeStyle
i szerokości widżetów w kolumnie.
Wartości w polu enum | |
---|---|
HORIZONTAL_SIZE_STYLE_UNSPECIFIED
|
Nie używaj. Nie określono. |
FILL_AVAILABLE_SPACE
|
Wartość domyślna. Kolumna wypełnia dostępną przestrzeń, maksymalnie 70% szerokości karty. Jeśli obie kolumny mają wartość FILL_AVAILABLE_SPACE , każda z nich zajmuje 50% miejsca.
|
FILL_MINIMUM_SPACE
|
Kolumna wypełnia najmniejszą możliwą ilość miejsca i nie może przekraczać 30% szerokości karty. |
Wyrównanie w poziomie
Określa, czy widżety mają być wyrównywane do lewej, do prawej czy do środka kolumny.
Wartości w polu enum | |
---|---|
HORIZONTAL_ALIGNMENT_UNSPECIFIED
|
Nie używaj. Nie określono. |
START
|
Wartość domyślna. Wyrównuje widżety do pozycji początkowej kolumny. W przypadku układów od lewej do prawej wyrównuje je do lewej. W przypadku układów od prawej do lewej wyrównuje się do prawej. |
CENTER
|
Wyrównuje widżety do środka kolumny. |
END
|
Wyrównuje widżety do pozycji końcowej kolumny. W przypadku układów od lewej do prawej wyrównuje widżety do prawej. W przypadku układów od prawej do lewej wyrównuje widżety do lewej. |
Wyrównanie w pionie
Określa, czy widżety mają być wyrównywane u góry, na dole czy do środka kolumny.
Wartości w polu enum | |
---|---|
VERTICAL_ALIGNMENT_UNSPECIFIED
|
Nie używaj. Nie określono. |
CENTER
|
Wartość domyślna. Wyrównuje widżety względem środka kolumny. |
TOP
|
Wyrównuje widżety do góry kolumny. |
BOTTOM
|
Wyrównuje widżety do dołu kolumny. |
Widżety
Obsługiwane widżety, które możesz uwzględnić w kolumnie.
Zapis JSON |
---|
{ // Union field |
Pola | |
---|---|
Pole sumy
|
|
textParagraph
|
Widżet |
image
|
Widżet |
decoratedText
|
Widżet |
buttonList
|
Widżet |
textInput
|
Widżet |
selectionInput
|
Widżet |
dateTimePicker
|
Widżet |
Styl podziału
Styl separatora karty. Obecnie używany tylko do rozdzielania sekcji kart.
Wartości w polu enum | |
---|---|
DIVIDER_STYLE_UNSPECIFIED
|
Nie używaj. Nie określono. |
SOLID_DIVIDER
|
Opcja domyślna. Wyznacz jednolity separator między sekcjami. |
NO_DIVIDER
|
Jeśli zasada jest skonfigurowana, separatory między sekcjami nie są renderowane. |
CardAction
Działanie związane z kartą to działanie powiązane z kartą. Na przykład karta faktury może zawierać takie działania jak usunięcie faktury, jej przesłanie e-mailem czy otwarcie faktury w przeglądarce.
Nieobsługiwane przez aplikacje do obsługi czatu.
Zapis JSON |
---|
{
"actionLabel": string,
"onClick": {
object (
|
Pola | |
---|---|
actionLabel
|
Etykieta wyświetlana jako pozycja menu czynności. |
onClick
|
Działanie |
Styl wyświetlania
W Dodatkach do Google Workspace określa sposób wyświetlania karty.
Nieobsługiwane przez aplikacje do obsługi czatu.
Wartości w polu enum | |
---|---|
DISPLAY_STYLE_UNSPECIFIED
|
Nie używaj. Nie określono. |
PEEK
|
Nagłówek karty pojawia się 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 kart. Jeśli karta nie ma nagłówka, zamiast niego używany jest wygenerowany nagłówek. |
REPLACE
|
Wartość domyślna. Karta wyświetla się po zastąpieniu widoku górnej karty w stosie kart. |