progress

Kullanıcının bir süreçte ne kadar ilerlediği. progress, üst sınırlarına karşı en fazla altı miktarı gösterir: bir pakete karşı kullanılan veri, bir hedefe karşı tamamlanan oturumlar, bir bakiyeye karşı harcanan kredi.

Varlık sebebi, oranın asıl yanıt olmasıdır. “15 GB üzerinden 8,2” size bir sayı söyler; bir çubuk ise endişelenmeniz gerekip gerekmediğini söyler.

style: ring, bir bakışta okunabilecek şekilde bir ila üç hedefi halka olarak çizer; üçten fazla öge olduğunda çubuk olarak kalırlar. Varsayılan değer bar seçeneğidir (Flutter 0.44.0 ve Web 0.21.0 sürümünden itibaren halkalar).

Kicks Club

Ücretsiz çift için biriken ayakkabı sayısı2 / 5

Her takvim yılında sıfırlanır.

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ı

Üst sınırı olmayan bir sayı için kullanmayın. Sipariş sayısı bir stat_group bileşenidir; çünkü çubuğun doldurabileceği bir hedef yoktur.

Zaman içindeki değerlerin geçmişi için kullanmayın, bunun karşılığı chart bileşenidir; bir teslimattaki ilerlemeyi göstermek için de kullanmayın, bunun karşılığı order_tracker bileşenidir: Bir teslimat bir yüzdeye değil, adlandırılmış adımlara sahiptir.

Props

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

Prop	Tür	Zorunlu	Kısıtlamalar
`title`	string	Hayır	En fazla 120 karakter.
`items`	array	Evet	1 ila 6 öğe.
`items[].label`	string	Evet	1 ila 60 karakter.
`items[].value`	number	Evet	`max` ile aynı birimde, geçerli miktar.
`items[].max`	number	Evet	0'dan büyük. Çubuğun doldurmaya doğru ilerlediği üst sınır.
`items[].value_label`	string	Hayır	En fazla 40 karakter. Varsayılan “value / max” gösterimini geçersiz kılar.
`items[].caption`	string	Hayır	En fazla 120 karakter.
`style`	`bar` \| `ring`	Hayır	Yok

Ağ üzerinde

{
  "id": "blk_18",
  "type": "progress",
  "fallback_text": "Two of five pairs toward a free pair.",
  "props": {
    "title": "Kicks Club",
    "items": [
      {
        "label": "Pairs toward a free pair",
        "value": 2,
        "max": 5,
        "value_label": "2 of 5",
        "caption": "Resets every calendar year."
      },
      {
        "label": "Store credit used",
        "value": 18.5,
        "max": 40,
        "value_label": "$18.50 of $40"
      }
    ]
  }
}

Etkileşim

Yoktur. progress bir göstergedir ve etkileşimli prop'ları yoktur.

Durumlar

Durum	SDK'nın çizdiği
Loading	Gerçek yükseklikteki izin üzerinde bir etiket çubuğu.
Zero	Okuyucunun sıfırı eksik olandan ayırt edebilmesi için sınır çizgisi korunmuş boş bir iz.
Over the maximum	Dolgu, kendi izinden taşmak yerine %100'de sabitlenir.
Empty	Boş bir `items` dizisi, plaka içinde `fallback_text` değerini işler.

Erişilebilirlik

Her çubuk etiketini, değer göstergesini, varsa alt başlığını ve yüzdesini seslendirir (“Ücretsiz bir çifte doğru çiftler, 5 üzerinden 2, yüzde 40”); böylece oran sadece çizilmekle kalmaz, sesli olarak da aktarılır. Dolgu, vurgu renginizle değil mürekkep rengiyle çizilir: Çubuk bir göstergedir ve vurgu rengi okuyucunun etkileşime geçebileceği unsurları belirtir. Doldurulmamış iz, gömülü olmak yerine plaka üzerine çizilir ve kendi 3:1 sınırını taşır; çünkü dolgunun ön kenarı mesajın tamamıdır.

fallback_text oranı sözcüklerle belirtmelidir.