Cards v2

Kart

Kartlar tanımlı bir düzeni, düğmeler gibi etkileşimli kullanıcı arayüzü öğelerini ve resimler gibi rich media'yı destekler. Ayrıntılı bilgi sunmak, kullanıcılardan bilgi toplamak ve kullanıcıları sonraki adımı atmaya yönlendirmek için kartları kullanın.

Google Chat'te kartlar birkaç yerde görünür:

• Bağımsız mesajlar olarak.
• Kısa mesajın hemen altında, kısa mesajın altında bulunur.
• iletişim kutusu olarak.

Aşağıdaki örnek JSON, şunları içeren bir "iletişim kartı" oluşturur:

• Kişinin adı, iş unvanı, avatar resmini içeren bir başlık.
• İletişim bilgileri (biçimlendirilmiş metin dahil) bulunan bir bölümdür.
• Kullanıcıların kişiyi paylaşmak veya daha fazla ya da daha az bilgi görmek için tıklayabilecekleri düğmeler.

{
  "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": "[e-mail]",
                }
              },
              {
                "decoratedText": {
                  "startIcon": {
                    "knownIcon": "PERSON",
                  },
                  "text": "<font color=\"#80e27e\">Online</font>",
                },
              },
              {
                "decoratedText": {
                  "startIcon": {
                    "knownIcon": "PHONE",
                  },
                  "text": "[phone]",
                }
              },
              {
                "buttonList": {
                  "buttons": [
                    {
                      "text": "Share",
                      "onClick": {
                        "openLink": {
                          "url": "https://example.com/share",
                        }
                      }
                    },
                    {
                      "text": "Edit",
                      "onClick": {
                        "action": {
                          "function": "goToView",
                          "parameters": [
                            {
                              "key": "viewType",
                              "value": "EDIT",
                            }
                          ],
                        }
                      }
                    },
                  ],
                }
              },
            ],
          },
        ],
      },
    }
  ],
}

JSON gösterimi
{ "header": { object (CardHeader) }, "sections": [ { object (Section) } ], "cardActions": [ { object (CardAction) } ], "name": string, "fixedFooter": { object (CardFixedFooter) }, "displayStyle": enum (DisplayStyle), "peekCardHeader": { object (CardHeader) } }

Alanlar
header	object ( CardHeader ) Kartın başlığı. Üstbilgiler genellikle baştaki resim ve başlıktan oluşur. Üstbilgiler her zaman kartın üst kısmında gösterilir.
sections[]	object ( Section ) Widget koleksiyonunu içerir. Her bölümün ayrı, isteğe bağlı bir başlığı vardır. Bölümler, bir çizgi ayırıcı ile görsel olarak ayrılır.
cardActions[]	object ( CardAction ) Kartın eylemleri. İşlemler, kartın araç çubuğu menüsüne eklenir. Chat uygulama kartlarında araç çubuğu olmadığından cardActions[] Chat uygulamaları tarafından desteklenmez. Örneğin, aşağıdaki JSON'da Ayarlar ve Geri Bildirim Gönder seçeneklerini içeren bir kart işlemi menüsü oluşturulur: "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 Kartın adı. Kartlı gezinmede kart tanımlayıcısı olarak kullanılır. Chat uygulamaları kartta gezinmeyi desteklemediği için bu alanı yoksayar.
fixedFooter	object ( CardFixedFooter ) Bu kartın altında gösterilen sabit altbilgi. fixedFooter öğesini primaryButton veya secondaryButton belirtmeden ayarlamak bir hataya neden olur. Chat uygulamaları iletişim kutularında fixedFooter destekler, ancak kart mesajlarında destekler. .
displayStyle	enum ( DisplayStyle ) Google Workspace eklentilerinde, peekCardHeader ürününün görüntüleme özelliklerini ayarlar. Chat uygulamaları tarafından desteklenmez.
peekCardHeader	object ( CardHeader ) Bağlamsal içerik gösterilirken göz atma kartı yer tutucu görevi görür, böylece kullanıcı ana sayfa kartları ve içeriğe dayalı kartlar arasında gezinebilir. Chat uygulamaları tarafından desteklenmez.

Kart Başlığı

Kart başlığını gösterir.

JSON gösterimi
{ "title": string, "subtitle": string, "imageType": enum (ImageType), "imageUrl": string, "imageAltText": string }

Alanlar
title	string Zorunlu. Kart başlığının başlığı. Başlık sabit bir yüksekliğe sahip: Hem başlık hem de alt başlık belirtilirse her biri bir satır alır. Yalnızca başlık belirtilirse her iki satırı da kaplar.
subtitle	string Kart başlığının alt başlığı. Belirtilirse title altında kendi satırında görünür.
imageType	enum ( ImageType ) Resmi kırpmak için kullanılan şekil.
imageUrl	string Kart başlığındaki resmin HTTPS URL'si.
imageAltText	string Erişilebilirlik için kullanılan bu resmin alternatif metni.

ResimTürü

Resmi kırpmak için kullanılan şekil.

Sıralamalar
SQUARE	Varsayılan değer. Resme kare maske ekler. Örneğin, 4x3 boyutunda bir resim 3x3 olur.
CIRCLE	Görsele dairesel bir maske uygular. Örneğin, 4x3 boyutunda bir resim çapı 3 olan bir daire haline gelir.

Bölüm

Bölüm, belirtilen sırayla dikey olarak oluşturulan bir widget koleksiyonunu içerir.

JSON gösterimi
{ "header": string, "widgets": [ { object (Widget) } ], "collapsible": boolean, "uncollapsibleWidgetsCount": integer }

Alanlar
header	string Bölümün üst kısmında görünen metin. Basit HTML biçimli metni destekler.
widgets[]	object ( Widget ) Bölümdeki tüm widget'lar. En az 1 widget içermelidir.
collapsible	boolean Bu bölümün daraltılabilir olup olmadığını belirtir. Daraltılabilir bölümler, widget'ların bazılarını veya tümünü gizler ancak kullanıcılar,{101} <br class="ph-0-0">{101} Daha fazla göster{101} <br class="ph" seçeneğini tıklayarak bölümü genişleterek gizli widget'ları ortaya çıkarabilir -1-1">{101} . Kullanıcılar, Daha az göster seçeneğini tıklayarak widget'ları tekrar gizleyebilir. Hangi widget'ların gizlendiğini belirlemek için uncollapsibleWidgetsCount özelliğini belirtin.
uncollapsibleWidgetsCount	integer Bir bölüm daraltıldığında bile görünür kalan daraltılamayan widget'ların sayısı. Örneğin, bir bölümde beş widget varsa ve uncollapsibleWidgetsCount 2 olarak ayarlandığında, ilk iki widget her zaman gösterilir ve son üç widget varsayılan olarak daraltılır. uncollapsibleWidgetsCount yalnızca collapsible true olduğunda dikkate alınır.

Widget

Her kart widget'lardan oluşur.

Widget; metin, resim, düğme ve diğer nesne türlerinden birini temsil edebilen birleşik bir nesnedir.

JSON gösterimi

{ // 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. }

Alanlar
Birlik alanı data . Bir widget yalnızca aşağıdaki öğelerden birine sahip olabilir. Daha fazla öğe görüntülemek için birden fazla widget alanı kullanabilirsiniz. data aşağıdakilerden yalnızca biri olabilir:
textParagraph	object ( TextParagraph ) Bir metin paragrafı görüntüler. Basit HTML biçimli metni destekler. Örneğin, aşağıdaki JSON kalın metin oluşturur: "textParagraph": { "text": " <b>bold text</b>" }
image	object ( Image ) Bir resim gösterir. Örneğin, aşağıdaki JSON alternatif metinle birlikte bir resim oluşturur: "image": { "imageUrl": "https://developers.google.com/chat/images/quickstart-app-avatar.png", "altText": "Chat app avatar" }
decoratedText	object ( DecoratedText ) Süslü bir metin öğesi gösterir. Örneğin, aşağıdaki JSON, e-posta adresini gösteren süslü bir metin widget'ı oluşturur: "decoratedText": { "icon": { "knownIcon": "EMAIL" }, "topLabel": "Email Address", "text": "[e-mail]", "bottomLabel": "This is a new Email address!", "switchControl": { "name": "has_send_welcome_email_to_sasha", "selected": false, "controlType": "CHECKBOX" } }
buttonList	object ( ButtonList ) Düğme listesi. Örneğin, aşağıdaki JSON iki düğme oluşturur. Bunlardan birincisi mavi renkli bir metin düğmesi, ikincisi ise bağlantıyı açan resim düğmesidir: "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 ) Kullanıcıların metin yazabileceği bir metin kutusu gösterir. Örneğin, aşağıdaki JSON bir e-posta adresi için metin girişi oluşturur: "textInput": { "name": "mailing_address", "label": "Mailing Address" } Bir başka örnek olarak aşağıdaki JSON, statik önerilerle bir programlama dili için metin girişi oluşturur: "textInput": { "name": "preferred_programing_language", "label": "Preferred Language", "initialSuggestions": { "items": [ { "text": "C++" }, { "text": "Java" }, { "text": "JavaScript" }, { "text": "Python" } ] } }
selectionInput	object ( SelectionInput ) Kullanıcıların öğeleri seçmesine izin veren bir seçim kontrolü görüntüler. Seçim kontrolleri onay kutuları, radyo düğmeleri, anahtarlar veya açılır menüler olabilir. Örneğin, aşağıdaki JSON kullanıcıların bir boyut seçmesine olanak tanıyan bir açılır menü oluşturur: "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 ) Tarih, saat veya tarih ve saat için bir seçim/giriş widget'ı görüntüler. Chat uygulamaları tarafından desteklenmez. Chat uygulamalarında destek yakında başlayacak. Örneğin, aşağıdaki JSON randevu planlamak için bir tarih ve saat seçici oluşturur: "dateTimePicker": { "name": "appointment_time", "label": "Book your appointment at:", "type": "DATE_AND_TIME", "valueMsEpoch": "796435200000" }
divider	object ( Divider ) Widget'lar arasında yatay çizgi ayırıcısı gösterir. Örneğin, aşağıdaki JSON bir ayırıcı oluşturur: "divider": { }
grid	object ( Grid ) Bir öğe koleksiyonunun bulunduğu ızgarayı gösterir. Izgara, herhangi bir sayıda sütunu ve öğeyi destekler. Satır sayısı, öğe sayısının üst sınırlarının sütun sayısına bölünmesiyle belirlenir. 10 öğeli ve 2 sütunlu bir ızgaranın 5 satırı vardır. 11 öğeli ve 2 sütunlu bir ızgarada 6 satır vardır. Örneğin, aşağıdaki JSON tek bir öğe içeren 2 sütunlu bir ızgara oluşturur: "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" } } }

MetinParagraf

Biçimlendirmeyi destekleyen bir paragraf. Ayrıntılar için Metin biçimlendirme bölümüne bakın.

JSON gösterimi
{ "text": string }

Alanlar
text	string Widget'ta gösterilen metin.

Resim

URL ile belirtilen ve onClick işlemi olabilecek bir resim.

JSON gösterimi
{ "imageUrl": string, "onClick": { object (OnClick) }, "altText": string }

Alanlar
imageUrl	string Resmi barındıran https URL'si. Örneğin: https://developers.google.com/chat/images/quickstart-app-avatar.png
onClick	object ( OnClick ) Kullanıcı resmi tıkladığında, bu işlem tetiklenir.
altText	string Erişilebilirlik için kullanılan bu resmin alternatif metni.

Tıklama

Kullanıcılar, karttaki etkileşimli bir öğeyi (ör. bir düğmeyi) tıkladıklarında nasıl yanıt vereceklerini temsil eder.

JSON gösterimi
{ // 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. }

Alanlar
Birlik alanı data . data aşağıdakilerden yalnızca biri olabilir:
action	object ( Action ) Belirtilirse bu onClick tarafından bir işlem tetiklenir.
openLink	object ( OpenLink ) Belirtilirse bu onClick , bir açık bağlantı işlemi tetikler.
openDynamicLinkAction	object ( Action ) Eklenti, bağlantının açılması gerektiğinde bu işlemi tetikler. Bu, bağlantıyı almak için sunucuyla iletişim kurulması gerektiği için yukarıdaki openLink 'den farklıdır. Dolayısıyla, web istemcisinin açık bağlantı işlemi yanıtı döndürülmeden önce bazı hazırlık çalışmaları yapması gerekir.
card	object ( Card ) Belirtilirse, tıklama işleminden sonra kart yığınına yeni bir kart aktarılır. Google Workspace eklentileri tarafından desteklenir ancak Chat uygulamaları tarafından desteklenmez.

İşlem

Form gönderildiğinde davranışı açıklayan bir işlem. Örneğin, formu işlemek için Apps Komut Dosyası çağırılabilir. İşlem tetiklenirse form değerleri sunucuya gönderilir.

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

Alanlar
function	string Kapsayıcı öğe tıklandığında veya alt özellik etkinleştirildiğinde çağrılan özel işlev. Örneğin, Etkileşimli kart oluşturma bölümüne göz atın.
parameters[]	object ( ActionParameter ) İşlem parametrelerinin listesi.
loadIndicator	enum ( LoadIndicator ) Harekete geçirici mesaj gösterilirken işlemin gösterdiği yükleme göstergesini belirtir.
persistValues	boolean Form değerlerinin işlemden sonra da devam edip etmediğini belirtir. Varsayılan değer: false . true değeri belirlenirse form değerleri işlem tetiklendikten sonra da kalır. Kullanıcının işlem sırasında değişiklik yapmasına izin vermek için LoadEndator değerini NONE olarak ayarlayın. Chat uygulamalarındaki kart mesajları için işlemin Yanıt Türü'nü UPDATE_MESSAGE olarak ayarlamanız ve işlemi içeren karttaki cardId cardId özelliğini kullanmanız gerekir. false değeri belirlenirse işlem tetiklendiğinde form değerleri temizlenir. İşlem sırasında kullanıcının değişiklik yapmasını engellemek için LoadEndator değerini SPINNER olarak ayarlayın.
interaction	enum ( Interaction ) İsteğe bağlı. İletişim kutusu açılırken gerekir. Bir kullanıcının etkileşimine yanıt olarak yapılması gerekenler (ör. bir kullanıcı, kart mesajındaki düğmeyi tıkladığında). Belirtilmemesi halinde uygulama, normal şekilde bir action işlemi (bağlantı açma veya bir işlevi çalıştırma gibi) çalıştırarak yanıt verir. Uygulama, interaction belirterek özel etkileşimli şekillerde yanıt verebilir. Örneğin, interaction öğesini OPEN_DIALOG olarak ayarladığınızda, uygulama bir iletişim kutusu açabilir. Belirtildiğinde yükleme göstergesi gösterilmez. Chat uygulamaları tarafından desteklenir ancak Google Workspace eklentileri tarafından desteklenmez. Bir eklenti için belirtilirse, kartın tamamı çıkarılır ve istemcide hiçbir şey gösterilmez.

İşlemParametresi

İşlem yöntemi çağrıldığında verilecek dize parametrelerinin listesi. Örneğin, şu üç erteleme düğmesini kullanabilirsiniz: "ertele", "1 gün ertele", "ertesi hafta ertele". Dize parametreleri listesinde erteleme türünü ve erteleme zamanını ileterek işlem yöntemi = pause() işlemini kullanabilirsiniz.

Daha fazla bilgi için CommonEventObject bölümüne bakın.

JSON gösterimi
{ "key": string, "value": string }

Alanlar
key	string İşlem komut dosyası için parametrenin adı.
value	string Parametrenin değeri.

Yük Göstergesi

Harekete geçirici mesaj gösterilirken işlemin gösterdiği yükleme göstergesini belirtir.

Sıralamalar
SPINNER	İçeriğin yüklendiğini belirtmek için bir döner simge görüntüler.
NONE	Hiçbir şey gösterilmez.

Etkileşim

İsteğe bağlı. İletişim kutusu açılırken gerekir.

Bir kullanıcının etkileşimine yanıt olarak yapılması gerekenler (ör. bir kullanıcı, kart mesajındaki düğmeyi tıkladığında).

Belirtilmemesi halinde uygulama, normal şekilde bir action işlemi (bağlantı açma veya bir işlevi çalıştırma gibi) çalıştırarak yanıt verir.

Uygulama, interaction belirterek özel etkileşimli şekillerde yanıt verebilir. Örneğin, interaction öğesini OPEN_DIALOG olarak ayarladığınızda, uygulama bir iletişim kutusu açabilir.

Belirtildiğinde yükleme göstergesi gösterilmez.

Chat uygulamaları tarafından desteklenir ancak Google Workspace eklentileri tarafından desteklenmez. Bir eklenti için belirtilirse, kartın tamamı çıkarılır ve istemcide hiçbir şey gösterilmez.

Sıralamalar
INTERACTION_UNSPECIFIED	Varsayılan değer. action normal şekilde çalışır.
OPEN_DIALOG	Chat uygulamalarının kullanıcılarla etkileşim kurmak için kullandığı, pencereye dayalı, kart tabanlı bir arayüz olan iletişim kutusunu açar. Yalnızca kart mesajlarındaki düğme tıklamalarına yanıt olarak Chat uygulamaları tarafından desteklenir. Google Workspace eklentileri tarafından desteklenmez. Bir eklenti için belirtilirse, kartın tamamı çıkarılır ve istemcide hiçbir şey gösterilmez.

OpenLink

Bir köprünün açıldığı onClick etkinliğini temsil eder.

JSON gösterimi
{ "url": string, "openAs": enum (OpenAs), "onClose": enum (OnClose) }

Alanlar
url	string Açılacak URL.
openAs	enum ( OpenAs ) Bağlantı nasıl açılır? Chat uygulamaları tarafından desteklenmez.
onClose	enum ( OnClose ) İstemcinin bir bağlantıyı açtıktan sonra unutup unutmadığı veya pencere kapanıncaya kadar gözlemleyip gözlemlemeyeceği. Chat uygulamaları tarafından desteklenmez.

OpenA'lar

Bir OnClick tarafından bağlantı açıldığında, istemci bu bağlantıyı tam boyutlu pencere (istemci tarafından kullanılan çerçeve ise) veya yer paylaşımı (pop-up gibi) olarak açabilir. Uygulama, istemci platformu özelliklerine bağlıdır ve müşteri desteklemiyorsa seçilen değer yoksayılabilir. FULL_SIZE tüm istemciler tarafından destekleniyor.

Google Workspace eklentileri tarafından desteklenir ancak Chat uygulamaları tarafından desteklenmez.

Sıralamalar
FULL_SIZE	Bağlantı, tam boyut penceresi olarak açılır (istemci tarafından kullanılan çerçeve buysa).
OVERLAY	Bağlantı, pop-up gibi bir yer paylaşımı olarak açılır.

Kapanış

OnClick işlemi tarafından açılan bir bağlantı kapatıldığında istemcinin yaptığı işlem.

Kullanım, istemci platformu özelliklerine bağlıdır. Örneğin, bir web tarayıcısı, OnClose işleyicisine sahip bir pop-up pencerede bağlantı açabilir.

Hem OnOpen hem de OnClose işleyicisi ayarlanmışsa ve istemci platformu her iki değeri de destekleyemiyorsa OnClose öncelikli olur.

Google Workspace eklentileri tarafından desteklenir ancak Chat uygulamaları tarafından desteklenmez.

Sıralamalar
NOTHING	Varsayılan değer. Kart yeniden yüklenmez; hiçbir şey olmaz.
RELOAD	Alt pencere kapatıldıktan sonra kartı yeniden yükler. OpenAs.OVERLAY ile birlikte kullanıldığında alt pencere, kalıcı bir iletişim kutusu görevi görür ve alt pencere kapatılana kadar üst kart engellenir.

Metin

İsteğe bağlı süslemelerle metnin, metnin üzerinde veya altında bir etiket, metnin önünde bir simge, bir seçim widget'ı veya metnin ardından gelen bir düğme gibi öğeleri gösteren bir widget.

JSON gösterimi
{ "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. }

Alanlar
icon (deprecated)	object ( Icon ) Bu öğe kullanımdan kaldırıldı! startIcon lehine kullanımdan kaldırıldı.
startIcon	object ( Icon ) Metnin önünde gösterilen simge.
topLabel	string text ifadesinin üzerinde görünen metin . Her zaman kırpılır.
text	string Zorunlu. Birincil metin. Basit biçimlendirmeyi destekler. Biçimlendirme ayrıntıları için Metin biçimlendirme bölümüne bakın.
wrapText	boolean Metin kaydırma ayarı. true metni ise sarmalanır ve birden fazla satırda gösterilir. Aksi takdirde metin kısaltılır. Yalnızca text için geçerlidir, topLabel ve bottomLabel için geçerli değildir.
bottomLabel	string Metnin altında görünen metin text . Her zaman kırpılır.
onClick	object ( OnClick ) Kullanıcılar topLabel veya bottomLabel öğesini tıkladığında bu işlem tetiklenir.
Birlik alanı control . decoratedText widget'ında, metnin sağ tarafında görünen bir düğme, anahtar, onay kutusu veya resim. control aşağıdakilerden yalnızca biri olabilir:
button	object ( Button ) Bir işlemi tetiklemek için tıklanabilen bir düğme.
switchControl	object ( SwitchControl ) Bir anahtar widget'ı, durumunu değiştirmek ve bir işlemi tetiklemek için tıklanabilir.
endIcon	object ( Icon ) Metinden sonra bir simge görüntülenir. Yerleşik ve özel simgeleri destekler.

Simge

Karttaki bir widget'ta gösterilen simge.

Yerleşik ve özel simgeleri destekler.

JSON gösterimi
{ "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. }

Alanlar
altText	string İsteğe bağlı. Erişilebilirlik için kullanılan simgenin açıklaması. Belirtilmemesi durumunda varsayılan değer "Düğme" olarak sağlanmıştır. En iyi uygulama olarak, simgenin gösterdiği şeyler ve (varsa) ne işe yaradığı hakkında faydalı bir açıklama belirlemeniz gerekir. Örneğin, A user's account portrait veya Opens a new browser tab and navigates to the Google Chat developer documentation at https://developers.google.com/chat . Simge bir Button içinde ayarlanırsa kullanıcı fareyle üzerine geldiğinde altText yardımcı metin olarak görünür. Bununla birlikte, düğme text olarak ayarlanırsa simgenin altText simgesi yok sayılır.
imageType	enum ( ImageType ) Resme uygulanan kırpma stili. Bazı durumlarda CIRCLE kırpma uygulamak, görüntünün yerleşik bir simgeden daha büyük çizilmesine neden olur.
Birlik alanı icons . Karttaki widget'ta gösterilen simge. icons aşağıdakilerden yalnızca biri olabilir:
knownIcon	string Google Workspace tarafından sağlanan yerleşik simgelerden birini görüntüleyin. Örneğin, bir uçak simgesi görüntülemek için AIRPLANE değerini belirtin. Otobüs için BUS değerini belirtin. Desteklenen simgelerin tam listesi için yerleşik simgeler bölümüne bakın.
iconUrl	string HTTPS URL'sinde barındırılan bir özel simge görüntüleyin. Örneğin: "iconUrl": "https://developers.google.com/chat/images/quickstart-app-avatar.png" Desteklenen dosya türleri şunları içerir: .png ve .jpg .

Düğme

Kullanıcıların tıklayabileceği metin, simge veya metin + simge düğmesi.

Bir resmi tıklanabilir düğme yapmak için Image ( ImageComponent değil) belirtin ve onClick işlemi ayarlayın.

Şu anda Chat uygulamalarında ( iletişim kutuları ve kart mesajları ve Google Workspace Eklentileri dahil) desteklenmektedir.

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

Alanlar
text	string Düğmenin içinde görüntülenen metin.
icon	object ( Icon ) Simge resmi. Hem icon hem de text ayarlanmışsa metinden önce simge görünür.
color	object ( Color ) Ayarlanırsa düğme düz bir arka plan rengiyle doldurulur ve arka plan rengiyle kontrastı korumak için yazı tipi rengi değişir. Örneğin, mavi bir arka plan ayarlamak büyük olasılıkla beyaz metne neden olacaktır. Bu politika ayarlanmadan bırakılırsa resim arka planı beyaz, yazı tipi rengi mavi olur. Kırmızı, yeşil ve mavi için her alanın değeri, iki şekilde ifade edilebilen bir float numarasıdır: 0 ile 255 arasında bir sayı, 255'e (153/255) bölünebilir veya 0 ile 1 (0,6) arasında bir değer olur. 0, bir rengin yokluğunu; 1 veya 255/255 de RGB ölçeğinde bu rengin tam varlığını belirtir. İsteğe bağlı olarak alfayı ayarlayın. Bu, şu denklemi kullanarak bir şeffaflık düzeyi belirler: pixel color = alpha * (this color) + (1.0 - alpha) * (background color) Alfa için 1 değeri tek bir renge, 0 değeri tamamen şeffaf bir renge karşılık gelir. Örneğin, aşağıdaki renk yarı saydam kırmızıyı temsil eder: "color": { "red": 1, "green": 0, "blue": 0, "alpha": 0.5 }
onClick	object ( OnClick ) Zorunlu. Düğme tıklandığında gerçekleştirilecek işlemdir (ör. köprü açma veya özel bir işlev çalıştırma).
disabled	boolean true düğmesi varsa düğme etkin değil durumunda gösterilir ve kullanıcı eylemlerine yanıt vermez.
altText	string Erişilebilirlik için kullanılan alternatif metin. Kullanıcılara düğmenin işlevini bildirin. Örneğin, bir düğme köprü açarsa şunu yazabilirsiniz: "Yeni bir tarayıcı sekmesi açar ve https://developers.google.com/chat" adresindeki Google Chat geliştirici belgelerine gider.

Renk

RGBA renk alanındaki bir rengi temsil eder. Bu temsil, farklı dillerdeki renk temsillerinin küçükten çoke doğru dönüşümünü kolaylaştırmak için tasarlanmıştır. Örneğin, bu temsilin alanları Java'da java.awt.Color adlı oluşturucunun önemli bir şekilde sağlanmasına, iOS'ta UIColor'ın +colorWithRed:green:blue:alpha yöntemi için de olumlu bir şekilde sağlanabilir. Ayrıca, çok az bir çalışmayla kolayca JavaScript'te bir CSS rgba() dizesi olarak biçimlendirilebilir.

Bu referans sayfasında, RGB değerini yorumlamak için kullanılması gereken mutlak renk alanı hakkında bilgi yoktur (ör. sRGB, Adobe RGB, DCI-P3, BT.2020 vb.). Uygulamalar, varsayılan olarak sRGB renk alanını dikkate almalıdır.

Renk eşitliğine karar verilmesi gerektiğinde, uygulamalar, aksi belirtilmediği sürece, kırmızı, yeşil, mavi ve alfa değerlerinin her biri en fazla 1e-5 farklılık gösteriyorsa iki rengi eşit kabul edin.

Örnek (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();
 }
 // ...

Örnek (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;
}
// ...

Örnek (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('');
};

// ...

JSON gösterimi
{ "red": number, "green": number, "blue": number, "alpha": number }

Alanlar
red	number Renk [0, 1] değeri olarak kırmızı renktir.
green	number Renk [0, 1] değeri olarak yeşil renktir.
blue	number Renk [0, 1] değeri olarak mavi renk miktarı.
alpha	number Bu rengin piksele uygulanması gereken kısmı. Yani son piksel rengi şu denklemle tanımlanır: pixel color = alpha * (this color) + (1.0 - alpha) * (background color) Bu, 1,0 değerinin tek bir renge, 0,0 değerinin tamamen şeffaf bir renge karşılık geldiği anlamına gelir. Bu, basit bir kayan skaler yerine bir sarmalayıcı mesajı kullanır. Böylece varsayılan değer ile ayarlanmayan değer arasında ayrım yapabilirsiniz. Atlanırsa bu renk nesnesi tek bir renk olarak oluşturulur (alfa değerine açıkça 1.0 değeri verilmiş gibi).

Anahtar Kontrolü

decoratedText widget'ının içindeki açma/kapatma stili anahtarı veya onay kutusu.

Yalnızca decoratedText widget'ında desteklenir.

JSON gösterimi
{ "name": string, "value": string, "selected": boolean, "onChangeAction": { object (Action) }, "controlType": enum (ControlType) }

Alanlar
name	string Form giriş etkinliğinde anahtar widget'ının tanımlandığı ad. Form girişleriyle çalışma hakkında ayrıntılı bilgi için Form verilerini alma başlıklı makaleye bakın.
value	string Bir kullanıcı tarafından girilen ve form girişi etkinliğinin bir parçası olarak döndürülen değer. Form girişleriyle çalışma hakkında ayrıntılı bilgi için Form verilerini alma başlıklı makaleye bakın.
selected	boolean true olduğunda anahtar seçilir.
onChangeAction	object ( Action ) Anahtar durumu değiştirildiğinde, hangi işlevin yürütüleceği gibi gerçekleştirilecek işlem.
controlType	enum ( ControlType ) Anahtarın kullanıcı arayüzünde nasıl göründüğü.

Kontrol Türü

Anahtarın kullanıcı arayüzünde nasıl göründüğü.

Sıralamalar
SWITCH	Açma/kapatma anahtarı.
CHECKBOX	CHECK_BOX lehine kullanımdan kaldırıldı.
CHECK_BOX	Onay kutusu.

Düğme Listesi

Yatay olarak yerleştirilmiş bir düğme listesi.

JSON gösterimi
{ "buttons": [ { object (Button) } ] }

Alanlar
buttons[]	object ( Button ) Bir dizi düğme.

TextInput

Kullanıcıların metin girebileceği bir alandır. Önerileri ve değiştirme işlemlerini destekler.

Chat uygulamaları, form giriş etkinlikleri sırasında girilen metnin değerini alır ve işleyebilir. Form girişleriyle çalışma hakkında ayrıntılı bilgi için Form verilerini alma başlıklı makaleye bakın.

Kullanıcılardan soyut veriler toplamanız gerektiğinde bir metin girişi kullanın. Kullanıcılardan tanımlı veriler toplamak için bunun yerine seçim giriş widget'ını kullanın.

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

Alanlar
name	string Form girişi etkinliğinde metin girişinin tanımlandığı ad. Form girişleriyle çalışma hakkında ayrıntılı bilgi için Form verilerini alma başlıklı makaleye bakın.
label	string Kullanıcı arayüzündeki metin giriş alanının üzerinde görünen metin. Kullanıcının uygulamanızın ihtiyaç duyduğu bilgileri girmesine yardımcı olacak bir metin belirtin. Örneğin, birisinin adını öğrenmek istiyorsanız ancak bu kişinin soyadına ihtiyaç duyuyorsanız "ad" yerine "soyadı" yazın. hintText özelliği belirtilmezse gerekir. Diğer durumlarda isteğe bağlıdır.
hintText	string Belirli bir değeri girmelerini isteyerek kullanıcılara yardımcı olmayı amaçlayan metin giriş alanının altında görünen metin. Bu metin her zaman görünür. label özelliği belirtilmezse gerekir. Diğer durumlarda isteğe bağlıdır.
value	string Bir kullanıcı tarafından girilen ve form girişi etkinliğinin bir parçası olarak döndürülen değer. Form girişleriyle çalışma hakkında ayrıntılı bilgi için Form verilerini alma başlıklı makaleye bakın.
type	enum ( Type ) Metin giriş alanının kullanıcı arayüzünde nasıl göründüğü. Örneğin, alanın tek satır mı yoksa çok satırlı mı olduğu.
onChangeAction	object ( Action ) Metin giriş alanında değişiklik olduğunda yapılması gerekenler. Değişikliklere örnek olarak alana kullanıcı ekleme veya metni silme verilebilir. Özel bir işlev çalıştırmak veya Google Chat'te bir iletişim kutusu açmak, yapabileceğiniz işlemlere örnek olarak verilebilir.
initialSuggestions	object ( Suggestions ) Kullanıcıların girebileceği önerilen değerler. Bu değerler, kullanıcılar metin giriş alanının içini tıkladığında gösterilir. Kullanıcılar yazarken önerilen değerler, kullanıcıların yazdıklarıyla eşleşecek şekilde dinamik olarak filtrelenir. Örneğin, programlama dili için bir metin giriş alanı Java, JavaScript, Python ve C++ önerisinde bulunabilir. Kullanıcılar "Jav" yazmaya başladığında, öneri listesi yalnızca Java ve JavaScript'i gösterecek şekilde filtreler. Önerilen değerler, uygulamanızın anlamlı bulabileceği değerler girmeye yardımcı olur. Bazı kullanıcılar JavaScript'ten bahsederken "javascript", diğer kullanıcılar "java komut dosyası" girebilir. "JavaScript" önerisi, kullanıcıların uygulamanızla etkileşimde bulunma şeklini standartlaştırabilir. TextInput.type öğesi belirtildiğinde, MULTIPLE_LINE olarak ayarlanmış olsa bile her zaman SINGLE_LINE olarak ayarlanır.
autoCompleteAction	object ( Action ) İsteğe bağlı. Metin giriş alanı, etkileşimde bulunan kullanıcılara önerilerde bulunduğunda yapılacak işlemi belirtin. Belirtilmemesi durumunda öneriler initialSuggestions tarafından ayarlanır ve istemci tarafından işlenir. Belirtilirse uygulama burada belirtilen işlemi (ör. özel bir işlevin çalıştırılması) gerçekleştirir. Google Workspace eklentileri tarafından desteklenir ancak Chat uygulamaları tarafından desteklenmez. Sohbet uygulamaları desteği yakında geliyor.

Tür

Metin giriş alanının kullanıcı arayüzünde nasıl göründüğü. Örneğin, tek satırlık giriş alanı mı yoksa çok satırlı giriş mi olduğu.

initialSuggestions belirtilirse MULTIPLE_LINE olarak ayarlanmış olsa bile type her zaman SINGLE_LINE olur.

Sıralamalar
SINGLE_LINE	Metin giriş alanının sabit yüksekliği bir satır.
MULTIPLE_LINE	Metin giriş alanının sabit yüksekliği birden fazla satır içeriyor.

Öneriler

Kullanıcıların girebileceği önerilen değerler. Bu değerler, kullanıcılar metin giriş alanının içini tıkladığında gösterilir. Kullanıcılar yazarken önerilen değerler, kullanıcıların yazdıklarıyla eşleşecek şekilde dinamik olarak filtrelenir.

Örneğin, programlama dili için bir metin giriş alanı Java, JavaScript, Python ve C++ önerisinde bulunabilir. Kullanıcılar "Jav" yazmaya başladığında, öneri listesi yalnızca Java ve JavaScript'i gösterecek şekilde filtreler.

Önerilen değerler, uygulamanızın anlamlı bulabileceği değerler girmeye yardımcı olur. Bazı kullanıcılar JavaScript'ten bahsederken "javascript", diğer kullanıcılar "java komut dosyası" girebilir. "JavaScript" önerisi, kullanıcıların uygulamanızla etkileşimde bulunma şeklini standartlaştırabilir.

TextInput.type öğesi belirtildiğinde, MULTIPLE_LINE olarak ayarlanmış olsa bile her zaman SINGLE_LINE olarak ayarlanır.

JSON gösterimi
{ "items": [ { object (SuggestionItem) } ] }

Alanlar
items[]	object ( SuggestionItem ) Metin giriş alanlarındaki önerileri otomatik tamamlama için kullanılan önerilerin listesi.

Öneri Öğesi

Kullanıcıların metin giriş alanına girebileceği, önerilen bir değer.

JSON gösterimi
{ // Union field content can be only one of the following: "text": string // End of list of possible types for union field content. }

Alanlar
Birlik alanı content . content aşağıdakilerden yalnızca biri olabilir:
text	string Metin girişi alanına önerilen bir girişin değeri. Bu, kullanıcıların kendilerinin gireceği değerle aynıdır.

Giriş Girişi

Kullanıcıların seçebileceği seçenekler bulunan bir kullanıcı arayüzü öğesi oluşturan. Örneğin, bir açılır menü veya kontrol listesi.

Chat uygulamaları, form giriş etkinlikleri sırasında girilen metnin değerini alır ve işleyebilir. Form girişleriyle çalışma hakkında ayrıntılı bilgi için Form verilerini alma başlıklı makaleye bakın.

Belirlediğiniz seçeneklerle eşleşen kullanıcılardan veri toplamanız gerektiğinde bir seçim girişi kullanın. Kullanıcılardan soyut veriler toplamak için bunun yerine metin girişi widget'ını kullanın.

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

Alanlar
name	string Form girişi etkinliğinde seçim girişinin tanımlandığı ad. Form girişleriyle çalışma hakkında ayrıntılı bilgi için Form verilerini alma başlıklı makaleye bakın.
label	string Kullanıcı arayüzündeki seçim giriş alanının üzerinde görünen metin. Kullanıcının uygulamanızın ihtiyaç duyduğu bilgileri girmesine yardımcı olacak bir metin belirtin. Örneğin, kullanıcılar açılır menüden iş biletinin aciliyetini seçiyorsa etiket "Acil" veya "Aciliyet seçin" olabilir.
type	enum ( SelectionType ) Bir seçeneğin kullanıcılara gösterilme şekli. Farklı seçenekler, farklı etkileşim türlerini destekler. Örneğin, kullanıcılar birden fazla onay kutusunu etkinleştirebilir ancak açılır menüden yalnızca bir değer seçebilir. Her seçim girişi bir seçim türünü destekler. Örneğin, onay kutuları ile anahtarların karıştırılması desteklenmez.
items[]	object ( SelectionItem ) Seçilen öğelerin dizisi. Örneğin, seçili tüm onay kutuları için.
onChangeAction	object ( Action ) Belirtilirse seçim değiştiğinde form gönderilir. Belirtilmezse formu gönderen ayrı bir düğme belirtmelisiniz. Form girişleriyle çalışma hakkında ayrıntılı bilgi için Form verilerini alma başlıklı makaleye bakın.

Seçim Türü

Bir seçeneğin kullanıcılara gösterilme şekli. Farklı seçenekler, farklı etkileşim türlerini destekler. Örneğin, kullanıcılar birden fazla onay kutusunu etkinleştirebilir ancak açılır menüden yalnızca bir değer seçebilir.

Her seçim girişi bir seçim türünü destekler. Örneğin, onay kutuları ile anahtarların karıştırılması desteklenmez.

Sıralamalar
CHECK_BOX	Bir dizi onay kutusu. Kullanıcılar, seçim girişi başına birden fazla onay kutusunu seçebilir.
RADIO_BUTTON	Bir dizi radyo düğmesi. Kullanıcılar, seçim girişi başına bir radyo düğmesi seçebilir.
SWITCH	Bir anahtarlar grubu. Kullanıcılar her seçim girişi için aynı anda birden fazla anahtarı etkinleştirebilir.
DROPDOWN	Açılır menü. Kullanıcılar her seçim girişi için bir açılır menü öğesi seçebilir.

Seçim Öğesi

Onay kutusu veya anahtar gibi bir seçim girişinde seçilebilir öğe.

JSON gösterimi
{ "text": string, "value": string, "selected": boolean }

Alanlar
text	string Kullanıcılara gösterilen metin.
value	string Bu öğeyle ilişkilendirilen değer. İstemci bu formu bir form girişi değeri olarak kullanmalıdır. Form girişleriyle çalışma hakkında ayrıntılı bilgi için Form verilerini alma başlıklı makaleye bakın.
selected	boolean true , birden fazla öğe seçilir. Radyo düğmeleri ve açılır menüler için birden fazla öğe seçilirse seçilen ilk öğe alınır, ardından sonrakiler yok sayılır.

TarihSaat Seçici

Kullanıcıların bir tarih, saat veya hem tarih hem de saat belirtmesini sağlar.

Kullanıcılardan metin girişi kabul eder ancak kullanıcıların doğru şekilde biçimlendirilmiş tarih ve saatler girmesine yardımcı olan etkileşimli bir tarih ve saat seçici içerir. Kullanıcılar tarih veya saati yanlış girerse widget, kullanıcılardan doğru biçimi girmelerini isteyen bir hata gösterir.

Chat uygulamaları tarafından desteklenmez. Sohbet uygulamaları desteği yakında geliyor.

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

Alanlar
name	string Tarih giriş seçicisinin bir form girişi etkinliğinde tanımlandığı ad. Form girişleriyle çalışma hakkında ayrıntılı bilgi için Form verilerini alma başlıklı makaleye bakın.
label	string Kullanıcılardan tarih, saat veya tarih bilgisi girmelerini isteyen metin. Kullanıcının uygulamanızın ihtiyaç duyduğu bilgileri girmesine yardımcı olacak bir metin belirtin. Örneğin, kullanıcılar bir randevu belirliyorsa "Randevu tarihi" veya "Randevu tarihi ve saati" gibi bir etiket uygun olabilir.
type	enum ( DateTimePickerType ) Tarih ve saat seçicinin desteklediği tarih ve saat türü.
valueMsEpoch	string ( int64 format) Kullanıcı girişinden veya önceki kullanıcı girişinden önce varsayılan olarak gösterilen değer (milisaniye cinsinden). Dönem zamanı . DATE_AND_TIME türü için tam dönem değeri kullanılır. DATE_ONLY türü için yalnızca sıfır zamanının tarihi kullanılır. TIME_ONLY türünde, yalnızca sıfır zamanı kullanılır. Örneğin, 03:00 değerini göstermek için sıfır zamanı 3 * 60 * 60 * 1000 olarak ayarlayın.
timezoneOffsetDate	integer UTC saat dilimine göre saat dilimi farkını dakika cinsinden gösteren sayı. Ayarlanırsa valueMsEpoch belirtilen saat diliminde görüntülenir. Ayarlanmazsa istemci tarafında kullanıcının saat dilimi ayarını kullanır.
onChangeAction	object ( Action ) Kullanıcı, tarih ve saat dilimi seçici arayüzünden Kaydet veya Temizle seçeneğini tıkladığında tetiklenir.

TarihSaat SeçiciTürü

Tarih ve saat seçicinin desteklediği tarih ve saat türü.

Sıralamalar
DATE_AND_TIME	Kullanıcı bir tarih ve saat seçebilir.
DATE_ONLY	Kullanıcı yalnızca bir tarih seçebilir.
TIME_ONLY	Kullanıcı yalnızca saat seçebilir.

Ayırıcı

Widget'lar arasında yatay bir çizgi olan bir ayırıcı görüntüler.

Örneğin, aşağıdaki JSON bir ayırıcı oluşturur:

"divider": {}

GRid

Bir öğe koleksiyonunun bulunduğu ızgarayı gösterir.

Izgara, herhangi bir sayıda sütunu ve öğeyi destekler. Satır sayısı, öğelerin sütunlara bölünmesiyle belirlenir. 10 öğeli ve 2 sütunlu bir ızgaranın 5 satırı vardır. 11 öğeli ve 2 sütunlu bir ızgarada 6 satır vardır.

Örneğin, aşağıdaki JSON tek bir öğe içeren 2 sütunlu bir ızgara oluşturur:

"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"
    }
  }
}

JSON gösterimi
{ "title": string, "items": [ { object (GridItem) } ], "borderStyle": { object (BorderStyle) }, "columnCount": integer, "onClick": { object (OnClick) } }

Alanlar
title	string Izgara başlığında görüntülenen metin.
items[]	object ( GridItem ) Izgarada gösterilecek öğeler.
borderStyle	object ( BorderStyle ) Her bir ızgara öğesine uygulanacak kenarlık stili.
columnCount	integer Izgarada görüntülenecek sütun sayısı. Bu alan belirtilmezse varsayılan bir değer kullanılır ve bu varsayılan değer, ızgaranın gösterildiği yere (iletişim kutusu ve tamamlayıcı) bağlı olarak farklılık gösterir.
onClick	object ( OnClick ) Bu geri çağırma, bağımsız her ızgara öğesi tarafından yeniden kullanılır. Ancak, geri çağırmanın parametrelerine eklenen öğe listesinde öğenin tanımlayıcısı ve dizini kullanılır.

Izgara Öğesi

Izgara düzenindeki tek bir öğeyi temsil eder.

JSON gösterimi
{ "id": string, "image": { object (ImageComponent) }, "title": string, "subtitle": string, "layout": enum (GridItemLayout) }

Alanlar
id	string Bu ızgara öğesi için kullanıcı tarafından belirtilen tanımlayıcı. Bu tanımlayıcı, üst Tablo'nun onClick geri çağırma parametrelerinde döndürülür.
image	object ( ImageComponent ) Izgara öğesinde görüntülenen resim.
title	string Izgara öğesinin başlığı.
subtitle	string Izgara öğesinin alt başlığı.
layout	enum ( GridItemLayout ) Izgara öğesi için kullanılacak düzen.

ResimBileşeni

Bir resmi temsil eder.

JSON gösterimi
{ "imageUri": string, "altText": string, "cropStyle": { object (ImageCropStyle) }, "borderStyle": { object (BorderStyle) } }

Alanlar
imageUri	string Resim URL'si.
altText	string Resmin erişilebilirlik etiketi.
cropStyle	object ( ImageCropStyle ) Resme uygulanacak kırpma stili.
borderStyle	object ( BorderStyle ) Resme uygulanacak kenarlık stili.

ResimKırpma Stili

Bir resme uygulanan kırpma stilini gösterir.

Örneğin, 16x9 en boy oranını nasıl uygulayacağınız aşağıda açıklanmıştır:

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

JSON gösterimi
{ "type": enum (ImageCropType), "aspectRatio": number }

Alanlar
type	enum ( ImageCropType ) Kırpma türü.
aspectRatio	number Kırpma türü RECTANGLE_CUSTOM ise kullanılacak en boy oranı . Örneğin, 16x9 en boy oranını nasıl uygulayacağınız aşağıda açıklanmıştır: cropStyle { "type": "RECTANGLE_CUSTOM", "aspectRatio": 16/9 }

ResimKırpmaTürü

Bir resme uygulanan kırpma stilini gösterir.

Sıralamalar
IMAGE_CROP_TYPE_UNSPECIFIED	Değer belirtilmedi. Kullanmayın.
SQUARE	Varsayılan değer. Kare kırpma uygular.
CIRCLE	Dairesel kırpma uygular.
RECTANGLE_CUSTOM	Özel en boy oranına sahip dikdörtgen bir kırpma uygular. Özel en boy oranını aspectRatio ile ayarlayın.
RECTANGLE_4_3	4:3 en boy oranına sahip dikdörtgen bir kırpma uygular.

Kenarlık Stili

Bir widget'taki öğelere uygulanan kenarlık stilinin tamamını gösterir.

JSON gösterimi
{ "type": enum (BorderType), "strokeColor": { object (Color) }, "cornerRadius": integer }

Alanlar
type	enum ( BorderType ) Kenarlık türü.
strokeColor	object ( Color ) Tür BORDER_TYPE_STROKE olduğunda kullanılacak renkler.
cornerRadius	integer Kenarlığın köşe yarıçapı.

Kenarlık Türü

Widget'lara uygulanan kenarlık türlerini gösterir.

Sıralamalar
BORDER_TYPE_UNSPECIFIED	Değer belirtilmedi.
NO_BORDER	Varsayılan değer. Kenarlık yok.
STROKE	Özet.

IzgaraÖğeDüzeni

Izgara öğesi için kullanılabilen çeşitli düzen seçeneklerini gösterir.

Sıralamalar
GRID_ITEM_LAYOUT_UNSPECIFIED	Düzen belirtilmedi.
TEXT_BELOW	Başlık ve alt başlık, ızgara öğesi resminin altında gösterilir.
TEXT_ABOVE	Başlık ve alt başlık, ızgara öğesi resminin üzerinde gösterilir.

Kartİşlemi

Kart işlemi, kartla ilişkilendirilmiş işlemdir. Örneğin, fatura kartı fatura silme, fatura e-postası gönderme veya faturayı tarayıcıda açma gibi işlemleri içerebilir.

Chat uygulamaları tarafından desteklenmez.

JSON gösterimi
{ "actionLabel": string, "onClick": { object (OnClick) } }

Alanlar
actionLabel	string İşlem menü öğesi olarak görüntülenen etiket.
onClick	object ( OnClick ) Bu işlem öğesi için yapılan onClick işlemi.

Kart SabitiAlt Bilgisi

Kartın alt kısmında görünen kalıcı (yapışkan) altbilgi.

fixedFooter öğesini primaryButton veya secondaryButton belirtmeden ayarlamak bir hataya neden olur.

Chat uygulamaları iletişim kutularında fixedFooter destekler, ancak kart mesajlarında destekler. .

JSON gösterimi
{ "primaryButton": { object (Button) }, "secondaryButton": { object (Button) } }

Alanlar
primaryButton	object ( Button ) Sabit altbilginin birincil düğmesi. Düğme, metin ve renk ayarlanmış bir metin düğmesi olmalıdır.
secondaryButton	object ( Button ) Sabit altbilginin ikincil düğmesi. Düğme, metin ve renk ayarlanmış bir metin düğmesi olmalıdır. secondaryButton ayarlanmışsa primaryButton ayarlanmalıdır.

Ekran Stili

Google Workspace eklentilerinde, kartın nasıl görüntüleneceğini belirler.

Chat uygulamaları tarafından desteklenmez.

Sıralamalar
DISPLAY_STYLE_UNSPECIFIED	Kullanmayın.
PEEK	Kartın başlığı, kenar çubuğunun alt kısmında görünür ve kısmen yığının mevcut en iyi kartını kaplar. Başlığı tıkladığınızda kart, kart yığınına açılır. Kartın başlığı yoksa bunun yerine oluşturulan başlık kullanılır.
REPLACE	Varsayılan değer. Kart, kart yığınındaki en iyi kartın görünümü değiştirilerek gösterilir.