Cards v2

Koleksiyonlar ile düzeninizi koruyun İçeriği tercihlerinize göre kaydedin ve kategorilere ayırın.

Kart

Kartlar; tanımlı bir düzeni, düğmeler gibi etkileşimli kullanıcı arayüzü öğelerini ve resimler gibi rich media öğelerini 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 iletiler olarak.
  • Mesajın hemen altında kısa mesaj var.
  • İletişim kutusu olarak.

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

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

Örnek kişi kartı

{
  "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",
                            }
                          ],
                        }
                      }
                    },
                  ],
                }
              },
            ],
          },
        ],
      },
    }
  ],
}
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 bir başlık resmi ve başlık içerir. Başlıklar her zaman kartın üst kısmında görünür.

sections[]

object ( Section )

Widget koleksiyonu içerir. Her bölümün isteğe bağlı kendi başlığı vardır. Bölümler, satır ayırıcıyla görsel olarak ayrılır.

cardActions[]

object ( CardAction )

Kartın işlemleri. İşlemler, kartın araç çubuğu menüsüne eklenir.

Chat uygulama kartlarında araç çubuğu olmadığı için cardActions[] Chat uygulamaları tarafından desteklenmez.

Örneğin, aşağıdaki JSON, Ayarlar ve Geri Bildirim Gönder seçeneklerini kullanarak bir kart işlemi menüsü oluşturur:

"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ı. Kartla gezinmede kart tanımlayıcısı olarak kullanılır.

Chat uygulamaları kartta gezinmeyi desteklemediğinden bu alanı yoksayar.

displayStyle

enum ( DisplayStyle )

Google Workspace eklentilerinde, peekCardHeader öğesinin görüntü özelliklerini ayarlar.

Chat uygulamaları tarafından desteklenmez.

peekCardHeader

object ( CardHeader )

Bağlamsal içerik gösterilirken peerkart kartı, yer tutucu olarak davranarak kullanıcının ana sayfa kartları ile içeriğe dayalı kartlar arasında gezinmesini sağlar.

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 sahiptir: 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 kapsar.

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

Bu resmin erişilebilirlik için kullanılan 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 daire 3 çaplı bir daire haline gelir.

Bölüm

Bir bölüm, belirtilen sırayla dikey olarak oluşturulan bir grup widget'ı 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 bir kısmını veya tamamını gizler ancak kullanıcılar gizli widget'ları ortaya çıkarmak için bölümü Daha fazla göster 'i tıklayarak genişletebilirler . Kullanıcılar, Daha az göster 'i tıklayarak widget'ları tekrar gizleyebilirler.

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ılabilir 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 üç tanesi 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örüntüler.

Örneğin, aşağıdaki JSON, alternatif metin içeren 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": "sasha@example.com",
  "bottomLabel": "This is a new Email address!",
  "switchWidget": {
    "name": "has_send_welcome_email_to_sasha",
    "selected": false,
    "controlType": "ControlType.CHECKBOX"
  }
}
buttonList

object ( ButtonList )

Düğme listesi.

Örneğin, aşağıdaki JSON iki düğme oluşturur. Bunlardan birincisi mavi bir metin düğmesi, ikincisi ise bağlantıyı açan bir resim düğmesidir:

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

object ( TextInput )

Kullanıcıların yazabileceği bir metin kutusu görüntüler.

Şu anda iletişim kutularında desteklenmektedir . Kart mesajları desteği yakında sunulacaktır.

Örneğin, aşağıdaki JSON, bir e-posta adresi için metin girişi oluşturur:

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

Başka bir ö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 öğe seçmesine olanak tanıyan bir seçim kontrolü görüntüler. Seçim kontrolleri; onay kutuları, radyo düğmeleri, anahtarlar veya açılır menüler olabilir.

Şu anda iletişim kutularında desteklenmektedir . Kart mesajları desteği yakında sunulacaktır.

Ö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": "SelectionType.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österir.

Chat uygulamaları tarafından desteklenmez. Chat uygulamaları desteği yakında kullanıma sunulacaktır.

