product_cards

Satın alınacak şeyler, satın alınacak şeyler şeklinde gösterilir. product_cards, her ögeye gerçek bir görsel, tablo rakamlarıyla bir fiyat ve isteğe bağlı tek bir rozet verir; bu rozet, karta ikinci kez bakmaya değer kılan nedendir.

Tek bir öge, solda tek bir kart olarak işlenir. İki veya daha fazlası, sayfanın kendi sol kenarından başlayarak tümü en yüksek kartın yüksekliğinde olan yatay bir şeride dönüşür.

chips: Flutter 0.44.0 / Web 0.21.0 sürümünden bu yana, başlığın altında en fazla dört kısa bilgi (“3+1”, “120 m²”).

Çok satanAero Glide 2Volt / beyaz★★★★★★★★★★4.7 (1,284)$129

Court LowBone deri★★★★★★★★★★4.2 (96)$95

Trail CircuitArduvaz / yosun$149

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ıdır

Sipariş geçmişi veya görselin ikincil planda kaldığı başka herhangi bir durum için kullanmayın. item_list daha yoğundur ve daha hızlı okunur.

Bir aboneliğin katmanlarını karşılaştırmak için kullanmayın; bu bir comparison bileşenidir. Tek bir ürünün fotoğraf galerisi olarak da kullanmayın; bu bir media_gallery bileşenidir.

Props

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

Ağ üzerinde

{
  "id": "blk_04",
  "type": "product_cards",
  "fallback_text": "Three running shoes under $150.",
  "props": {
    "items": [
      {
        "title": "Aero Glide 2",
        "subtitle": "Road, neutral",
        "price": "$129",
        "badge": "Best seller",
        "image_url": "https://cdn.example.com/aero-glide-2.jpg",
        "action": {
          "kind": "reply",
          "text": "Add Aero Glide 2 in size 43"
        }
      },
      {
        "title": "Court Low",
        "subtitle": "Everyday, leather",
        "price": "$95",
        "image_url": "https://cdn.example.com/court-low.jpg",
        "action": {
          "kind": "reply",
          "text": "Add Court Low in size 42"
        }
      },
      {
        "title": "Trail Circuit",
        "subtitle": "Trail, waterproof",
        "price": "$149",
        "image_url": "https://cdn.example.com/trail-circuit.jpg"
      }
    ]
  }
}

Etkileşim

Bir yanıt sayfasında dokunulduğunda kartın detayı açılır: görsellerini (image_url ve images), adını ve fiyatını aynı anda, ardından detay ulaştıkça içeriği gösteren bir alt sayfa (sheet). İlk aksiyonu mikrofonun yanında belirir ve alt sayfayı kapatmak sayfayı eski haline getirir. action değeri open_url olan bir kart ise bunun yerine bağlantıyı uygulama içi bir tarayıcıda veya RendelConfig.onOpenUrl aracılığıyla açar; yalnızca https. Derlemenin bildirdiği her aksiyon türü geçerlidir (bkz. Actions).

Şerit yatay olarak kayar; sayfalandırma yapmaz ve okları yoktur, çünkü telefonda sağ kenardaki kesik kart yönlendirici unsurdur (affordance).

Durumlar

Erişilebilirlik

fallback_text, ögeleri tek tek listelemek yerine kümeyi adlandırmalıdır: “150 $ altındaki üç koşu ayakkabısı.” Fiyatlar her kartın kendi etiketinden okunur.