כיצד ליצור סרגל התקדמות נגיש עם React

מדדי התקדמות מעולים למעורבות משתמשים מכיוון שהם מספקים מטרה להשגה. במקום לבהות בדף אינטרנט שמחכה על משאב, אתה רואה סרגל התקדמות מתמלא. אין להגביל את פסי ההתקדמות למשתמשים רואים בלבד. כולם צריכים להיות מסוגלים להבין את סרגל ההתקדמות שלך בקלות.

אז איך בונים סרגל התקדמות נגיש עם React?

צור רכיב סרגל התקדמות

צור רכיב חדש בשם ProgressBar.js והוסף את הקוד הבא:

const סרגל התקדמות = ({התקדמות}) => {
לַחֲזוֹר (
<div>
<תפקיד div="סרגל התקדמות"
 aria-valuenow={התקדמות}
 aria-valuemin={0}
 aria-valuemax={100}>
<לְהַקִיף>{`${progress}%`}</span>
</div>
</div>
 );
};
יְצוּאבְּרִירַת מֶחדָל ProgressBar;

אלמנט ה-div הראשון הוא ה-container וה-div השני הוא סרגל ההתקדמות בפועל. רכיב span מחזיק את אחוז סרגל ההתקדמות.

למטרות נגישות, ל-div השני יש את התכונות הבאות:

• תפקיד של סרגל התקדמות.
• aria-valuenow כדי לציין את הערך הנוכחי של סרגל ההתקדמות.
• aria-valuemin כדי לציין את הערך המינימלי של סרגל ההתקדמות.
• aria-valuemax כדי לציין את הערך המרבי של סרגל ההתקדמות.

התכונות aria-valuemin ו-aria-valuemax אינן נחוצות אם ערכי המקסימום והמינימום של סרגל ההתקדמות הם 0 ו-100 מכיוון ש-HTML כברירת מחדל לערכים אלה.

עיצוב סרגל ההתקדמות

אתה יכול לסגנן את סרגל ההתקדמות באמצעות סגנונות מוטבעים או א ספריית CSS-in-JS כמו רכיבים מעוצבים. שתי הגישות הללו מספקות דרך פשוטה להעביר אביזרים מהרכיב ל-CSS.

אתה צריך את הפונקציונליות הזו מכיוון שהרוחב של סרגל ההתקדמות תלוי בערך ההתקדמות המועבר כאביזרים.

אתה יכול להשתמש בסגנונות מוטבעים אלה:

const מיכל = {
 גובה: 20,
 רוֹחַב: "100%",
 צבע רקע: "#fff",
 רדיוס הגבול: 50,
 שוליים: 50
}
const bar = {
 גוֹבַה: "100%",
 רוֹחַב: `${progress}%`,
 צבע רקע: "#90CAF9",
 borderRadius: "לָרֶשֶׁת",
}
const תווית = {
 ריפוד: "1 רם",
 צֶבַע: "#000000",
}

שנה את חלק ההחזרה של הרכיב כך שיכלול סגנונות כפי שמוצג להלן:

<div style={מיכל}>
<div style={bar} role="סרגל התקדמות"
 aria-valuenow={התקדמות}
 aria-valuemin={0}
 aria-valuemax={100}>
<span style={תווית} >{`${progress}%`}</span>
</div>
</div>

עבד את סרגל ההתקדמות כך:

<התקדמות סרגל התקדמות={50}/>

זה מציג סרגל התקדמות עם 50 אחוז הושלם.

בניית רכיבים ב-React

כעת תוכל ליצור סרגל התקדמות נגיש עם אחוזים שתוכל לעשות בהם שימוש חוזר בכל חלק של היישום שלך. עם React, אתה יכול ליצור רכיבי ממשק משתמש עצמאיים כמו אלה ולהשתמש בהם כאבני בניין של אפליקציה מורכבת.