Örneğin, aşağıdaki JSON bir randevu planlamak için bir tarih ve saat seçici oluşturur:

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

object ( Divider )

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

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

"divider": {
}
grid

object ( Grid )

Öğelerin koleksiyonunun olduğu bir ızgarayı gösterir.

Izgara, istediğiniz sayıda sütunu ve öğeyi destekler. Satır sayısı, öğelerin 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.

Şu anda iletişim kutularında desteklenmektedir . Kart mesajları desteği yakında sunulacaktı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",
  "numColumns": 2,
  "borderStyle": {
    "type": "STROKE",
    "cornerRadius": 4.0
  },
  "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 paragraftan oluşan metin. Ayrıntılar için Metin biçimlendirmesi bölümüne göz atın.

JSON gösterimi
{
  "text": string
}
Alanlar
text

string

Widget'ta gösterilen metin.

Görüntü

URL ile belirtilen ve onClick işlemi olabilecek 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

Bu resmin erişilebilirlik için kullanılan alternatif metni.

Tıklama

Kullanıcılar karttaki etkileşimli bir öğeyi (ör. düğme) tıkladığı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.

card

object ( Card )

Belirtilirse, tıklandığında 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 bir Apps Komut Dosyası çağrılabilir.

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

string

İçeren öğe tıklandığında veya harici olarak etkinleştirildiğinde çağrılacak özel bir işlev.

Örneğin, Etkileşimli kart oluşturma bölümünü inceleyin.

parameters[]

object ( ActionParameter )

İşlem parametrelerinin listesi.

loadIndicator

enum ( LoadIndicator )

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

persistValues

boolean

İşlemden sonra form değerlerinin devam edip etmediğini gösterir. Varsayılan değer false şeklindedir.

true öğesi işlemden sonra form değerleri kalır. İşlemler için LoadIndexator.NONE kullanılırken, formdan sonra veya değişiklik işlemlerinde kullanıcıya yapılan tüm değişikliklerin üzerine yanıtın üzerine yazılmamasını sağladığından persistValues = true önerilir.

false bulunursa işlem tetiklendiğinde form değerleri temizlenir. persistValues false olarak ayarlandığında, tüm işlemler için kartın LoadIndicator.SPINNER 'ı kullanması önemle tavsiye edilir. Böylece, işlem sırasında kullanıcı tarafından herhangi bir değişiklik yapılmaması için kullanıcı arayüzü kilitlenir.

Chat uygulamaları tarafından desteklenmez.

interaction

enum ( Interaction )

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

Kullanıcı etkileşimine yanıt olarak ne yapılması gerekir (ör. kullanıcı, kart mesajındaki düğmeyi tıklar?)

Belirtilmezse uygulama, normalde olduğu gibi bir action çalıştırarak (bağlantıyı açma veya bir işlevi çalıştırma gibi) yanıt verir.

Bir interaction belirterek uygulama, ö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 bir yükleme göstergesi gösterilmez.

Chat uygulamaları desteklenir ancak Google Workspace Eklentileri desteklenmez. Bir eklenti için belirtildiğinde kartın tamamı çıkartılır ve istemcide hiçbir şey gösterilmez.

İşlem parametresi

İşlem yöntemi çağrıldığında sunulacak dize parametrelerinin listesi. Örneğin, üç erteleme düğmesi düşünün: Şimdi ertele, 1 gün ertele, gelecek hafta ertele. Dize parametreleri listesinde erteleme türünü ve erteleme zamanını ileten bir işlem olarak = Snooze() işlem yöntemini kullanabilirsiniz.

Daha fazla bilgi için: CommonEventObject .

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

string

İşlem komut dosyasına ilişkin parametrenin adı.

value

string

Parametrenin değeri.

Yük Göstergesi

Harekete geçirici mesaj oluşturulurken 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.

Kullanıcı etkileşimine yanıt olarak ne yapılması gerekir (ör. kullanıcı, kart mesajındaki düğmeyi tıklar?)

Belirtilmezse uygulama, normalde olduğu gibi bir action çalıştırarak (bağlantıyı açma veya bir işlevi çalıştırma gibi) yanıt verir.

Bir interaction belirterek uygulama, ö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 bir yükleme göstergesi gösterilmez.

Chat uygulamaları desteklenir ancak Google Workspace Eklentileri desteklenmez. Bir eklenti için belirtildiğinde kartın tamamı çıkartılır ve istemcide hiçbir şey gösterilmez.

Sıralamalar
INTERACTION_UNSPECIFIED Varsayılan değer. action normal şekilde yürütülür.
OPEN_DIALOG

Chat uygulamalarının kullanıcılarla etkileşimde bulunmak için kullandığı pencereli, 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 belirtildiğinde kartın tamamı çıkartılır ve istemcide hiçbir şey gösterilmez.

OpenAs'lar

OnClick bir bağlantıyı açtığında, istemci bunu tam boyutlu pencere (istemci tarafından kullanılan çerçeveyse) veya yer paylaşımı (pop-up gibi) olarak açabilir. Uygulama, istemci platformu özelliklerine bağlıdır ve istemci tarafından desteklenmiyorsa seçilen değer yoksayılabilir. FULL_SIZE tüm istemciler tarafından desteklenir.

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

Sıralamalar
FULL_SIZE Bağlantı, istemci tarafından kullanılan çerçeveyse tam boyutlu pencere olarak açılır.
OVERLAY Bağlantı, pop-up gibi bir yer paylaşımı olarak açılır.

OnClose

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

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

Hem OnOpen hem de OnClose işleyici 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ılırsa alt pencere, kalıcı bir iletişim kutusu görevi görür ve alt pencere kapatılana kadar üst kart engellenir.

Süslü Metin

Metnin üstünde veya altında görünen bir etiket, metnin önündeki bir simge, bir seçim widget'ı veya metnin ardından gelen bir düğme gibi isteğe bağlı süslemelerle yazılmış metni görüntüleyen 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 )

startIcon lehine kullanımdan kaldırıldı .

startIcon

object ( Icon )

Metnin önünde gösterilen simge.

topLabel

string

Metnin üzerinde gösterilen metin text . Her zaman kesilir.

Basit biçimlendirmeyi destekler. Biçimlendirme ayrıntıları için Metin biçimlendirmesi bölümüne göz atın.

text

string

Zorunlu. Birincil metin.

Basit biçimlendirmeyi destekler. Biçimlendirme ayrıntıları için Metin biçimlendirmesi bölümüne göz atın.

wrapText

boolean

Metin kaydırma ayarı. true olursa metin kaydırılır ve birden fazla satırda gösterilir. Aksi halde, metin kesilir.

Yalnızca text için geçerlidir, topLabel ve bottomLabel için geçerli değildir.

bottomLabel

string

Metnin altında gösterilen metin text . Her zaman kesilir.

Basit biçimlendirmeyi destekler. Biçimlendirme ayrıntıları için Metin biçimlendirmesi bölümüne göz atın.

onClick

object ( OnClick )

Kullanıcılar topLabel veya bottomLabel düğmesini 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ıklanabilecek bir düğme.

switchControl

object ( SwitchControl )

Anahtar widget'ı, durumunu değiştirmek ve bir işlemi tetiklemek için tıklanabilir. Şu anda iletişim kutularında desteklenmektedir . Kart mesajları desteği yakında sunulacaktır.

endIcon

object ( Icon )

Metinden sonra bir simge görüntülenir.

Standart ve özel simgeleri destekler.

Simge

Karttaki bir widget'ta gösterilen simge.

Standart 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ı. Bu değer belirtilmediğinde varsayılan bir değer sağlanır. En iyi uygulama olarak, faydalı bir açıklama girmeniz gerekir. Örneğin, bir kullanıcının hesap portresi gösteriliyorsa bu simgeyi "Kullanıcının hesap portresi" olarak tanımlayabilirsiniz.

