كيفية إنشاء شريط تقدم يمكن الوصول إليه باستخدام React

تعد أشرطة التقدم رائعة لمشاركة المستخدم لأنها توفر هدفًا لتحقيقه. بدلاً من التحديق في صفحة ويب تنتظر موردًا ، ترى شريط تقدم يملأ. يجب ألا تقتصر أشرطة التقدم على المستخدمين المبصرين فقط. يجب أن يكون الجميع قادرًا على فهم شريط التقدم الخاص بك بسهولة.

إذن ، كيف يمكنك بناء شريط تقدم يمكن الوصول إليه باستخدام React؟

قم بإنشاء مكون شريط التقدم

قم بإنشاء مكون جديد يسمى ProgressBar.js وأضف الكود التالي:

مقدار ثابت ProgressBar = ({progress}) => {
يعود (
<شعبة>
<دور div ="شريط التقدم"
 aria-valuenow = {تقدم}
 aria-valuemin = {0}
 aria-valuemax = {100}>
<فترة>{`$ {progress}٪`}</span>
</div>
</div>
 );
};
يصدّرتقصير شريط التقدم؛

يمثل عنصر div الأول الحاوية بينما يمثل عنصر div الثاني شريط التقدم الفعلي. يحتفظ عنصر الامتداد بنسبة شريط التقدم.

لأغراض إمكانية الوصول ، يحتوي div الثاني على السمات التالية:

• دور التقدم.
• aria-valuenow للإشارة إلى القيمة الحالية لشريط التقدم.
• aria-valuemin للإشارة إلى الحد الأدنى لقيمة شريط التقدم.
• aria-valuemax للإشارة إلى القيمة القصوى لشريط التقدم.

سمات aria-valuemin و aria-valuemax ليست ضرورية إذا كان الحد الأقصى والحد الأدنى لقيم شريط التقدم 0 و 100 نظرًا لأن HTML يتم تعيين هذه القيم بشكل افتراضي.

تصميم شريط التقدم

يمكنك نمط شريط التقدم باستخدام الأنماط المضمنة أو ملف مكتبة CSS-in-JS مثل المكونات المصممة. يوفر كلا الأسلوبين طريقة بسيطة لتمرير الدعائم من المكون إلى CSS.

أنت بحاجة إلى هذه الوظيفة لأن عرض شريط التقدم يعتمد على قيمة التقدم التي تم تمريرها كدعامات.

يمكنك استخدام هذه الأنماط المضمنة:

مقدار ثابت الحاوية = {
 الارتفاع: 20 ،
 عرض: "100%",
 لون الخلفية: "#fff",
 راديوس: 50 ،
 الهامش: 50
}
مقدار ثابت شريط = {
 ارتفاع: "100%",
 عرض: `$ {التقدم}%`,
 لون الخلفية: "# 90CAF9",
 الحدود: "يرث",
}
مقدار ثابت التسمية = {
 حشوة: "1 ريم",
 لون: "#000000",
}

قم بتعديل جزء الإرجاع للمكون لتضمين الأنماط كما هو موضح أدناه:

<نمط div = {container}>
<أسلوب div = {bar} role ="شريط التقدم"
 aria-valuenow = {تقدم}
 aria-valuemin = {0}
 aria-valuemax = {100}>
<نمط الامتداد = {التسمية} >{`$ {progress}٪`}</span>
</div>
</div>

جعل شريط التقدم مثل هذا:

<تقدم شريط التقدم = {50} />

يعرض هذا شريط تقدم بنسبة 50 بالمائة مكتمل.

مكونات البناء في React

يمكنك الآن إنشاء شريط تقدم يمكن الوصول إليه بنسب مئوية يمكنك إعادة استخدامها في أي جزء من التطبيق الخاص بك. باستخدام React ، يمكنك إنشاء مكونات واجهة مستخدم مستقلة مثل هذه واستخدامها كوحدات بناء لتطبيق معقد.