تیل وایز - قالب داشبورد مدیریتی

آکاردئون

•

مؤلفه آکاردئون ما را کاوش کنید، سازماندهی محتوای بی‌دردسر و ارائه!

پایه آکاردئون

نمایش کد نمونه

اجزای پایه‌ای آکاردئون یک روش قدرتمند و انعطاف‌پذیر برای سازماندهی و ارائه اطلاعات در وب‌سایت یا برنامه شما هستند. این اجازه را به شما می‌دهد که بخش‌های قابل جمع و جوری از محتوا ایجاد کنید، که به کاربران امکان می‌دهد به راحتی به اطلاعات دسترسی پیدا کنند بدون اینکه با متن یا جزئیات زیادی به یکباره سرشار شوند.

کد / پیش‌نمایش نمونه

OpenSSL ضروریات: کار با گواهی‌نامه‌های SSL، کلیدهای خصوصی

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

درک آدرس‌های IP، زیرشبکه‌ها و نمادهای CIDR

رفع مشکل کدهای خطای معمول HTTP

معرفی امنیت وی‌پی‌اس لینوکس شما

            
                HTMLOpenTagdiv
    data-tw-merge
    class="accordion"
HTMLCloseTagHTMLOpenTagdiv
    data-tw-merge
    class="accordion-item py-4 first:-mt-4 last:-mb-4 [&:not(:last-child)]:border-b [&:not(:last-child)]:border-slate-200/60 [&:not(:last-child)]:dark:border-darkmode-400"
HTMLCloseTag
    HTMLOpenTagdiv
    class="accordion-header"
    id="faq-accordion-1"
HTMLCloseTag
    HTMLOpenTagbutton
        data-tw-merge
        data-tw-toggle="collapse"
        data-tw-target="#faq-accordion-1-collapse"
        type="button"
        aria-expanded="true"
        aria-controls="faq-accordion-1-collapse"
        class="accordion-button outline-none py-4 -my-4 font-medium w-full rtl:text-right ltr:text-left dark:text-slate-400 [&:not(.collapsed)]:text-primary [&:not(.collapsed)]:dark:text-slate-300"
    HTMLCloseTagاساسات OpenSSL: کار با گواهی‌نامه‌های SSL،
                                                            کلیدهای خصوصیHTMLOpenTag/buttonHTMLCloseTag
HTMLOpenTag/divHTMLCloseTag
                                                        HTMLOpenTagdiv
    id="faq-accordion-1-collapse"
    aria-labelledby="faq-accordion-1"
    class="accordion-collapse collapse mt-3 text-slate-700 leading-relaxed dark:text-slate-400 [&.collapse:not(.show)]:hidden [&.collapse.show]:visible show"
HTMLCloseTag
    HTMLOpenTagdiv
        data-tw-merge
        class="accordion-body leading-relaxed text-slate-600 dark:text-slate-500 leading-relaxed text-slate-600 dark:text-slate-500"
    HTMLCloseTag
        لورم ایپسوم به طور ساده یک متن مجازی برای چاپ و صنعت آماده‌سازی است. این متن استاندارد آزمایشی بوده است، زیرا هنگامی که یک چاپگر ناشناخته یک نمونه متن را گرفته و آن را با هم مخلوط می‌کند، یک کتاب نمونه ایجاد می‌شود. این متن نه تنها پنج قرن را زنده مانده است، بلکه وارد دوران صفحه‌آرایی الکترونیکی شده و بدون تغییر اساسی باقی مانده است.
    HTMLOpenTag/divHTMLCloseTag
HTMLOpenTag/divHTMLCloseTag
HTMLOpenTag/divHTMLCloseTag
                                                    HTMLOpenTagdiv
    data-tw-merge
    class="accordion-item py-4 first:-mt-4 last:-mb-4 [&:not(:last-child)]:border-b [&:not(:last-child)]:border-slate-200/60 [&:not(:last-child)]:dark:border-darkmode-400"
HTMLCloseTag
    HTMLOpenTagdiv
    class="accordion-header"
    id="faq-accordion-2"
HTMLCloseTag
    HTMLOpenTagbutton
        data-tw-merge
        data-tw-toggle="collapse"
        data-tw-target="#faq-accordion-2-collapse"
        type="button"
        aria-expanded="true"
        aria-controls="faq-accordion-2-collapse"
        class="accordion-button outline-none py-4 -my-4 font-medium w-full rtl:text-right ltr:text-left dark:text-slate-400 [&:not(.collapsed)]:text-primary [&:not(.collapsed)]:dark:text-slate-300 collapsed"
    HTMLCloseTagدرک آدرس‌های IP، زیرشبکه‌ها و نمادهای CIDRHTMLOpenTag/buttonHTMLCloseTag
