Bu sayfada, bir reklamverenin bileşenlerinin ve yapısının nasıl card. Kartlar kullanıcıdır Google Chat uygulamalarının sunum yapmak ve bilgi toplamak için kullanabileceği arayüzler Chat kullanıcılarından gelen bilgiler de dahildir. Chat uygulamaları oluşturabilir ve kartları aşağıdaki arayüzlerde görüntüler:
- Mesajlar içeren bir e-posta alırsınız.
- Ana sayfalar Bu, doğrudan Ana Sayfa sekmesinde görünen bir karttır. sohbet mesajı gönderebilir.
- İletişim kutuları, yani iletişim kutusunda yeni bir pencerede açılır.
Bu sayfada, bir kartın aşağıdaki bileşenleri hakkında bilgi edineceksiniz:
- Başlıklar: Genellikle bir kartın veya kartın başlığını içerir. bölümüne bakın.
- Ana gövdeyi oluşturan Bölümler widget'ları ve diğer etkileşimli öğeleri içeren kartı gösterir. Kartta bölümünde, sütunlar ve ızgaralar da dahil olmak üzere karta daha fazla yapı ekleyebilirsiniz.
- Sayfanın alt kısmında görünen Sabit altbilgiler iletişim kutularını kullanarak, düğmeler gibi kalıcı kullanıcı arayüzü öğelerini görüntüleyin.
Ön koşullar
Etkileşimli özellikler için etkinleştirilmiş bir Google Chat uygulaması. Bir aşağıdaki hızlı başlangıç kılavuzlarından birini kullanarak oluşturmak istediğiniz uygulama mimarisinde:
- Google Cloud Functions ile HTTP hizmeti
- Google Apps Komut Dosyası
- Google Cloud Dialogflow CX
- Google Cloud Pub/Sub
Chat uygulamaları için mesajlaşma ve kullanıcı arayüzleri tasarlayıp önizlemek üzere Kart Oluşturucu'yu kullanın:
Kart Oluşturucu'yu açınBaşlık ekleme
CardHeader
widget'ı
bir kartın başlığını temsil eder. Başlıklar bir
kartınız için başlık, alt başlık ve avatar resmi.
Aşağıda bir CardHeader
örneği verilmiştir:
Bir veya daha fazla kart bölümü ekleyin
CardSection
widget'ı
bir kart içinde üst düzey bir kapsayıcıdır. Kartı kullanıyorsunuz
çeşitli bölümler'i tıklayın. Her kart bölümü için
bir başlık ve bir veya daha fazla widget.
Aşağıda, iki textParagraph
içeren bir CardSection
örneği verilmiştir
widget'lar:
Widget'lar arasına yatay ayırıcı ekleyin
İlgili içeriği oluşturmak için kullanılan
divider
widget'ı
Bir kartın genişliğini kapsayan yatay bir çizgi görüntüler
widget'ların dikey olarak yığılmasına olanak tanır. Çizgi, birbirinden farklı şekillerde
Kullanıcılar widget'ları birbirinden ayırt ederek kartları kolayca tarayabilirler
anlıyoruz.
Aşağıda, diğer reklam öğesi türleri arasında divider
widget'ından oluşan bir kart
widget'lar:
Sütun ekleyin
İlgili içeriği oluşturmak için kullanılan
columns
widget'ı
Bir kartta en fazla 2 sütun gösterir. Ekleyebileceğiniz:
ekleyebilirsiniz. widget'lar ilk sıraya alındıklarında belirtiliyor.
2'den fazla sütun eklemek veya satırları kullanmak için grid
widget'ını kullanın.
Her bir sütunun yüksekliği, uzun sütuna göre belirlenir. Örneğin, ilk sütun ikinci sütundan daha uzunsa, her iki sütunda da yüksekliğini görebilirsiniz. Her sütun farklı bir sayı içerebileceği için durumda satır tanımlayamaz veya widget'ları sütunlar arasında hizalayamazsınız.
Aşağıdaki örnekte, şu özelliklere sahip bir columns
widget'ı içeren bir kart gösterilmektedir:
2 metin sütunu. Yalnızca sütun düzenini görüntülemek ve kodu daraltmak için
Daralt'ı tıklayın.
Aşağıdaki örnekte olduğu gibi alan kısıtlı olduğunda
ikinci sütun ilk sütunun altında sarmalanır.
Sütun genişliğini tanımlama
Sütunlar yan yana görüntülenir. Her sütunun genişliğini özelleştirebilirsiniz.
her bir arama terimi için
horizontalSizeStyle
alanı.
Kullanıcının ekran genişliği çok darsa ikinci sütun,
ad:
- Web'de, ekran genişliği şundan küçük veya bu değere eşitse ikinci sütun sarmalanır: 480 piksel.
- iOS cihazlarda, ekran genişliği 300 nk'e eşittir.
- Android cihazlarda, ekran genişliği şundan daha azsa ikinci sütun sarmalanır: veya 320 dp'ye eşit olmalıdır.
Aşağıdaki örnekte, şu özelliklere sahip bir columns
widget'ı içeren bir kart gösterilmektedir:
Sütunlarda 4 öğe bulunan 2 metin sütunu. Sütunlardaki her öğe
Metnin ne kadar alanını işlemek için horizontalSizeStyle
uygulandı
her bir sütunu doldurur:
- İlk metin paragrafında %30'dan fazla dolgu yapılmaması için
FILL_MINIMUM_SPACE
kullanılıyor genişliğine göre değişebilir. - İkinci metin paragrafı, mevcut
FILL_AVAILABLE_SPACE
boşluk ekleyin. Bu örnekte, müşterinin isteğine bağlı olarak dokunun. - Üçüncü metin paragrafı
horizontalSizeStyle
öğesini tanımlamaz, bu nedenle varsayılan olarak kullanabilirsiniz. - Dördüncü metin paragrafında %30'dan fazla doldurmamak için
FILL_MINIMUM_SPACE
kullanılıyor genişliğine göre değişebilir.
Bir sütunun yatay hizalamasını tanımlama
Widget'ları bir sütunun soluna, sağına veya ortasına yatay olarak hizalayabilirsiniz.
tanımlamak
horizontalAligment
alanı.
horizontalAlignment
alanı tanımlanmamışsa widget'lar
bir sütuna girelim.
Aşağıdaki örnekte, bir sütundaki metni yatay olarak sola hizalar:
Aşağıdaki örnekte, ortadaki bir sütun içindeki metni yatay olarak hizalar:
Aşağıdaki örnekte, bir sütundaki metni yatay olarak sağa hizalar:
Bir sütunun dikey hizalamasını tanımlama
Widget'ları bir sütunun üst, alt veya ortasına dikey olarak hizalayabilirsiniz.
tanımlamak
verticalAlignment
alanı.
verticalAlignment
alanı tanımlanmamışsa bir sütundaki widget'lar hizalanır
dokunun.
Aşağıdaki örnekte, bir sütundaki metin dikey olarak en üste hizalanır:
Aşağıdaki örnek, ortadaki bir sütun içindeki metni dikey olarak hizalar:
Aşağıdaki örnekte, en alttaki sütun içindeki metni dikey olarak hizalar:
Öğe koleksiyonunu görüntülemek için ızgara ekleyin
İlgili içeriği oluşturmak için kullanılan
grid
widget'ı
öğe koleksiyonunu içeren bir ızgara görüntüler. Izgara, istenilen sayıda
emin olmaktır. Satır sayısı, öğelerin sütunlara bölünmesiyle belirlenir.
10 öğe ve 2 sütun içeren bir ızgarada 5 satır vardır. 11 öğe ve 2 öğe içeren bir tablo
sütununda 6 satır var.
Widget, kullanıcıların tek tip veri girmesine yardımcı olan önerileri destekler ve
değişim üzerine yapılan işlemlerdir.
Actions
metin girişi alanında bir değişiklik gerçekleştiğinde (ör. kullanıcı ekleme işlemi veya
metin siliniyor.
Aşağıdaki örnekte, tek bir öğe içeren 2 sütunlu bir ızgara gösterilmektedir:
Metnin tablo içinde resimle birlikte nerede görüneceğini tanımlamak için
gridItemLayout
alanı.
Bu alan, metnin yukarıda mı yoksa aşağıda mı görüneceğini tanımlamanızı sağlar
ızgarada görebilirsiniz. gridItemLayout
tanımlanmazsa metin varsayılan olarak
çizelgedeki öğenin altında görünür.
Aşağıdaki örnekte, metin ve resim içeren üç sütunlu bir ızgara tıklayın. İlk ızgara, resmin üzerinde görünecek metni tanımlar, ikinci ızgara ızgara, resmin altında görünecek metni tanımlar, üçüncü ızgara ise metnin konumu.
Izgaraya veya sütuna kenarlık ekleme
column
veya grid
widget'ında görünen öğeler için şunlara kenarlık ekleyebilirsiniz:
tanımlayarak bu kullanıcı arayüzü öğelerini
borderType
alanı
ve
borderStyle
alanına dokunun.
Herhangi bir borderStyle
alanı tanımlanmamışsa varsayılan olarak kenarlık gösterilmez. Şunları yapabilirsiniz:
bir widget'taki tüm öğelere uygulanacak bir borderType
tanımlayın veya stili uygulayın
otomatik olarak ekler.
Aşağıdaki örnekte, her ızgarada bir resim içeren 2 sütunlu bir ızgara verilmiştir. kenarlık türü, stil ve renk, kapsamdaki tüm öğelere uygulanacak şekilde ızgara.
Aşağıdaki örnekte, her ızgarada bir resim ve
kenarlık stili ve türü ayrı ayrı tanımlanır. İlk
resmin STROKE
olarak tanımlanmış bir sınırı var. İkinci resmin kenarlığı
NO_BORDER
Üçüncü resimde tanımlı bir kenarlık yoktur.
Kalıcı altbilgi ekleme
CardFixedFooter
widget'ı, bu e-posta adresi tarafından gönderilen
Chat uygulaması
Altbilgiler, birincil ve ikincil düğme içerebilir.
CardFixedFooter
widget'ı yalnızca şunlar için kullanılabilir:
iletişim kutuları.
Aşağıda, iki düğmeli bir CardFixedFooter
widget'ı örneği verilmiştir:
Sorun giderme
Bir Google Chat uygulaması veya card bir hata döndürürse Chat arayüzünde "Bir sorun oluştu" mesajı gösteriliyor. veya "İsteğiniz işlenemiyor." Chat kullanıcı arayüzü herhangi bir hata mesajı görüntülenmiyor ancak Chat uygulaması veya kart beklenmeyen bir sonuç veriyorsa; Örneğin karttaki bir mesajda görünür.
Chat kullanıcı arayüzünde hata mesajı görüntülenmese de Hataları düzeltmenize yardımcı olmak için açıklayıcı hata mesajları ve günlük verileri sunulur Chat uygulamaları için hata günlük kaydı etkinleştirildiğinde. Görüntüleme konusunda yardım için ve hataları düzeltme ile ilgili daha fazla bilgi edinmek için Google Chat hatalarını giderme ve düzeltme