نوار پیشرفت
پایه نوار پیشرفت

نوار پیشرفت پایه به شما امکان می‌دهد تا پیشرفت یک وظیفه یا فرآیند را به صورت بصری نشان دهید، که به کاربران بازخورد در زمان واقعی در مورد وضعیت پیشرفت را ارائه می‌دهد. این بخش یک مقدمه به نوار پیشرفت پایه و نحوه استفاده موثر از آن ارائه می‌دهد.

کد / پیش‌نمایش نمونه
            
                HTMLOpenTagdiv class="flex flex-col gap-2"HTMLCloseTag
                                                    HTMLOpenTagdiv
    data-tw-merge
    class="w-full h-2 bg-slate-200 rounded dark:bg-black/20"
HTMLCloseTag
    HTMLOpenTagdiv
    data-tw-merge
    role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" class="bg-primary h-full rounded text-xs text-white flex justify-center items-center w-1/2"
HTMLCloseTag
HTMLOpenTag/divHTMLCloseTag
HTMLOpenTag/divHTMLCloseTag
                                                    HTMLOpenTagdiv
    data-tw-merge
    class="w-full h-2 bg-slate-200 rounded dark:bg-black/20"
HTMLCloseTag
    HTMLOpenTagdiv
    data-tw-merge
    role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" class="bg-primary h-full rounded text-xs text-white flex justify-center items-center w-2/3"
HTMLCloseTag
HTMLOpenTag/divHTMLCloseTag
HTMLOpenTag/divHTMLCloseTag
                                                    HTMLOpenTagdiv
    data-tw-merge
    class="w-full h-2 bg-slate-200 rounded dark:bg-black/20"
HTMLCloseTag
    HTMLOpenTagdiv
    data-tw-merge
    role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" class="bg-primary h-full rounded text-xs text-white flex justify-center items-center w-3/4"
HTMLCloseTag
HTMLOpenTag/divHTMLCloseTag
HTMLOpenTag/divHTMLCloseTag
                                                HTMLOpenTag/divHTMLCloseTag
            
        

نوار پیشرفت پایه یک اجزای اساسی برای ارتقای تجربه کاربری است که با ارائه بازخورد واضح در مورد پیشرفت وظایف، بهبود می‌بخشد. با دنبال کردن مراحل مشخص شده بالا، می‌توانید به راحتی آن را به پروژه خود اضافه کنید و آن را بر اساس نیازهای خاص خود سفارشی‌سازی کنید.

نوار پیشرفت با برچسب

کامپوننت نوار پیشرفت با برچسب، یک ترکیب از یک نوار پیشرفت تصویری با یک برچسب متنی است که به کاربران اطلاعات واضحی از پیشرفت ارائه می‌دهد. این بخش معرفی کامپوننت نوار پیشرفت با برچسب را معرفی می‌کند و نحوه یادگیری از آن را در پروژه‌های خود توضیح می‌دهد.

کد / پیش‌نمایش نمونه
50%
60%
70%
            
                HTMLOpenTagdiv class="flex flex-col gap-2"HTMLCloseTag
                                                    HTMLOpenTagdiv
    data-tw-merge
    class="w-full h-2 bg-slate-200 rounded dark:bg-black/20 h-4"
HTMLCloseTag
    HTMLOpenTagdiv
    data-tw-merge
    role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" class="bg-primary h-full rounded text-xs text-white flex justify-center items-center w-1/2"
HTMLCloseTag
    50%
HTMLOpenTag/divHTMLCloseTag
HTMLOpenTag/divHTMLCloseTag
                                                    HTMLOpenTagdiv
    data-tw-merge
    class="w-full h-2 bg-slate-200 rounded dark:bg-black/20 h-4"
HTMLCloseTag
    HTMLOpenTagdiv
    data-tw-merge
    role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" class="bg-primary h-full rounded text-xs text-white flex justify-center items-center w-2/3"
HTMLCloseTag
    60%
HTMLOpenTag/divHTMLCloseTag
HTMLOpenTag/divHTMLCloseTag
                                                    HTMLOpenTagdiv
    data-tw-merge
    class="w-full h-2 bg-slate-200 rounded dark:bg-black/20 h-4"
HTMLCloseTag
    HTMLOpenTagdiv
    data-tw-merge
    role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" class="bg-primary h-full rounded text-xs text-white flex justify-center items-center w-3/4"
HTMLCloseTag
    70%
HTMLOpenTag/divHTMLCloseTag
HTMLOpenTag/divHTMLCloseTag
                                                HTMLOpenTag/divHTMLCloseTag
            
        

کامپوننت نوار پیشرفت با برچسب یک افزودنی ارزشمند به رابط کاربری شماست که به روزرسانی‌های پیشرفت همزمان هر دو به صورت بصری و متنی را ارائه می‌دهد. با دنبال کردن مراحل ذکر شده بالا، می‌توانید آن را به‌طور ساده در پروژه‌ی خود یک‌پارچه‌سازی کنید و آن را به موارد خاص خود تنظیم کنید.

ارتفاع نوار پیشرفت

بخش "ارتفاع نوار پیشرفت" توضیح می‌دهد چگونه ارتفاع نوارهای پیشرفت را برای سازگاری با طراحی و چیدمان پروژه‌ی خود تنظیم کنید. سفارشی کردن ارتفاع به شما امکان می‌دهد تا نوارهای پیشرفت را به طور هماهنگ در سلسله مراتب بصری برنامه‌ی خود ادغام کنید.