HTMLOpenTag/divHTMLCloseTag
                                                        HTMLOpenTagdiv
    id="faq-accordion-2-collapse"
    aria-labelledby="faq-accordion-2"
    class="accordion-collapse collapse mt-3 text-slate-700 leading-relaxed dark:text-slate-400 [&.collapse:not(.show)]:hidden [&.collapse.show]:visible"
HTMLCloseTag
    HTMLOpenTagdiv
        data-tw-merge
        class="accordion-body leading-relaxed text-slate-600 dark:text-slate-500 leading-relaxed text-slate-600 dark:text-slate-500"
    HTMLCloseTag
        لورم ایپسوم به طور ساده یک متن مجازی برای چاپ و صنعت آماده‌سازی است. این متن استاندارد آزمایشی بوده است، زیرا هنگامی که یک چاپگر ناشناخته یک نمونه متن را گرفته و آن را با هم مخلوط می‌کند، یک کتاب نمونه ایجاد می‌شود. این متن نه تنها پنج قرن را زنده مانده است، بلکه وارد دوران صفحه‌آرایی الکترونیکی شده و بدون تغییر اساسی باقی مانده است.
    HTMLOpenTag/divHTMLCloseTag
HTMLOpenTag/divHTMLCloseTag
HTMLOpenTag/divHTMLCloseTag
                                                    HTMLOpenTagdiv
    data-tw-merge
    class="accordion-item py-4 first:-mt-4 last:-mb-4 [&:not(:last-child)]:border-b [&:not(:last-child)]:border-slate-200/60 [&:not(:last-child)]:dark:border-darkmode-400"
HTMLCloseTag
    HTMLOpenTagdiv
    class="accordion-header"
    id="faq-accordion-3"
HTMLCloseTag
    HTMLOpenTagbutton
        data-tw-merge
        data-tw-toggle="collapse"
        data-tw-target="#faq-accordion-3-collapse"
        type="button"
        aria-expanded="true"
        aria-controls="faq-accordion-3-collapse"
        class="accordion-button outline-none py-4 -my-4 font-medium w-full rtl:text-right ltr:text-left dark:text-slate-400 [&:not(.collapsed)]:text-primary [&:not(.collapsed)]:dark:text-slate-300 collapsed"
    HTMLCloseTagرفع مشکل کدهای خطای معمول HTTPHTMLOpenTag/buttonHTMLCloseTag
HTMLOpenTag/divHTMLCloseTag
                                                        HTMLOpenTagdiv
    id="faq-accordion-3-collapse"
    aria-labelledby="faq-accordion-3"
    class="accordion-collapse collapse mt-3 text-slate-700 leading-relaxed dark:text-slate-400 [&.collapse:not(.show)]:hidden [&.collapse.show]:visible"
HTMLCloseTag
    HTMLOpenTagdiv
        data-tw-merge
        class="accordion-body leading-relaxed text-slate-600 dark:text-slate-500 leading-relaxed text-slate-600 dark:text-slate-500"
    HTMLCloseTag
        لورم ایپسوم به طور ساده یک متن مجازی برای چاپ و صنعت آماده‌سازی است. این متن استاندارد آزمایشی بوده است، زیرا هنگامی که یک چاپگر ناشناخته یک نمونه متن را گرفته و آن را با هم مخلوط می‌کند، یک کتاب نمونه ایجاد می‌شود. این متن نه تنها پنج قرن را زنده مانده است، بلکه وارد دوران صفحه‌آرایی الکترونیکی شده و بدون تغییر اساسی باقی مانده است.
    HTMLOpenTag/divHTMLCloseTag
HTMLOpenTag/divHTMLCloseTag
HTMLOpenTag/divHTMLCloseTag
                                                    HTMLOpenTagdiv
    data-tw-merge
    class="accordion-item py-4 first:-mt-4 last:-mb-4 [&:not(:last-child)]:border-b [&:not(:last-child)]:border-slate-200/60 [&:not(:last-child)]:dark:border-darkmode-400"
HTMLCloseTag
    HTMLOpenTagdiv
    class="accordion-header"
    id="faq-accordion-4"
