key_points
Her biri bir ikon, bir başlık ve bir satırdan oluşan birkaç madde: bir seçimin arkasındaki nedenler.
Hızlıca göz gezdirilmek üzere düzenlenmiş gerekçeler. key_points, bir yanıt sayfasının neden sorusunu açıklama biçimidir: neden bu ayakkabı, bu planı işe yarar kılan ne, nelere dikkat edilmeli. Her madde bir ikon, birkaç kelimelik bir başlık ve altında isteğe bağlı bir satırdan oluşur.
Aynı zamanda bir karşılaştırmanın sonundaki karar rehberidir: başlık ihtiyaçtır (“En rahatı”), satır ise seçimdir (“Aero Glide 2”).
Artı ve eksi yönler için tone değerini ayarlayın: positive ikon yerine bir +, negative ise bir − çizer ve bir ekran okuyucu başlıktan önce “Pro:” veya “Con:” duyar. Flutter 0.44.0 ve Web 0.21.0 sürümünden beri.
- 43 beden stoktaBugün Rotterdam'dan kargoya verilmeye hazır.
- Ücretsiz teslimatAlt sınır olmadan perşembe kapınızda.
- 30 gün içinde iadeBir iki koşudan sonra bile.
Ekran görüntüsü değildir; tarayıcınızda SDK'nın kendi boyut ve renkleriyle canlı olarak çizilir.
Flutter SDK ile 0.34.0 ve Web SDK ile 0.11.0 sürümünden itibaren yerel olarak render edilir. Bunu bildirmeyen bir derlemeye asla sunulmaz.
Ne zaman kullanılmamalı
Tek bir şey hakkındaki olgular için değildir, bunlar key_value bileşenidir: bir tarih, bir boyut ve bir fiyat tek bir şeye dair olgulardır, gerekçe değildir. Kullanıcının sırayla tamamladığı adımlar için değildir, bunlar bir checklist bileşenidir; zaman sırasına göre planlanan şeyler için bir timeline veya tek bir sürecin ilerleyişi için order_tracker kullanılır.
Üç veya dört madde ideal yapıdır. Sekiz sınırdır, hedef değil: dörtten sonra okuyucu göz gezdirmeyi bırakır ve okumaya başlar.
Props
Her blok ayrıca type ve 1 ila 300 karakter uzunluğunda zorunlu bir fallback_text taşır.
| Prop | Tür | Zorunlu | Kısıtlamalar |
|---|---|---|---|
items | array | Evet | 1 ila 8 öğe. |
items[].icon | string | Hayır | En fazla 40 karakter. info_card simge adlarından biri. Bilinmeyen bir ad hiçbir simge çizmez ve sütunu korur. |
items[].title | string | Evet | 1 ila 80 karakter. |
items[].body | string | Hayır | En fazla 240 karakter. |
items[].tone | positive | negative | neutral | Hayır | Yok |
Ağ üzerinde
{
"id": "blk_31",
"type": "key_points",
"fallback_text": "Size 43 is in stock, delivery is free, and returns are open for 30 days.",
"props": {
"items": [
{ "icon": "check", "title": "Size 43 in stock", "body": "Ready to ship from Rotterdam today." },
{ "icon": "truck", "title": "Free delivery", "body": "At your door on Thursday, no minimum." },
{ "icon": "clock", "title": "30-day returns", "body": "Even after a run or two." }
]
}
}Etkileşim
Yoktur. Maddeler salt bir gösterimdir.
Erişilebilirlik
Her madde, başlığı ve ardından satırı gelecek şekilde seslendirilir. İkon dekoratiftir ve seslendirilmez; başlık ne anlama geldiğini açıklar.