Bir kartın veya iletişim kutusunun yapısını biçimlendirme

Bu sayfada, bir kart veya iletişim kutusu mesajında widget'ların nasıl biçimlendirileceği ve yapılandırılacağı açıklanmaktadır.

Kart Oluşturucu ile kartları tasarlayın ve önizleyin.

Card Builder'ı açın

Ön koşullar

  • Google Chat'e erişimi olan bir Google Workspace hesabı.
  • Yayınlanmış bir Chat uygulamasıdır. Chat uygulaması oluşturmak için bu quickstart takip edin.

    • Kartları ve iletişim kutularını sütunlarda görüntüleme

    columns widget'ı bir kart veya iletişim kutusunda en fazla 2 sütun gösterir. Her bir sütuna widget ekleyebilirsiniz. Widget'lar belirtildikleri sırayla görünür. 2'den fazla sütun eklemek veya satırları kullanmak için grid widget'ını kullanın.

    Her sütunun yüksekliği, daha uzun olan sütuna göre belirlenir. Örneğin, ilk sütun ikinci sütundan uzunsa her iki sütun da ilk sütunun yüksekliğine sahip olur. Her sütun farklı sayıda widget içerebileceğinden satırları tanımlayamaz veya widget'ları sütunlar arasında hizalayamazsınız.

    Aşağıdaki örnekte, 2 metin sütunu içeren columns widget'ının yer aldığı bir kart gösterilmektedir. Yalnızca sütun düzenini görüntülemek ve kod örneğini daraltmak için Daralt'ı tıklayın. Aşağıdaki örnekte olduğu gibi alan kısıtlandığında ikinci sütun ilk sütunun altına doğru kaydırılır.

    Bir sütunun genişliğini tanımlama

    Sütunlar yan yana gösterilir. horizontalSizeStyle alanını kullanarak her bir sütunun genişliğini özelleştirebilirsiniz. Kullanıcının ekran genişliği çok darsa ikinci sütun birincinin altına kaydırılır:

    • Web'de, ekran genişliği 480 pikselden az veya 480 piksele eşitse ikinci sütun sarmalanır.
    • iOS cihazlarda, ekran genişliği 300 puntodan az veya 300 punto'ya eşitse ikinci sütun sarmalanır.
    • Android cihazlarda ekran genişliği 320 dp'den az veya 320 dp'ye eşitse ikinci sütun sarmalanır.

    Aşağıdaki örnekte, sütunlarda 4 öğe bulunan 2 metin sütunu içeren columns widget'ının yer aldığı bir kart gösterilmektedir. Metnin her bir sütunu ne kadar doldurduğunu değiştirmek için sütunlardaki her öğeye horizontalSizeStyle uygulandı:

    • İlk metin paragrafında, kart genişliğinin %30'undan fazlasını doldurmayacak şekilde FILL_MINIMUM_SPACE kullanılır.
    • İkinci metin paragrafında, kartın genişliğindeki kullanılabilir alanı doldurmak için FILL_AVAILABLE_SPACE kullanılır. Bu örnekte, kart genişliğinin% 70'ini kaplar.
    • Üçüncü metin paragrafı horizontalSizeStyle özelliğini tanımlamadığından, varsayılan olarak kart alanındaki mevcut alanı doldurur.
    • Dördüncü metin paragrafında, kart genişliğinin %30'undan fazlasını doldurmayacak şekilde FILL_MINIMUM_SPACE kullanılır.

    Bir sütunun yatay hizalamasını tanımlama

    horizontalAligment alanını tanımlayarak widget'ları bir sütunun soluna, sağına veya ortasına yatay olarak hizalayabilirsiniz. horizontalAlignment ekranı tanımlanmamışsa widget'lar sütunda sola hizalanır.

    Aşağıdaki örnek, bir sütundaki metni sola doğru yatay olarak hizalar:

    Aşağıdaki örnek, ortadaki bir sütunda bulunan metni yatay olarak hizalar:

    Aşağıdaki örnek, bir sütundaki metni sağa doğru yatay olarak hizalar:

    Bir sütunun dikey hizalamasını tanımlama

    verticalAlignment alanını tanımlayarak widget'ları bir sütunun üst, alt veya ortasına dikey olarak hizalayabilirsiniz. verticalAlignment alanı tanımlanmamışsa bir sütundaki widget'lar en üste hizalanır.

    Aşağıdaki örnek, bir sütundaki metni dikey olarak üste hizalar:

    Aşağıdaki örnek, ortadaki bir sütunda bulunan metni dikey olarak hizalar:

    Aşağıdaki örnek, alt kısımdaki bir sütunda bulunan metni dikey olarak hizalar:

    Widget'lar arasına yatay bir ayırıcı ekleme

    divider widget'ı, dikey olarak yığılmış widget'lar arasında bir kartın genişliğini kapsayan yatay bir çizgi görüntüler. Bu çizgi, kullanıcıların bir widget'ı diğer widget'lardan ayırt etmesine yardımcı olarak görsel bir ayırıcıdır. Bu da kartların taranmasını ve anlaşılmasını kolaylaştırır.

    Aşağıda, diğer widget türleri arasındaki divider widget'ından oluşan bir kart gösterilmektedir:

    Öğe koleksiyonu içeren bir ızgara görüntüleme

    grid widget'ı, öğe koleksiyonunu içeren bir ızgara görüntüler. Izgara, sınırsız sayıda sütun ve öğeyi destekler. Satır sayısı, öğelerin sütunlara bölünmesiyle belirlenir. 10 öğe ve 2 sütunlu bir ızgarada 5 satır bulunur. 11 öğeli ve 2 sütunlu bir ızgarada 6 satır vardır.

    Widget, kullanıcıların tek tip veri girmelerine yardımcı olan önerileri ve değişiklik sırasında işlemleri destekler. Actions Bu işlemler, metin giriş alanında bir kullanıcı metin ekleme veya silme gibi bir değişiklik gerçekleştiğinde çalışır.

    Aşağıdaki örnekte, tek bir öğe içeren 2 sütunlu bir ızgara gösterilmektedir:

    Izgara içindeki resimle birlikte metnin nerede görüneceğini tanımlayın

    gridItemLayout alanı, metnin ızgaradaki öğenin üstünde mi yoksa altında mı görüneceğine bakılmaksızın her bir gridItem içinde tanımlayabilmenizi sağlar. gridItemLayout tanımlı değilse metin, varsayılan olarak ızgarada öğenin altında görünür

    Aşağıdaki örnekte, her birinde metin ve bir resim bulunan 3 sütunlu bir ızgara gösterilmektedir. İlk ızgara, resmin üzerinde görünecek metni, ikinci ızgara, resmin altında görünecek metni, üçüncü ızgara ise metnin konumunu tanımlamaz.

    Kullanıcı arayüzü öğelerine kenarlık ekleme

    column veya grid widget'ında görünen öğeler için bir borderType alanı ve borderStyle alanı tanımlayarak bu kullanıcı arayüzü öğelerine kenarlık ekleyebilirsiniz. borderStyle alanı tanımlanmazsa varsayılan olarak kenarlık gösterilmez. Bir widget içindeki tüm öğelere veya stili bir widget içindeki her bağımsız öğeye uygulamak için bir borderType tanımlayabilirsiniz.

    Aşağıdaki örnekte kenarlık türü, stil ve rengin ızgara içindeki tüm öğelere uygulanacak şekilde tanımlandığı her ızgarada bir resim bulunan 2 sütunlu bir ızgara gösterilmiştir.

    Aşağıdaki örnekte her bir ızgarada bir resim bulunan ve kenarlık stili ile türünün ayrı ayrı tanımlandığı 3 sütunlu bir ızgara gösterilmektedir. İlk resimde STROKE olarak tanımlanmış bir kenarlık vardır. İkinci resimde NO_BORDER olarak tanımlanmış bir kenarlık vardır. Üçüncü resimde tanımlanmış kenarlık yok.

    Sorun giderme

    Bir Google Chat uygulaması veya kart hata döndürdüğünde Chat arayüzünde "Bir sorun oluştu." veya "İsteğiniz işleme alınamıyor" mesajı gösterilir. Bazen Chat kullanıcı arayüzünde hata mesajı gösterilmez ancak Chat uygulaması veya kartı beklenmedik bir sonuç üretir. Örneğin, kart mesajı görünmeyebilir.

    Chat kullanıcı arayüzünde hata mesajı gösterilmese de, Chat uygulamaları için hata günlük kaydı etkinken hataları düzeltmenize yardımcı olacak açıklayıcı hata mesajları ve günlük verileri mevcuttur. Hataları görüntüleme, hata ayıklama ve düzeltme konusunda yardım için Google Chat hatalarını giderme ve düzeltme başlıklı makaleyi inceleyin.