Simge bir Button simgesinde görüntüleniyorsa bu alternatif metin öncelikli olur ve düğmenin alt metninin üzerine yazılır. Bu nedenle düğme için alternatif metin yazmanız gerekir: Kullanıcılara düğmenin ne yaptığını bildiren açıklayıcı metin ayarlayın. Örneğin, bir düğme köprü açarsa şöyle yazabilirsiniz: "Yeni bir tarayıcı sekmesi açar ve Google Chat geliştirici dokümanlarına https://developers.google.com/chat" adresinden gider.

imageType

enum ( ImageType )

Resme uygulanan kırpma stili. Bazı durumlarda CIRCLE kırpma uygulamak, resmin standart bir simgeden daha büyük olarak ç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 standart simgelerden birini gösterir.

Ö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 standart simgelere bakın.

iconUrl

string

HTTPS URL'sinde barındırılan özel bir simgeyi görüntüleme.

Ö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 bir metin, simge veya metin + simge düğmesi.

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

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österilen metin.

icon

object ( Icon )

Simge resmi. Hem icon hem de text ayarlanmışsa metnin yerine simge görünür.

Hem simge hem de metin desteği yakında geliyor.

color

object ( Color )

Ayarlandığında, 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 muhtemelen beyaz metne dönüşecektir.

Bu politika ayarlanmazsa arka plan beyazdır ve yazı tipi rengi mavidir.

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 ya da 0 ile 1 (0,6) arasında bir değer olarak ifade edilebilir. 0, bir rengin bulunmadığını, 1 veya 255/255 ise bu rengin RGB ölçeğinde tam varlığını temsil eder.

İsteğe bağlı olarak, şu denklemi kullanarak şeffaflık düzeyini belirleyen alfa ayarını yapın:

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

Alfa için 1 değeri düz bir renge, 0 değeri tamamen şeffaf bir renge karşılık gelir.

Örneğin, aşağıdaki renk yarı şeffaf kırmızıyı temsil eder:

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

object ( OnClick )

Düğmeyi tıkladığında köprü açma veya özel bir işlev çalıştırma gibi işlemler.

disabled

boolean

true ise düğme etkin olmayan bir durumda görüntülenir ve kullanıcı işlemlerine yanıt vermez.

altText

string

Erişilebilirlik için kullanılan alternatif metin.

Düğmenin ne yaptığını kullanıcılara açıklayan açıklayıcı bir metin ayarlayın. Örneğin, bir düğme köprü açarsa şöyle yazabilirsiniz: "Yeni bir tarayıcı sekmesi açar ve Google Chat geliştirici dokümanlarına https://developers.google.com/chat" adresinden gider.

Bir simge ayarlandığında bunu etkilemez; bunun yerine icon.alt_text kullanın.

Renk

RGBA renk alanındaki bir rengi ifade eder. Bu gösterim, farklı dillerdeki renk temsillerinin küçük resimlere dönüştürülmesi kolaylığı için tasarlanmıştır. Örneğin, bu temsilin alanları Java'da java.awt.Color oluşturucusuna hızlı bir şekilde sağlanabilir. Ayrıca, iOS'te UIColor’ın +colorWithRed:green:blue:alpha yöntemine de hızlıca sağlanabilir ve yalnızca az bir çalışmayla JavaScript'te bir CSS rgba() dizesine kolayca dönüştürülebilir.

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

Renk eşitliğine karar verilmesi gerektiğinde, aksi belirtilmediği sürece uygulamalar 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 olarak ele alın.

Ö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

[0, 1] aralığındaki bir değer olarak rengin kırmızı miktarı.

green

number

[0, 1] aralığındaki bir değer olarak rengin yeşil miktarı.

blue

number

[0, 1] aralığındaki bir değer olarak rengin mavi miktarı.

alpha

number

Bu rengin piksele uygulanması gereken kısmı. Yani son piksel rengi denklemle tanımlanır:

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

