این صفحه را قبل استفاده از کامپوننتها ببینید :) در صورت عدم بارگذاری پیش‌نمایش با Vpn امتحان کنید.
  • زبانه ها
پیش فرض

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

<!-- tabs container -->
<div class="space-y-5" x-data="{ activeTab: 'tabOne' }">
    <!-- tabs:list-container -->
    <div class="relative overflow-x-auto">
        <!-- tabs:list -->
        <ul
            class="inline-flex gap-2 bg-zinc-100 dark:bg-zinc-900 border border-zinc-200 dark:border-zinc-800 rounded-full p-1">
            <!-- tabs:list:item -->
            <li>
                <button type="button" class="flex items-center gap-x-2 relative rounded-full py-2 px-4"
                    x-bind:class="activeTab === 'tabOne' ? 'text-black dark:text-white bg-white dark:bg-zinc-950' : 'text-zinc-400'"
                    x-on:click="activeTab = 'tabOne'">
                    <!-- active icon -->
                    <span x-show="activeTab === 'tabOne'">
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-5 h-5">
                            <path
                                d="M2.695 14.763l-1.262 3.154a.5.5 0 00.65.65l3.155-1.262a4 4 0 001.343-.885L17.5 5.5a2.121 2.121 0 00-3-3L3.58 13.42a4 4 0 00-.885 1.343z" />
                        </svg>
                    </span><!-- end active icon -->

                    <!-- inactive icon -->
                    <span x-show="activeTab !== 'tabOne'">
                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                            stroke="currentColor" class="w-5 h-5">
                            <path stroke-linecap="round" stroke-linejoin="round"
                                d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L6.832 19.82a4.5 4.5 0 01-1.897 1.13l-2.685.8.8-2.685a4.5 4.5 0 011.13-1.897L16.863 4.487zm0 0L19.5 7.125" />
                        </svg>
                    </span><!-- end inactive icon -->

                    <span class="font-semibold text-xs">معرفی</span>
                </button>
            </li><!-- end tabs:list:item -->

            <!-- tabs:list:item -->
            <li>
                <button type="button" class="flex items-center gap-x-2 relative rounded-full py-2 px-4"
                    x-bind:class="activeTab === 'tabTwo' ? 'text-black dark:text-white bg-white dark:bg-zinc-950' : 'text-zinc-400'"
                    x-on:click="activeTab = 'tabTwo'">
                    <!-- active icon -->
                    <span x-show="activeTab === 'tabTwo'">
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-5 h-5">
                            <path fill-rule="evenodd"
                                d="M6 4.75A.75.75 0 016.75 4h10.5a.75.75 0 010 1.5H6.75A.75.75 0 016 4.75zM6 10a.75.75 0 01.75-.75h10.5a.75.75 0 010 1.5H6.75A.75.75 0 016 10zm0 5.25a.75.75 0 01.75-.75h10.5a.75.75 0 010 1.5H6.75a.75.75 0 01-.75-.75zM1.99 4.75a1 1 0 011-1H3a1 1 0 011 1v.01a1 1 0 01-1 1h-.01a1 1 0 01-1-1v-.01zM1.99 15.25a1 1 0 011-1H3a1 1 0 011 1v.01a1 1 0 01-1 1h-.01a1 1 0 01-1-1v-.01zM1.99 10a1 1 0 011-1H3a1 1 0 011 1v.01a1 1 0 01-1 1h-.01a1 1 0 01-1-1V10z"
                                clip-rule="evenodd" />
                        </svg>
                    </span><!-- end active icon -->

                    <!-- inactive icon -->
                    <span x-show="activeTab !== 'tabTwo'">
                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                            stroke="currentColor" class="w-5 h-5">
                            <path stroke-linecap="round" stroke-linejoin="round"
                                d="M8.25 6.75h12M8.25 12h12m-12 5.25h12M3.75 6.75h.007v.008H3.75V6.75zm.375 0a.375.375 0 11-.75 0 .375.375 0 01.75 0zM3.75 12h.007v.008H3.75V12zm.375 0a.375.375 0 11-.75 0 .375.375 0 01.75 0zm-.375 5.25h.007v.008H3.75v-.008zm.375 0a.375.375 0 11-.75 0 .375.375 0 01.75 0z" />
                        </svg>
                    </span><!-- end inactive icon -->

                    <span class="font-semibold text-xs">مشخصات</span>
                </button>
            </li><!-- end tabs:list:item -->
        </ul><!-- end tabs:list -->
    </div><!-- end tabs:list-container -->

    <!-- tabs:contents -->
    <div>
        <!-- tabs:contents:tabOne -->
        <div x-show="activeTab === 'tabOne'">
            <div class="font-bold text-sm text-black dark:text-white mb-3">محتوای تب یک</div>
            <div class="font-medium text-xs text-zinc-400 space-y-3">
                <p>
                    لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از
                    طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که
                    لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای متنوع با هدف بهبود
                    ابزارهای کاربردی می باشد، کتابهای زیادی در شصت و سه درصد گذشته حال و آینده،
                    شناخت فراوان جامعه و متخصصان را می طلبد، تا با نرم افزارها شناخت بیشتری را برای
                    طراحان رایانه ای علی الخصوص طراحان خلاقی، و فرهنگ پیشرو در زبان فارسی ایجاد کرد،
                    در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها، و شرایط
                    سخت تایپ به پایان رسد و زمان مورد نیاز شامل حروفچینی دستاوردهای اصلی، و جوابگوی
                    سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.
                </p>
            </div>
        </div><!-- end tabs:contents:tabOne -->

        <!-- tabs:contents:tabTwo -->
        <div x-show="activeTab === 'tabTwo'">
            <div class="font-bold text-sm text-black dark:text-white mb-3">محتوای تب دو</div>
            <div class="font-medium text-xs text-zinc-400 space-y-3">
                <p>
                    لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از
                    طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که
                    لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای متنوع با هدف بهبود
                    ابزارهای کاربردی می باشد، کتابهای زیادی در شصت و سه درصد گذشته حال و آینده،
                    شناخت فراوان جامعه و متخصصان را می طلبد، تا با نرم افزارها شناخت بیشتری را برای
                    طراحان رایانه ای علی الخصوص طراحان خلاقی، و فرهنگ پیشرو در زبان فارسی ایجاد کرد،
                    در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها، و شرایط
                    سخت تایپ به پایان رسد و زمان مورد نیاز شامل حروفچینی دستاوردهای اصلی، و جوابگوی
                    سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.
                </p>
                <p>
                    لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از
                    طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که
                    لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای متنوع با هدف بهبود
                    ابزارهای کاربردی می باشد، کتابهای زیادی در شصت و سه درصد گذشته حال و آینده،
                    شناخت فراوان جامعه و متخصصان را می طلبد، تا با نرم افزارها شناخت بیشتری را برای
                    طراحان رایانه ای علی الخصوص طراحان خلاقی، و فرهنگ پیشرو در زبان فارسی ایجاد کرد،
                    در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها، و شرایط
                    سخت تایپ به پایان رسد و زمان مورد نیاز شامل حروفچینی دستاوردهای اصلی، و جوابگوی
                    سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.
                </p>
            </div>
        </div><!-- end tabs:contents:tabTwo -->
    </div><!-- end tabs:contents -->
</div><!-- end tabs container -->