ProgressBar

Kurulum

Paket

@bigbang/ui

İçe aktarma

import { ProgressBar } from '@bigbang/ui';

Kaynak

ProgressBar.tsx

Storybook

ProgressBar · Playground

ProgressBar, @bigbang/ui paketindedir.

import { ProgressBar } from '@bigbang/ui';

<ProgressBar label="Dosya yükleniyor" value={progress} description="Yaklaşık 2 dakika kaldı" />;

Özellikler

labelZorunlu

Açıklama

Neyin sürdüğü, ör. "Dosya yükleniyor". Her zaman verilir; bağlam gösteriyorsa hideLabel ile gizleyin.

Tür

string

value

Açıklama

İlerleme, 0 ile max arasında. Kalan süre bilinmiyorsa vermeyin ya da null verin: çubuk kayar.

Tür

number | null

max

Açıklama

Tamamlanma değeri.

Tür

number

Varsayılan

100

showValue

Açıklama

Değeri Provider dilinde yüzde olarak gösterir ("%40" ya da "40%"). Belirsiz durumda gösterilmez.

Tür

boolean

Varsayılan

true

valueText

Açıklama

Yüzde yerine okunan değer, ör. "10 dosyadan 3'ü".

Tür

string

description

Açıklama

Çubuğun altında tek satır, ör. kalan süre; çubuğun açıklaması olarak bağlanır.

Tür

ReactNode

size

Açıklama

Kalınlık: 4 ya da 8 px.

Tür

'sm' | 'md'

Varsayılan

'sm'

tone

Açıklama

Dolgu rengi: marka eylem rengi ya da sonuç belli olunca durum rengi (success, warning, danger); sınırına yaklaşan bir kota için warning.

Tür

'brand' | 'success' | 'warning' | 'danger'

Varsayılan

'brand'

hideLabel

Açıklama

Etiketi ve değeri görsel olarak gizler; ekran okuyucu yine okur.

Tür

boolean

Varsayılan

false

Veri öznitelikleri

• data-component="progress-bar" ve data-tone: kök üzerinde. data-part="fill": dolgu.
• data-indeterminate, data-progressing, data-complete: Base UI’dan.