HTMLCloseTag
    HTMLOpenTagbutton
        data-tw-merge
        data-tw-toggle="collapse"
        data-tw-target="#faq-accordion-4-collapse"
        type="button"
        aria-expanded="true"
        aria-controls="faq-accordion-4-collapse"
        class="accordion-button outline-none py-4 -my-4 font-medium w-full rtl:text-right ltr:text-left dark:text-slate-400 [&:not(.collapsed)]:text-primary [&:not(.collapsed)]:dark:text-slate-300 collapsed"
    HTMLCloseTagمعرفی امنیت وی‌پی‌اس لینوکس شماHTMLOpenTag/buttonHTMLCloseTag
HTMLOpenTag/divHTMLCloseTag
                                                        HTMLOpenTagdiv
    id="faq-accordion-4-collapse"
    aria-labelledby="faq-accordion-4"
    class="accordion-collapse collapse mt-3 text-slate-700 leading-relaxed dark:text-slate-400 [&.collapse:not(.show)]:hidden [&.collapse.show]:visible"
HTMLCloseTag
    HTMLOpenTagdiv
        data-tw-merge
        class="accordion-body leading-relaxed text-slate-600 dark:text-slate-500 leading-relaxed text-slate-600 dark:text-slate-500"
    HTMLCloseTag
        لورم ایپسوم به طور ساده یک متن مجازی برای چاپ و صنعت آماده‌سازی است. این متن استاندارد آزمایشی بوده است، زیرا هنگامی که یک چاپگر ناشناخته یک نمونه متن را گرفته و آن را با هم مخلوط می‌کند، یک کتاب نمونه ایجاد می‌شود. این متن نه تنها پنج قرن را زنده مانده است، بلکه وارد دوران صفحه‌آرایی الکترونیکی شده و بدون تغییر اساسی باقی مانده است.
    HTMLOpenTag/divHTMLCloseTag
HTMLOpenTag/divHTMLCloseTag
HTMLOpenTag/divHTMLCloseTagHTMLOpenTag/divHTMLCloseTag

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

آکاردئون با قاب

نمایش کد نمونه

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

کد / پیش‌نمایش نمونه

OpenSSL ضروریات: کار با گواهی‌نامه‌های SSL، کلیدهای خصوصی

درک آدرس‌های IP، زیرشبکه‌ها و نمادهای CIDR

رفع مشکل کدهای خطای معمول HTTP

معرفی امنیت وی‌پی‌اس لینوکس شما

            
                HTMLOpenTagdiv
    data-tw-merge
    class="accordion"
HTMLCloseTagHTMLOpenTagdiv
    data-tw-merge
    class="accordion-item py-4 first:-mt-4 last:-mb-4 [&:not(:last-child)]:border-b [&:not(:last-child)]:border-slate-200/60 [&:not(:last-child)]:dark:border-darkmode-400 p-4 first:mt-0 last:mb-0 border border-slate-200/60 mt-3 dark:border-darkmode-400"
HTMLCloseTag
    HTMLOpenTagdiv
    class="accordion-header"
    id="faq-accordion-5"
HTMLCloseTag
    HTMLOpenTagbutton
        data-tw-merge
        data-tw-toggle="collapse"
        data-tw-target="#faq-accordion-5-collapse"
        type="button"
        aria-expanded="true"
        aria-controls="faq-accordion-5-collapse"
        class="accordion-button outline-none py-4 -my-4 font-medium w-full rtl:text-right ltr:text-left dark:text-slate-400 [&:not(.collapsed)]:text-primary [&:not(.collapsed)]:dark:text-slate-300"
    HTMLCloseTagاساسات OpenSSL: کار با گواهی‌نامه‌های SSL،
                                                            کلیدهای خصوصیHTMLOpenTag/buttonHTMLCloseTag
HTMLOpenTag/divHTMLCloseTag
                                                        HTMLOpenTagdiv
    id="faq-accordion-5-collapse"
    aria-labelledby="faq-accordion-5"
    class="accordion-collapse collapse mt-3 text-slate-700 leading-relaxed dark:text-slate-400 [&.collapse:not(.show)]:hidden [&.collapse.show]:visible show"
