آموزش کار با نوار پیشرفت (Progress bar) در المنتور

آموزش درج نوار پیشرفت در المنتور

در این فایل آموزشی قصد داریم که ابزار نوار پیشرفت را در در المنتور قرار بدیم.

خب تا اینجا یاد گرفتیم که ابزار نوار پیشرفت را به المنتور اضافه کنیم، حال نوبت به بخش تنطیمات این ابزار می رسیم. که چگونه تغییراتی در این ابزار ایجاد کنیم.

تنظیمات ابزار نوار پیشرفت در المنتور

بر روی نوار ابزار کلیک کنید، تا بخش تنظیمات این ابزار برای شما در قسمت سمت راست نمایش داده شود.

✓ تب محتوا

عنوان: یک عنوان برای نوار پیشرفت وارد کنید.

نوع: در این بخش نوع نوار پیشرفت را می توانید انتخاب کنید (اطلاعات، موفق، هشدار، خطر)

درصد: در این قسمت می توانید درصد نمایش نوار پیشرفت را به صورت دستی کاهش یا افزایش دهید.

نمایش درصد: می توانید نمایش درصد را فعال یا پنهان کنید.

متن داخلی: در این بخش متن داخل نوار پیشرفت نمایش داده می شود.

✓ تب استایل

در این تب به 2 بخش تقسم می شود. (نوار پیشرفت، استایل عنوان)

بخش اول: نوار پیشرفت

رنگ: در این بخش می توانید یک رنگ مورد دلخواه برای نوار پیشرفت تعیین کنید.

رنگ پس زمینه: در این بخش می توانید یک رنگ برای پس زمینه نوار پیشرفت تعیین کنید.

ارتفاع: در این بخش ارتفاع نوار پیشرفت را می توانید کاهش یا افزایش داد.

انحنای مرز: در قسمت می توانید گوشه های نوار پیشرفت را حالت گرد بسته به عددی که وارد می کنید، در این قسمت اعمال کرد.

متن داخلی

رنگ: رنگ متن داخل نوار پیشرفت را به صورت دلخواه تغییر دهید.

تایپوگرافی: در این قسمت می توانید به صورت سفارشی (وزن فونت، اندازه فونت، استایل، فاصلخ بین حروف و...) را تغییر داد.

سایه متن: در این قسمت به متن داخل نوار پیشرفت حالت سایه اعمال کرد.

بخش دوم: استایل عنوان

رنگ متن: در این قسمت رنگ متن عنوان را می توان تغییر داد.

تایپوگرافی: در این قسمت می توانید، به صورت سفارشی (وزن فونت، اندازه فونت، استایل، فاصلخ بین حروف و...) را تغییر داد.

سایه متن: در این قسمت می توانید، به عنوان نوار پیشرفت حالت سایه اعمال کرد.

✓ تب پیشرفته

در این قسمت می توانید از حالت های حاشیه های خارجی و فاصله داخلی از (چپ، راست، بالا و پایین) استفاده کنید، و از حالت های افکت (متحرک)، پس زمینه ، حاشیه کادر دور، یا css سفارشی می توانید استفاده کنید.

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

نمونه نوار پیشرفت طراحی شده در المنتور با توجه به توضیحات بالا، به صورت سفارشی