شريط التقدم (Progress)

يعرض مكوّن شريط التقدم مقدار ما أُنجز من مهمة، من 0% إلى 100%. يأتي بثلاثة أحجام، ويستطيع أن يعرض النسبة المئوية قبل الشريط. ويمتلئ من بداية السطر، فيتبع اتجاه القراءة في الصفحة.

التثبيت

bash

npx @smicolon/fasla-ui@latest add progress

قبل إضافة أي مكوّن، شغّل الأمر init مرة واحدة في مشروعك. التفاصيل في صفحة التثبيت.

معاينة

الأنماط (variant)

الأحجام

تسمية النسبة المئوية

حين تجعل قيمة الخاصية showPercentage هي false، لا يعرض الشريط أي رقم، فامنحه السمة aria-label باسم يصف ما يتتبّعه. يُعلن قارئ الشاشة هذا الاسم مع القيمة. اطّلع على المثال في Storybook.

الخصائص (props)

الخاصية	النوع	الافتراضي	الوصف
`value`	`number`	`0`	مقدار الإنجاز، من `0` إلى `100`. إذا خرجت القيمة عن هذا النطاق، يأخذ المكوّن أقرب حدّ إليها.
`size`	`"sm" \| "md" \| "lg"`	`"md"`	ارتفاع الشريط وحجم التسمية.
`showPercentage`	`boolean`	`true`	يُظهر النسبة المئوية قبل الشريط.
`aria-label`	`string`	لا يوجد	اسم شريط التقدم الذي يقرؤه قارئ الشاشة.
`getAriaValueText`	`(text, value) => string`	لا يوجد	تُرجع النص الذي يسمعه مستخدم قارئ الشاشة عن القيمة.
`locale`	`string`	`"en-US"`	اللغة التي تُنسَّق بها النسبة المئوية.
`className`	`string`	لا يوجد	أصناف CSS إضافية لشريط التقدم.

الاستخدام

tsx

import { Progress } from "@/components/ui/progress"

export function UploadProgress({ value }: { value: number }) {
  return (
    <Progress
      value={value}
      size="md"
      aria-label="رفع التقرير الربعي"
    />
  )
}