HTMLCloseTag
    HTMLOpenTagdiv
        data-tw-merge
        class="accordion-body leading-relaxed text-slate-600 dark:text-slate-500 leading-relaxed text-slate-600 dark:text-slate-500"
    HTMLCloseTag
        لورم ایپسوم به طور ساده یک متن مجازی برای چاپ و صنعت آماده‌سازی است. این متن استاندارد آزمایشی بوده است، زیرا هنگامی که یک چاپگر ناشناخته یک نمونه متن را گرفته و آن را با هم مخلوط می‌کند، یک کتاب نمونه ایجاد می‌شود. این متن نه تنها پنج قرن را زنده مانده است، بلکه وارد دوران صفحه‌آرایی الکترونیکی شده و بدون تغییر اساسی باقی مانده است.
    HTMLOpenTag/divHTMLCloseTag
HTMLOpenTag/divHTMLCloseTag
HTMLOpenTag/divHTMLCloseTag
                                                    HTMLOpenTagdiv
    data-tw-merge
    class="accordion-item py-4 first:-mt-4 last:-mb-4 [&:not(:last-child)]:border-b [&:not(:last-child)]:border-slate-200/60 [&:not(:last-child)]:dark:border-darkmode-400 p-4 first:mt-0 last:mb-0 border border-slate-200/60 mt-3 dark:border-darkmode-400"
HTMLCloseTag
    HTMLOpenTagdiv
    class="accordion-header"
    id="faq-accordion-6"
HTMLCloseTag
    HTMLOpenTagbutton
        data-tw-merge
        data-tw-toggle="collapse"
        data-tw-target="#faq-accordion-6-collapse"
        type="button"
        aria-expanded="true"
        aria-controls="faq-accordion-6-collapse"
        class="accordion-button outline-none py-4 -my-4 font-medium w-full rtl:text-right ltr:text-left dark:text-slate-400 [&:not(.collapsed)]:text-primary [&:not(.collapsed)]:dark:text-slate-300 collapsed"
    HTMLCloseTagدرک آدرس‌های IP، زیرشبکه‌ها و نمادهای CIDRHTMLOpenTag/buttonHTMLCloseTag
HTMLOpenTag/divHTMLCloseTag
                                                        HTMLOpenTagdiv
    id="faq-accordion-6-collapse"
    aria-labelledby="faq-accordion-6"
    class="accordion-collapse collapse mt-3 text-slate-700 leading-relaxed dark:text-slate-400 [&.collapse:not(.show)]:hidden [&.collapse.show]:visible"
HTMLCloseTag
    HTMLOpenTagdiv
        data-tw-merge
        class="accordion-body leading-relaxed text-slate-600 dark:text-slate-500 leading-relaxed text-slate-600 dark:text-slate-500"
    HTMLCloseTag
        لورم ایپسوم به طور ساده یک متن مجازی برای چاپ و صنعت آماده‌سازی است. این متن استاندارد آزمایشی بوده است، زیرا هنگامی که یک چاپگر ناشناخته یک نمونه متن را گرفته و آن را با هم مخلوط می‌کند، یک کتاب نمونه ایجاد می‌شود. این متن نه تنها پنج قرن را زنده مانده است، بلکه وارد دوران صفحه‌آرایی الکترونیکی شده و بدون تغییر اساسی باقی مانده است.
    HTMLOpenTag/divHTMLCloseTag
HTMLOpenTag/divHTMLCloseTag
HTMLOpenTag/divHTMLCloseTag
                                                    HTMLOpenTagdiv
    data-tw-merge
    class="accordion-item py-4 first:-mt-4 last:-mb-4 [&:not(:last-child)]:border-b [&:not(:last-child)]:border-slate-200/60 [&:not(:last-child)]:dark:border-darkmode-400 p-4 first:mt-0 last:mb-0 border border-slate-200/60 mt-3 dark:border-darkmode-400"
HTMLCloseTag
    HTMLOpenTagdiv
    class="accordion-header"
    id="faq-accordion-7"
HTMLCloseTag
    HTMLOpenTagbutton
        data-tw-merge
        data-tw-toggle="collapse"
        data-tw-target="#faq-accordion-7-collapse"
        type="button"
        aria-expanded="true"
        aria-controls="faq-accordion-7-collapse"
        class="accordion-button outline-none py-4 -my-4 font-medium w-full rtl:text-right ltr:text-left dark:text-slate-400 [&:not(.collapsed)]:text-primary [&:not(.collapsed)]:dark:text-slate-300 collapsed"
    HTMLCloseTagرفع مشکل کدهای خطای معمول HTTPHTMLOpenTag/buttonHTMLCloseTag