Yani 1,0 değeri tek bir renge, 0,0 değeri tamamen şeffaf bir renge karşılık gelir. Bu, varsayılan değeri ve ayarlanmamış değeri birbirinden ayırt edebilmek için basit kayan bir skaler yerine bir sarmalayıcı mesajı kullanır. Atlanırsa bu renk nesnesi düz bir renk olarak oluşturulur (alfa değerine açıkça 1, 0 değeri verilmiş gibi).

Anahtar Kontrolü

decoratedText widget'ında açma/kapatma stilindeki bir anahtar veya onay kutusu görünür.

Yalnızca decoratedText widget'ında desteklenir.

Şu anda iletişim kutularında desteklenmektedir . Kart mesajları desteği yakında sunulacaktır.

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

string

Anahtar widget'ının 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 bölümüne bakın.

value

string

Bir kullanıcı tarafından girilen ve bir form girişi etkinliğinin 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 bölümüne bakın.

selected

boolean

true olduğunda anahtar seçilir.

onChangeAction

object ( Action )

Anahtar durumu değiştiğinde gerçekleştirilecek işlem (ör. hangi işlevin çalıştırılacağı).

controlType

enum ( ControlType )

Geçişin kullanıcı arayüzünde nasıl göründüğü.

Denetim Türü

Geçişin 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ş düğmeler 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şiklik içi işlemleri destekler.

Sohbet uygulamaları, form giriş etkinlikleri sırasında girilen metnin değerini alabilir ve işleyebilir. Form girişleriyle çalışma hakkında ayrıntılı bilgi için Form verilerini alma bölümüne bakın.

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

Yalnızca iletişim kutularında desteklenir. . Kart mesajları desteği yakında sunulacaktır.

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

Metin girişinin 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 bölümüne bakın.

label

string

Kullanıcı arayüzünde 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, bir kişinin adını soruyorsanız ancak özellikle soyadına ihtiyacınız varsa "ad" yerine "soyadı" yazın.

hintText özelliği belirtilmezse gereklidir. Aksi takdirde, 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 içinde görünen metin. Kullanıcılar yazmaya başladıktan sonra bu metin görünmez.

label özelliği belirtilmezse gereklidir. Aksi takdirde, isteğe bağlıdır.

value

string

Bir kullanıcı tarafından girilen ve bir form girişi etkinliğinin 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 bölümüne 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 bir değişiklik olduğunda ne yapmak gerekir?

Değişiklikler, kullanıcının alana ekleme veya metin silmesini içerir.

Uygulanacak işlemlere örnek olarak özel bir işlev çalıştırmak veya Google Chat'te bir iletişim kutusu açmak 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örünür. Önerilen değerler, kullanıcılar yazdıkça 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++ karakterlerini önerebilir. Kullanıcılar "Jav" yazmaya başladığında, öneriler listesi yalnızca Java ve JavaScript'i gösterecek şekilde filtrelenir.

Önerilen değerler, kullanıcıları uygulamanızın anlamlı bulabileceği değerler girmeleri için yönlendirmeye yardımcı olur. JavaScript'ten bahsederken bazı kullanıcılar "javascript", bazıları "java komut dosyası" girebilir. "JavaScript" önerisinde bulunmak, kullanıcıların uygulamanızla olan etkileşimini standart hale getirebilir.

TextInput.type belirtildiğinde, MULTIPLE_LINE olarak ayarlanmış olsa bile her zaman SINGLE_LINE olur.

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 halinde öneriler initialSuggestions tarafından ayarlanır ve istemci tarafından işlenir.

Belirtilirse uygulama burada belirtilen işlemi (ör. özel bir işlev çalıştırma) gerçekleştirir.

Google Workspace Eklentileri tarafından desteklenir ancak Chat uygulamaları tarafından desteklenmez. Chat 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ş mi 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 yüksekliği bir satır sabit.
MULTIPLE_LINE Metin giriş alanının yüksekliği birden fazla satırdan oluşuyor.

Ö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örünür. Önerilen değerler, kullanıcılar yazdıkça 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++ karakterlerini önerebilir. Kullanıcılar "Jav" yazmaya başladığında, öneriler listesi yalnızca Java ve JavaScript'i gösterecek şekilde filtrelenir.

