media_gallery

Görseller, yanıtın kendisi görseller olduğunda kullanılır. media_gallery, bir ila on iki https görseli alır ve bunları bir ızgara veya karusel olarak yerleştirir.

Izgara, bir görselin bulunması gereken yerde boşluk bırakmak yerine son satırını doldurur; böylece beş görsel, üç artı iki yerine bütünlüklü tek bir blok olarak görünür.

Bir görsel, altında bir caption ve bir video_url taşıyabilir (Flutter 0.44.0, Web 0.21.0).

Ekran görüntüsü değildir; tarayıcınızda SDK'nın kendi boyut ve renkleriyle canlı olarak çizilir.

Flutter SDK ve Web SDK ile, her ikisi de 0.1.0 sürümünden itibaren yerel olarak render edilir.

Ne zaman kullanılmamalı

Fiyatı olan tek bir ürün çekimi için bunu kullanmayın. Görseli bir bağlama oturtan bileşen product_cards bileşenidir.

Ayrıntıların üzerinde bir hero görseli olarak da kullanmayın. Altında bir başlık, saat ve konum bulunan bir görsel booking_card bileşenidir.

Props

Her blok ayrıca type ve 1 ila 300 karakterden oluşan zorunlu bir fallback_text taşır.

Ağ üzerinde

{
  "id": "blk_16",
  "type": "media_gallery",
  "fallback_text": "Five photographs of the Aero Glide 2.",
  "props": {
    "layout": "grid",
    "images": [
      {
        "url": "https://cdn.example.com/aero-side.jpg",
        "alt": "Aero Glide 2 from the side"
      },
      {
        "url": "https://cdn.example.com/aero-sole.jpg",
        "alt": "The outsole tread pattern"
      },
      {
        "url": "https://cdn.example.com/aero-heel.jpg",
        "alt": "Reflective heel counter"
      }
    ]
  }
}

Etkileşim

video_url içeren bir görsel, o videonun posteridir: dokunulduğunda Rendel dışında, platformun oynatıcısında veya yeni bir sekmede oynatılır. Web'de diğer tüm görseller yeni bir sekmede tam boyutta açılır; Flutter SDK'da ise dokunulabilir değildir. Lightbox yoktur. Karusel yatay olarak kayar.

Durumlar

Erişilebilirlik

alt, görselin erişilebilir adıdır ve doğrudan ekran okuyucuya ulaşır. Bu değer olmadan bir görsel, açıklama yerine bir konum belirten “Image 3 of 5” ifadesine döner. alt değerini sağlayın.

fallback_text, setin ne gösterdiğini ve kaç adet olduğunu belirtmelidir.