ایجاد نوار پیشروی در React — از صفر تا صد

۱۱۹ بازدید
آخرین به‌روزرسانی: ۱۴ شهریور ۱۴۰۲
زمان مطالعه: ۳ دقیقه
ایجاد نوار پیشروی در React — از صفر تا صد

آیا تا کنون در موقعیتی بوده‌اید که بخواهید یک نوار پیشروی یا Progress Bar در پروژه ری‌اکت داشته باشید، اما نتوانسته‌اید منابع ساده‌ای برای راهنمایی در مورد اجرای صحیح آن بیابید؟ در این مقاله بدون نیاز به نصب هیچ کتابخانه‌ای، همه مواردی که برای ایجاد یک نوار پیشروی در ری‌اکت مورد نیاز است را توضیح می‌دهیم.

گام 1: ایجاد یک فایل کامپوننت جدید و تنظیم ایمپورت‌های مناسب

نوار پیشروی در React

باید مطمئن شوید که ایمپورت‌های ری‌اکت و styled-components را گنجانده‌اید، زیرا در سراسر این فرایند به آن‌ها نیاز خواهیم داشت. همچنین متد render و return را در کامپوننت کلاس بگنجانید.

گام 2: ایجاد نوار پیشروی در کامپوننت‌های HTML

شما باید دو div بسازید. یکی div بیرونی و دیگری div درونی است. div بیرونی کانتینر نوار پیشروی خواهد بود و div درونی با کانتینر به صورت گام به گام پر می‌شود تا مرحله کنونی کاربر را در اپلیکیشن نمایش دهد. این div-ها می‌توانند به صورت const-هایی بین خطوط import و خط اولیه class ProgressBar extends Component ایجاد شوند. این همان جایی است که از ایمپورت styled-components استفاده می‌کنیم.

لازم به ذکر است که استفاده از بک‌تیک به این دلیل است که ما از «لفظ-های قالبی» (template literal) برای ارسال عبارتی استفاده می‌کنیم که div درونی ProgressInTracker را ردگیری می‌کند. شما باید برخی استایل‌بندی‌های عمومی به این div-ها اضافه کنید تا با یا بدون پر شدن div درونی ببینیم چه اتفاقاتی می‌افتد. برای این که همه چیز ساده‌تر بماند، هر بار بر روی یک div متمرکز می‌شویم.

Div بیرونی

ما نام div بیرونی خود را Tracker تعیین کرده‌ایم. زمانی که این div ایجاد شده و استایل‌بندی شود، می‌توانید از آن در بخش‌های render و return فایل ProgressBar استفاده کنید. همچنین می‌توانید کامپوننت ProgressBar را در فایل App اصلی در هر دو بخش imports در render و همچنین بخش return ایمپورت کنید. اینک می‌توانید یک نوار روی صفحه ببینید:

نوار پیشروی در React

Div درونی

ما نام این div درونی را ProgressInTracker گذاشته‌ایم. این div عرض خود را بر مبنای درصدی که به صورت یک prop از فایل APP اصلی ارسال شده تعیین می‌کند. ارتفاع باید 100 درصد کانتینر والد باشد و باید یک رنگ متضاد با رنگ div بیرونی انتخاب کنید. شعاع حاشیه را کمی کمتر از div بیرونی تنظیم کرده‌ایم و یک انیمیشن نیز روی width تعیین کرده‌ایم تا همه چیز روان به نظر برسد. در ادامه div درونی را به تگ‌های Tracker که قبلاً تنظیم کرده‌ایم می‌فرستیم و درصد را 25 تعیین می‌کنیم تا مطمئن شویم که همه چیز به درستی کار می‌کند.

نوار پیشروی در React

گام 3: محاسبه پیشروی

اکنون که چارچوب کلی نوار پیشروی ایجاد شده است، باید شروع به کدنویسی دریافت دستورالعمل میزان پر شدن div درونی بکنیم. به فایل APP اصلی (یا هر جایی که کامپوننت ProgressBar از آنجا ایمپورت شده) بازگردید و یک حالت اولیه برای درصد div بیرونی تعیین کنید. حالت را به کامپوننت ProgressBar در بخش render و return ارسال کنید.

نوار پیشروی در React

به فایل کامپوننت ProgressBar بازگردید تا بتوانید درصد را به صورت props به بخش‌های رندر و بازگشتی ProgressInTracker ارسال کنید.

گام 4: کنترل کردن پیشروی

نوار پیشروی در React

در فایل APP اصلی باید یک دکمه طراحی کنیم تا زمانی که نوار پیشروی شروع به پر شدن می‌کند را به وسیله تابع onClick کنترل کنیم. درون تابع onClick باید حالت درصد را برابر با حالت اولیه + X (یعنی مقداری که با هر بار کلیک روی دکمه می‌خواهید نوار پیشروی کند) تنظیم کنید. ما مقدار 25 را برای X تنظیم کرده‌ایم تا کاربر با 4 بار کلیک بتواند آن را تکمیل کند. div درونی باید این مقدار تعریف شده را افزایش دهد.

گام 5: مدیریت خطا

ممکن است کاربر پس از پر شدن نوار پیشروی همچنان به کلیک کردن ماوس ادامه دهد و از این رو باید مطمئن شویم که نوار پیشروی هرگز از عرض کانتینر والد خود تجاوز نمی‌کند. در فایل ProgressBar باید یک تابع جدید بسازیم که این محاسبه ریاضی را برای ما انجام دهد:

نوار پیشروی در React

این تابع را به کامپوننت ProgressInTracker ارسال می‌کنیم به طوری که مقدار minimum برابر با 0 باشد، مقدار value درصدی است که با هر بار کلیک کاربر افزایش می‌یابد و مقدار بیشینه آن 100 است.

نوار پیشروی در React

بدین ترتیب نوار پیشروی ما تکمیل می‌شود. نکته دیگری که باید اشاره کنیم این است که می‌توانید یک دکمه «Previous» نیز اضافه کنید تا نوار پیشروی قابلیت کاهش نیز داشته باشد. بدین منظور باید یک دکمه دیگر برای کاهش اضافه کنید. برای انجام این کار گام 4 راهنما را تکرار کنید. یک تابع مشابه به این دکمه بدهید که با هر بار کلیک کاربر مقدار مربوطه کاهش یابد.

نوار پیشروی در React

اینک شما یک نوار پیشروی کاملاً عملیاتی دارید و می‌توانید آن را در پروژه یا اپلیکیشن خود به کار بگیرید تا کارهای کاربر سازمان‌یافته مانده و از اتفاقاتی که می‌افتد مطلق باشد.

اگر این مطلب برای شما مفید بوده است، آموزش‌های زیر نیز به شما پیشنهاد می‌شوند:

==

بر اساس رای ۰ نفر
آیا این مطلب برای شما مفید بود؟
اگر بازخوردی درباره این مطلب دارید یا پرسشی دارید که بدون پاسخ مانده است، آن را از طریق بخش نظرات مطرح کنید.
منابع:
swlh
نظر شما چیست؟

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *