nili/ui
enfaartr
همه‌ی کامپوننت‌ها

ProgressBar

نمای کلی
۱۵ اکسپورت۵ محور واریانت۴۱ پراپ۴ فایل
import { ProgressBar, ProgressCircle } from '@nili/ui';

این همان صفحه‌ی نمای کلیِ خود کتابخانه است که زنده رندر می‌شود. زبان یا تم را از هدر عوض کنید، همراهش می‌آید.

پایه

value بین ۰ تا max محدود می‌شود. نواری که برچسب دیده‌شدنی ندارد به aria-label نیاز دارد — در یک سلول جدول چیز دیگری برای نام‌دادن به آن نیست.

Storage۷۰٪
فایل‌ها۷ از ۱۰ فایل
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" />
    </>
  )
}

رنگ‌ها

چهار رنگ. رنگ یک سیگنال است نه تزئین — warning و error باید یعنی عدد بد است، نه صرفاً بزرگ.

primary۴۰٪
success۱۰۰٪
warning۸۵٪
error۹۵٪
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" />
    </>
  )
}

جای برچسب و کنش‌ها

labelPosition همان On Top / On Right فیگماست و منطقی است — end از جهت خواندن پیروی می‌کند. linkButton کنشی است که زیر نوار می‌نشیند.

بالا
فضای ذخیره۶۰٪
انتها
فضای ذخیره۶۰٪
همراه با یک کنش
فضای ذخیره۹۲٪
ارتقای پلن
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>}
      />
    </>
  )
}

نامعیّن

برای کاری که مدتش معلوم نیست. aria-valuenow را حذف می‌کند، پس فناوری کمکی «مشغول» را اعلام می‌کند به‌جای اینکه درصدی از خودش بسازد.

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

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

دایرهٔ پیشرفت

همان API در قالب یک حلقه. شش اندازه، و thickness برحسب پیکسل وقتی ضخامت پیش‌فرض به کار نمی‌آید.

اندازه‌ها
۶۵٪
80
۶۵٪
72
۶۵٪
64
۶۵٪
56
۶۵٪
48
۶۵٪
40
رنگ‌ها
۴۰٪
۱۰۰٪
۸۵٪
۹۵٪
ضخامت و مرکز سفارشی
۶۵٪
۶۵٪
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>
    </>
  )
}