کد / پیش‌نمایش نمونه
            
                HTMLOpenTagdiv class="flex flex-col gap-2"HTMLCloseTag
                                                    HTMLOpenTagdiv
    data-tw-merge
    class="w-full h-2 bg-slate-200 rounded dark:bg-black/20 h-1"
HTMLCloseTag
    HTMLOpenTagdiv
    data-tw-merge
    role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" class="bg-primary h-full rounded text-xs text-white flex justify-center items-center w-1/2"
HTMLCloseTag
HTMLOpenTag/divHTMLCloseTag
HTMLOpenTag/divHTMLCloseTag
                                                    HTMLOpenTagdiv
    data-tw-merge
    class="w-full h-2 bg-slate-200 rounded dark:bg-black/20"
HTMLCloseTag
    HTMLOpenTagdiv
    data-tw-merge
    role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" class="bg-primary h-full rounded text-xs text-white flex justify-center items-center w-2/3"
HTMLCloseTag
HTMLOpenTag/divHTMLCloseTag
HTMLOpenTag/divHTMLCloseTag
                                                    HTMLOpenTagdiv
    data-tw-merge
    class="w-full h-2 bg-slate-200 rounded dark:bg-black/20 h-3"
HTMLCloseTag
    HTMLOpenTagdiv
    data-tw-merge
    role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" class="bg-primary h-full rounded text-xs text-white flex justify-center items-center w-3/4"
HTMLCloseTag
HTMLOpenTag/divHTMLCloseTag
HTMLOpenTag/divHTMLCloseTag
                                                HTMLOpenTag/divHTMLCloseTag
            
        

بخش "ارتفاع نوار پیشرفت" نحوه کنترل ارتفاع نوارهای پیشرفت در پروژه شما را نشان داده است. با پیروی از این رهنمودها و حفظ یکپارچگی، می‌توانید نوارهای پیشرفت جذاب و قابل دسترسی ایجاد کنید که با طراحی برنامه‌ی شما هماهنگ باشد.

نوار پیشرفت رنگ

بخش "رنگ نوار پیشرفت" توضیح می‌دهد که چگونه رنگ‌های نوارهای پیشرفت را سفارشی‌سازی کنید تا جذابیت بصری برنامه‌ی شما را افزایش دهید و اطلاعات را به طور موثر منتقل کنید. شما می‌توانید از تنوع رنگ‌ها برای هماهنگی با هویت برند خود یا نمایان کردن مراحل مختلف یک فرآیند استفاده کنید.

کد / پیش‌نمایش نمونه
            
                HTMLOpenTagdiv class="flex flex-col gap-2"HTMLCloseTag
                                                    HTMLOpenTagdiv
    data-tw-merge
    class="w-full h-2 bg-slate-200 rounded dark:bg-black/20"
HTMLCloseTag
    HTMLOpenTagdiv
    data-tw-merge
    role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" class="bg-primary h-full rounded text-xs text-white flex justify-center items-center w-1/2"
HTMLCloseTag
HTMLOpenTag/divHTMLCloseTag
HTMLOpenTag/divHTMLCloseTag
                                                    HTMLOpenTagdiv
    data-tw-merge
    class="w-full h-2 bg-slate-200 rounded dark:bg-black/20"
HTMLCloseTag
    HTMLOpenTagdiv
    data-tw-merge
    role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" class="bg-primary h-full rounded text-xs text-white flex justify-center items-center w-2/3 bg-success"
HTMLCloseTag
HTMLOpenTag/divHTMLCloseTag
HTMLOpenTag/divHTMLCloseTag
                                                    HTMLOpenTagdiv
    data-tw-merge
    class="w-full h-2 bg-slate-200 rounded dark:bg-black/20"
HTMLCloseTag
    HTMLOpenTagdiv
    data-tw-merge
    role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" class="bg-primary h-full rounded text-xs text-white flex justify-center items-center w-3/4 bg-warning"
HTMLCloseTag
HTMLOpenTag/divHTMLCloseTag
HTMLOpenTag/divHTMLCloseTag
                                                    HTMLOpenTagdiv
    data-tw-merge
    class="w-full h-2 bg-slate-200 rounded dark:bg-black/20"
HTMLCloseTag
    HTMLOpenTagdiv
    data-tw-merge
    role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" class="bg-primary h-full rounded text-xs text-white flex justify-center items-center w-3/4 bg-danger"
HTMLCloseTag
HTMLOpenTag/divHTMLCloseTag
HTMLOpenTag/divHTMLCloseTag
                                                HTMLOpenTag/divHTMLCloseTag
            
        

بخش "رنگ نوار پیشرفت" به شما نشان داد که چگونه رنگ‌های نوارهای پیشرفت را سفارشی‌سازی کنید تا با طراحی برنامه‌ی شما هماهنگ شده و به طور موثر معنا منتقل کنید. با انتخاب رنگ‌های مناسب و در نظر گرفتن دسترسی‌پذیری، می‌توانید تجربه کاربری را بهبود بخشیده و نوارهای پیشرفت را به بخشی اساسی از رابط کاربری برنامه خود تبدیل کنید.

رابط اجزاء

در این بخش، شما اطلاعات دقیقی درباره ویژگی‌ها، کلاس‌ها، و گزینه‌های موجود که می‌توان با این مؤلفه استفاده کرد را پیدا خواهید کرد. درک این ویژگی‌ها برای سفارشی‌سازی و پیکربندی مؤلفه برای تنظیمات خاص شما بسیار مهم است.

در زیر لیستی از ویژگی‌هایی که می‌توان به اجزاء منتقل کرد، آمده است:

Progress
پراپ نوع شرح
بدون پراپ
Progress.Bar
پراپ نوع شرح
بدون پراپ