Önerilen değerler, kullanıcıları uygulamanızın anlamlı bulabileceği değerler girmeleri için yönlendirmeye yardımcı olur. JavaScript'ten bahsederken bazı kullanıcılar "javascript", bazıları "java komut dosyası" girebilir. "JavaScript" önerisinde bulunmak, kullanıcıların uygulamanızla olan etkileşimini standart hale getirebilir.

TextInput.type belirtildiğinde, MULTIPLE_LINE olarak ayarlanmış olsa bile her zaman SINGLE_LINE olur.

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

object ( SuggestionItem )

Metin giriş alanlarındaki otomatik tamamlama önerileri için kullanılan önerilerin listesi.

ÖneriÖğesi

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

JSON gösterimi
{
  "text": string
}
Alanlar
text

string

Metin giriş alanına önerilen bir girişin değeri. Bu, kullanıcıların gireceği değerle eşdeğerdir.

Seçim Girişi

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

Sohbet uygulamaları, form giriş etkinlikleri sırasında girilen metnin değerini alabilir ve işleyebilir. Form girişleriyle çalışma hakkında ayrıntılı bilgi için Form verilerini alma bölümüne 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.

Yalnızca iletişim kutularında desteklenir. . Kart mesajları desteği yakında sunulacaktır.

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

string

Seçim girişinin bir form giriş etkinliğinde tanımlandığı ad.

Form girişleriyle çalışma hakkında ayrıntılı bilgi için Form verilerini alma bölümüne bakın.

label

string

Kullanıcı arayüzünde 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" etiketi 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 tek bir seçim türünü destekler. Örneğin, onay kutularının ve anahtarların birlikte kullanılması desteklenmez.

items[]

object ( SelectionItem )

Seçilen öğelerin dizisi. Örneğin, tüm işaretli onay kutuları.

onChangeAction

object ( Action )

Belirtilirse seçim değiştiğinde form gönderilir. Belirtilmezse formu gönderen ayrı bir düğme belirtmeniz gerekir.

Form girişleriyle çalışma hakkında ayrıntılı bilgi için Form verilerini alma bölümüne bakın.

SeçimTü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 tek bir seçim türünü destekler. Örneğin, onay kutularının ve anahtarların birlikte kullanılması desteklenmez.

Şu anda iletişim kutularında desteklenmektedir . Kart mesajları desteği yakında sunulacaktır.

Sıralamalar
CHECK_BOX

Onay kutuları grubu. Kullanıcılar her seçim girişi için birden fazla onay kutusu seçebilir.

Şu anda iletişim kutularında desteklenmektedir . Kart mesajları desteği yakında sunulacaktır.

RADIO_BUTTON

Bir dizi radyo düğmesi. Kullanıcılar, seçim girişi başına bir radyo düğmesi seçebilir.

Şu anda iletişim kutularında desteklenmektedir . Kart mesajları desteği yakında sunulacaktır.

SWITCH

Bir anahtar dizisi. Kullanıcılar, seçim girişi başına birden çok anahtarı aynı anda etkinleştirebilir.

Şu anda iletişim kutularında desteklenmektedir . Kart mesajları desteği yakında sunulacaktır.

DROPDOWN

Açılır menü. Kullanıcılar her seçim girişi için bir açılır menü öğesi seçebilir.

Şu anda iletişim kutularında desteklenmektedir . Kart mesajları desteği yakında sunulacaktır.

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 değeri form giriş değeri olarak kullanmalıdır.

Form girişleriyle çalışma hakkında ayrıntılı bilgi için Form verilerini alma bölümüne bakın.

selected

boolean

true olduğunda, birden fazla öğe seçilir. Radyo düğmeleri ve açılır menüler için birden çok öğe seçilirse, seçilen ilk öğe alınır, sonraki öğeler yoksayılır.

TarihSaat Seçici

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