HTMLOpenTag/divHTMLCloseTag
                                                        HTMLOpenTagdiv
    id="faq-accordion-7-collapse"
    aria-labelledby="faq-accordion-7"
    class="accordion-collapse collapse mt-3 text-slate-700 leading-relaxed dark:text-slate-400 [&.collapse:not(.show)]:hidden [&.collapse.show]:visible"
HTMLCloseTag
    HTMLOpenTagdiv
        data-tw-merge
        class="accordion-body leading-relaxed text-slate-600 dark:text-slate-500 leading-relaxed text-slate-600 dark:text-slate-500"
    HTMLCloseTag
        لورم ایپسوم به طور ساده یک متن مجازی برای چاپ و صنعت آماده‌سازی است. این متن استاندارد آزمایشی بوده است، زیرا هنگامی که یک چاپگر ناشناخته یک نمونه متن را گرفته و آن را با هم مخلوط می‌کند، یک کتاب نمونه ایجاد می‌شود. این متن نه تنها پنج قرن را زنده مانده است، بلکه وارد دوران صفحه‌آرایی الکترونیکی شده و بدون تغییر اساسی باقی مانده است.
    HTMLOpenTag/divHTMLCloseTag
HTMLOpenTag/divHTMLCloseTag
HTMLOpenTag/divHTMLCloseTag
                                                    HTMLOpenTagdiv
    data-tw-merge
    class="accordion-item py-4 first:-mt-4 last:-mb-4 [&:not(:last-child)]:border-b [&:not(:last-child)]:border-slate-200/60 [&:not(:last-child)]:dark:border-darkmode-400 p-4 first:mt-0 last:mb-0 border border-slate-200/60 mt-3 dark:border-darkmode-400"
HTMLCloseTag
    HTMLOpenTagdiv
    class="accordion-header"
    id="faq-accordion-8"
HTMLCloseTag
    HTMLOpenTagbutton
        data-tw-merge
        data-tw-toggle="collapse"
        data-tw-target="#faq-accordion-8-collapse"
        type="button"
        aria-expanded="true"
        aria-controls="faq-accordion-8-collapse"
        class="accordion-button outline-none py-4 -my-4 font-medium w-full rtl:text-right ltr:text-left dark:text-slate-400 [&:not(.collapsed)]:text-primary [&:not(.collapsed)]:dark:text-slate-300 collapsed"
    HTMLCloseTagمعرفی امنیت وی‌پی‌اس لینوکس شماHTMLOpenTag/buttonHTMLCloseTag
HTMLOpenTag/divHTMLCloseTag
                                                        HTMLOpenTagdiv
    id="faq-accordion-8-collapse"
    aria-labelledby="faq-accordion-8"
    class="accordion-collapse collapse mt-3 text-slate-700 leading-relaxed dark:text-slate-400 [&.collapse:not(.show)]:hidden [&.collapse.show]:visible"
HTMLCloseTag
    HTMLOpenTagdiv
        data-tw-merge
        class="accordion-body leading-relaxed text-slate-600 dark:text-slate-500 leading-relaxed text-slate-600 dark:text-slate-500"
    HTMLCloseTag
        لورم ایپسوم به طور ساده یک متن مجازی برای چاپ و صنعت آماده‌سازی است. این متن استاندارد آزمایشی بوده است، زیرا هنگامی که یک چاپگر ناشناخته یک نمونه متن را گرفته و آن را با هم مخلوط می‌کند، یک کتاب نمونه ایجاد می‌شود. این متن نه تنها پنج قرن را زنده مانده است، بلکه وارد دوران صفحه‌آرایی الکترونیکی شده و بدون تغییر اساسی باقی مانده است.
    HTMLOpenTag/divHTMLCloseTag
HTMLOpenTag/divHTMLCloseTag
HTMLOpenTag/divHTMLCloseTagHTMLOpenTag/divHTMLCloseTag

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

رابط اجزاء

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

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

افشا

پراپ	نوع	شرح
بدون پراپ

افشا.Group

پراپ	نوع	شرح
`as`	`string`	نوع عنصر HTML یا کامپوننت React.
`selectedIndex`	`number`	فهرستی که در آن فعال است.
`variant`	نوع ('default' یا 'boxed')	نوع متغیر گروه افشاگری

افشا.دکمه

پراپ	نوع	شرح
بدون پراپ

افشا.Panel

پراپ	نوع	شرح
بدون پراپ