چگونه یک نوار پیشرفت قابل دسترسی با 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 ظرف و دومین div نوار پیشرفت واقعی است. عنصر span درصد نوار پیشرفت را نگه می دارد.

برای اهداف دسترسی، div دوم دارای ویژگی های زیر است:

• نقش نوار پیشرفت.
• aria-valuenow برای نشان دادن مقدار فعلی نوار پیشرفت.
• aria-valuemin برای نشان دادن حداقل مقدار نوار پیشرفت.
• aria-valuemax برای نشان دادن حداکثر مقدار نوار پیشرفت.

اگر مقادیر حداکثر و حداقل نوار پیشرفت 0 و 100 باشد، ویژگی‌های aria-valuemin و aria-valuemax ضروری نیستند زیرا HTML این مقادیر را پیش‌فرض می‌کند.

حالت دادن به نوار پیشرفت

می توانید نوار پیشرفت را با استفاده از استایل های درون خطی یا کتابخانه CSS-in-JS مانند styled-components استایل دهید. هر دوی این رویکردها راه ساده ای برای انتقال props از کامپوننت به CSS ارائه می دهند.

شما به این قابلیت نیاز دارید زیرا عرض نوار پیشرفت به مقدار پیشرفت ارسال شده به عنوان props بستگی دارد.

می توانید از این سبک های درون خطی استفاده کنید:

const container = {
height: 20,
width: "100%",
backgroundColor: "#fff",
borderRadius: 50,
margin: 50
}

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، می‌توانید مؤلفه‌های رابط کاربری مستقلی مانند اینها ایجاد کنید و از آنها به عنوان بلوک‌های سازنده یک برنامه پیچیده استفاده کنید.

منبع مقاله