İlerleme

Ne kadar kaldığını bildiğiniz her durumda belirli bir çubuk kullanın — okura bir şey söyleyen tek çubuk odur. value propunu atlayın, bunun yerine çubuk canlanır; bu “hâlâ çalışıyor” der, fazlasını değil.

Belirli

stack({ gap: 'lg' },
  progress({ value: 25 }),
  progress({ value: 60 }),
  progress({ value: 100 }),
)

Belirsiz

progress()

label taşımayan bir çubuk aria-hidden ile işaretlenir — erişilebilir adı olmayan bir progressbar rolü bir ekran okuyucuya hiçbir şey söylemez, bu yüzden etiketsiz bir çubuk süs sayılır. Okurun izlemesi gereken her şeyi etiketleyin.

Etiketler

Etiket neler olduğunu adlandırır; showValue sağa yüzdeyi ekler.

stack({ gap: 'lg' },
  progress({ value: 72, label: 'Sayfalar işleniyor', showValue: true }),
  progress({ value: 30, max: 60, label: 'Görseller optimize ediliyor', showValue: true }),
  progress({ label: 'Dağıtım bekleniyor' }),
)

Renkler ve yükseklik

stack({ gap: 'lg' },
  progress({ value: 80, color: 'success', label: 'Geçti', showValue: true }),
  progress({ value: 45, color: 'warning', label: 'Zayıfladı', showValue: true }),
  progress({ value: 20, color: 'danger', label: 'Başarısız', showValue: true }),
  progress({ value: 60, color: 'neutral', height: 'xs' }),
  progress({ value: 60, color: 'primary', height: '1rem' }),
)

100 dışında bir ölçek

max önce bir yüzde hesaplamak yerine ham sayıları geçirmenizi sağlar — toplam sayfa içinden derlenen sayfalar.

progress({ value: 118, max: 169, label: '169 sayfadan 118’i', showValue: true })

Tarayıcıdan hareket ettirmek

Çubuk sunucuda işlenmiş HTML’dir: yüzde, dolgudaki bir özel özellik ve aria-valuenow içindeki bir sayıdır; sayfadaki hiçbir şey ikisini de kendiliğinden değiştirmez. Çubuğa bir id verin, setProgress ikisini birlikte hareket ettirsin — dolgu, duyurulan değer ve etiketin yanındaki yüzde.

import { setProgress } from 'sitelo/ui/client'

const request = new XMLHttpRequest()

request.upload.addEventListener('progress', (event) => {
  setProgress('upload', event.loaded, { max: event.total })
})

En büyük değer hatırlanır, bu yüzden sonraki çağrılar yalnızca bir değerdir. Ya da modüle, bileşenlerin kendi modüllerine uzandığı biçimde uzanın ve paketi tümüyle atlayın:

button({ onclick: "import('/su/progress.js').then(m=>m.set('upload',100))" }, 'Bitir')

null — ya da sonlu bir sayı olmayan herhangi bir şey — geçirmek çubuğu belirsiz canlandırmaya geri verir, böylece sayı bildirmeyi bırakan işlerin ayrıca ele alınması gerekmez. getProgress() geçerli değeri, çubuğun kendi ölçeğinde geri okur.

Deneyin

Bu sayfa çalışma zamanını yükler, bu yüzden aşağıdaki düğmeler çubuğu gerçekten hareket ettirir.

stack({ gap: 'md' },
  progress({ id: 'demo-progress', value: 0, label: 'Yükleniyor', showValue: true }),
  stack({ direction: 'row', gap: 'sm', wrap: true },
    button({ size: 'sm', variant: 'outline', onclick: "import('/su/progress.js').then(m=>m.set('demo-progress',0))" }, 'Sıfırla'),
    button({ size: 'sm', variant: 'outline', onclick: "import('/su/progress.js').then(m=>m.set('demo-progress',35))" }, '%35'),
    button({ size: 'sm', variant: 'outline', onclick: "import('/su/progress.js').then(m=>m.set('demo-progress',80))" }, '%80'),
    button({ size: 'sm', variant: 'outline', onclick: "import('/su/progress.js').then(m=>m.set('demo-progress',100))" }, 'Bitti'),
    button({ size: 'sm', variant: 'ghost', onclick: "import('/su/progress.js').then(m=>m.set('demo-progress',null))" }, 'Bilinmiyor'),
  ),
)

Etiketsiz bir çubuk da hareket ettirilir ama aria-hidden kalır — bilerek adsız işlenmişti ve şimdi üzerinde bir değer duyurmak erişilebilirlik ağacına adsız bir progressbar koyardı.

Döndürücü

Bir döndürücü bileşeni yoktur — döndürücü bir simgedir ve onu döndüren şey spin propudur. Her simge gibi em cinsinden boyutlandırılır, bu yüzden kendisine bir boyut söylenmeden yanındaki metne uyar.

stack({ direction: 'row', gap: 'lg', align: 'center' },
  icon('spinner', { spin: true, size: 'sm' }),
  icon('spinner', { spin: true }),
  icon('spinner', { spin: true, size: 'lg' }),
)

Bağlam içinde döndürücü

Tek başına duran bir döndürücüye duyurulsun diye bir label verin. Bir düğmenin içindekine gerekmez — düğme ne yaptığını zaten söyler.

stack({ gap: 'md' },
  stack({ direction: 'row', gap: 'sm', align: 'center' },
    icon('spinner', { spin: true, label: 'Yükleniyor' }),
    text({ variant: 'small', tone: 'muted' }, 'Son derleme getiriliyor…'),
  ),
  stack({ direction: 'row', gap: 'sm' },
    button({ loading: true }, 'Dağıtılıyor'),
    button({ variant: 'outline', loading: true }, 'Bağlantılar denetleniyor'),
  ),
)

Proplar

progress() — progressBar olarak da dışa aktarılır:

sitelo/ui/client içindeki setProgress():

Döndürücünün kendine ait propu yoktur — o icon('spinner', { spin: true }) ifadesidir ve icon() ne alıyorsa onu alır.