nili/ui
enfaartr
Tüm bileşenler

ProgressBar

Genel görünüm
15 export5 varyant ekseni41 prop4 dosya
import { ProgressBar, ProgressCircle } from '@nili/ui';

Bu, kütüphanenin kendi genel görünüm sayfası — canlı olarak render ediliyor. Üstten dili veya temayı değiştirin, o da değişir.

Temel

value 0…max aralığına kırpılır. Görünür etiketi olmayan çıplak bir çubuk aria-label ister — bir tablo hücresinde onu adlandıracak başka bir şey yoktur.

Storage%70
Dosyalar10 dosyanın 7’si
import { ProgressBar } from "@nili/ui"

export function Example() {
  return (
    <>
      <ProgressBar value={35} aria-label={t('upload')} />
      <ProgressBar value={70} label={t('storage')} showValue />
      <ProgressBar value={7} max={10} label="Files" valueLabel="7 of 10 files" />
    </>
  )
}

Renkler

Dört renk. Renk bir sinyaldir, süs değil — warning ve error, sayının yüksek değil kötü olduğunu anlatmalı.

primary%40
success%100
warning%85
error%95
import { ProgressBar } from "@nili/ui"

export function Example() {
  return (
    <>
      <ProgressBar value={40} color="primary" label="Primary" />
      <ProgressBar value={100} color="success" label="Success" />
      <ProgressBar value={85} color="warning" label="Warning" />
      <ProgressBar value={95} color="error" label="Error" />
    </>
  )
}

Etiket konumu ve eylemler

labelPosition, Figma’daki On Top / On Right’tır ve mantıksaldır — end okuma yönünü izler. linkButton çubuğun altındaki eylemdir.

üstte
Depolama%60
sonda
Depolama%60
bir eylemle
Depolama%92
Planı yükselt
import { ProgressBar, LinkButton } from "@nili/ui"

export function Example() {
  return (
    <>
      <ProgressBar value={60} label="Storage" labelPosition="top" showValue />
      <ProgressBar value={60} label="Storage" labelPosition="end" showValue />

      <ProgressBar
        value={92}
        color="warning"
        label="Storage"
        showValue
        linkButton={<LinkButton href="#" size="sm">Upgrade plan</LinkButton>}
      />
    </>
  )
}

Belirsiz

Süresi bilinmeyen işler için. aria-valuenow’u düşürür; böylece yardımcı teknoloji bir yüzde uydurmak yerine “meşgul” der.

Syncing…
import { ProgressBar, ProgressCircle } from "@nili/ui"

export function Example() {
  return (
    <>
      <ProgressBar indeterminate label={t('indet.syncing')} />
      <ProgressCircle indeterminate aria-label={t('indet.loading')} />
    </>
  )
}

İlerleme halkası

Aynı API, halka biçiminde. Altı boyut ve varsayılan kalınlık bağlama uymadığında piksel cinsinden thickness.

boyutlar
%65
80
%65
72
%65
64
%65
56
%65
48
%65
40
renkler
%40
%100
%85
%95
kalınlık ve özel merkez
%65
%65
13/20
import { ProgressCircle } from "@nili/ui"

export function Example() {
  return (
    <>
      <ProgressCircle value={65} showValue aria-label="Complete" />
      <ProgressCircle value={65} size={80} showValue aria-label="Complete" />
      <ProgressCircle value={65} thickness={2} showValue aria-label="Complete" />

      {/* anything in the middle */}
      <ProgressCircle value={65} aria-label="Complete">
        <span className="text-[12px]">65/100</span>
      </ProgressCircle>
    </>
  )
}