רכיב הדפדפן המובנה <progress> מאפשר לרנדר מחוון התקדמות.

<progress value={0.5} />

Reference

<progress>

כדי להציג מחוון התקדמות, רנדרו את רכיב הדפדפן המובנה <progress>.

<progress value={0.5} />

ראו דוגמאות נוספות בהמשך.

Props

<progress> תומך בכל מאפייני האלמנט הנפוצים.

בנוסף, <progress> תומך ב-props האלה:

  • max: מספר. מציין את ערך ה-value המקסימלי. ברירת המחדל היא 1.
  • value: מספר בין 0 ל-max, או null להתקדמות לא-מוגדרת. מציין כמה כבר הושלם.

שימוש

שליטה במחוון התקדמות

כדי להציג מחוון התקדמות, רנדרו קומפוננטת <progress>. אפשר להעביר מספר ב-value בין 0 לבין ערך ה-max שתגדירו. אם לא תעבירו max, ברירת המחדל תהיה 1.

אם הפעולה אינה מתקדמת כרגע, העבירו value={null} כדי להעביר את מחוון ההתקדמות למצב לא-מוגדר.

export default function App() {
  return (
    <>
      <progress value={0} />
      <progress value={0.5} />
      <progress value={0.7} />
      <progress value={75} max={100} />
      <progress value={1} />
      <progress value={null} />
    </>
  );
}