Kullanıcılardan gelen metin girişlerini kabul eder ancak kullanıcıların doğru biçimlendirilmiş tarih ve saatler girmelerine 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. Chat 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 seçicinin form girişi etkinliğinde tanımlandığı ad.

Form girişleriyle çalışma hakkında ayrıntılı bilgi için Form verilerini alma bölümüne bakın.

label

string

Kullanıcılardan tarih, saat veya saat dilimi 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 iyi performans gösterebilir.

type

enum ( DateTimePickerType )

Tarih ve saat seçicinin desteklediği tarih ve saat girişi.

valueMsEpoch

string ( int64 format)

Kullanıcı girişinden veya önceki kullanıcı girişinden önce varsayılan değer olarak gösterilen, milisaniye cinsinden gösterilen değer ( Dönem süresi ).

DATE_AND_TIME türü için tam dönem değeri kullanılır.

DATE_ONLY türü için yalnızca dönem döneminin tarihi kullanılır.

TIME_ONLY türü için yalnızca dönemin zamanı kullanılır. Örneğin, saat 03:00'ü temsil etmek için dönem süresini 3 * 60 * 60 * 1000 olarak ayarlayın.

timezoneOffsetDate

integer

Dakika cinsinden UTC saat dilimi farkını gösteren sayı. Ayarlandığında 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 seçici arayüzündeki Kaydet veya Temizle düğmesini tıkladığında tetiklenir.

TarihSaat Seçici Türü

Tarih ve saat seçicinin desteklediği tarih ve saat girişi.

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

Ayırıcı

Widget'lar arasındaki yatay ayırıcıyı gösteren bir ayırıcı görüntüler.

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

"divider": {
}

GRid

Öğelerin koleksiyonunun olduğu bir ızgarayı gösterir.

Izgara, istediğiniz 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.

Şu anda iletişim kutularında desteklenmektedir . Kart mesajları desteği yakında sunulacaktı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",
  "numColumns": 2,
  "borderStyle": {
    "type": "STROKE",
    "cornerRadius": 4.0
  },
  "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 sınır stili.

columnCount

integer

Izgarada görüntülenecek sütun sayısı. Bu alan belirtilmezse varsayılan 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 ızgara öğesinin her biri tarafından kullanılır. Ancak geri çağırma parametrelerine öğenin tanımlayıcı ve dizininin eklenmesi gerekir.

IzgaraÖğesi

Tablo 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 temsil eder.

Örneğin, 16'ya 9 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, 16'ya 9 en boy oranını nasıl uygulayacağınız aşağıda açıklanmıştır:

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

ResimKırpma Türü

Bir resme uygulanan kırpma stilini temsil eder.

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 kırpma uygular. Özel en boy oranını aspectRatio ile ayarlayın.
RECTANGLE_4_3 4:3 en boy oranına sahip dikdörtgen kesim uygular.

Kenarlık Stili

Bir widget'taki öğelere uygulanan tam kenarlık stilini temsil eder.

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 sınır türlerini gösterir.

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

IzgaraÖğe Düzeni

Bir ızgara öğesi için kullanılabilen çeşitli düzen seçeneklerini temsil eder.

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-postayla 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 Düzeltilmiş Altbilgi

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

primaryButton veya secondaryButton belirtmeden fixedFooter ayarlamak bir hataya neden olur.

Chat uygulamaları fixedFooter iletişim kutularında desteklenir ancak kart mesajlarında desteklenmez. .

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

object ( Button )

Sabit altbilginin birincil düğmesi. Düğme, metin ve renk içeren bir metin düğmesi olmalıdır.

secondaryButton

object ( Button )

Sabit altbilginin ikincil düğmesi. Düğme, metin ve renk içeren bir metin düğmesi olmalıdır. secondaryButton ayarlanmışsa primaryButton ayarlanmalıdır.

Görüntüleme Stili

Google Workspace eklentilerinde, bir 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. Bu, kısmen yığının mevcut üst 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şturulmuş bir başlık kullanılır.
REPLACE Varsayılan değer. Kart, kart yığınındaki en üstteki kartın görünümü değiştirilerek gösterilir.