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

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

کد / پیش‌نمایش نمونه
            
                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
پراپ (Prop) نوع (Type) شرح
بدون پراپ
Progress.Bar
پراپ (Prop) نوع (Type) شرح
بدون پراپ