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

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

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

איפור של סרטון היום

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

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

const ProgressBar = ({progress}) => { 
    return ( 
        <div> 
            <div role="progressbar" 
                 aria-valuenow={progress} 
                 aria-valuemin={0} 
                 aria-valuemax={100}> 
                <span>{`${progress}%`}</span> 
            </div> 
        </div> 
    ); 
}; 
   
export default ProgressBar;

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

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

יישומי קול לטקסט לאנדרואיד

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

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

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

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

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

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

const container = { 
    height: 20, 
    width: "100%", 
    backgroundColor: "#fff", 
    borderRadius: 50, 
    margin: 50 
} 
  
const bar = { 
    height: "100%", 
    width: `${progress}%`, 
    backgroundColor: "#90CAF9", 
    borderRadius: "inherit", 
} 
  
const label = { 
    padding: "1rem", 
    color: "#000000", 
}

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

<div style={container}> 
    <div style={bar} role="progressbar" 
        aria-valuenow={progress} 
        aria-valuemin={0} 
        aria-valuemax={100}> 
        <span style={label} >{`${progress}%`}</span> 
    </div> 
</div>

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

האם האפליקציה לאחר הלימודים אמיתית

<ProgressBar progress={50}/>

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

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

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