Web Components Library

Tabs With Url

No notes defined.

  • Handle: @testing-tabs-with-url
  • Preview:
  • Filesystem Path: components/10-other-examples/testing-playground/alpine-js-v3-examples/tabs-with-url.hbs 
<script defer src="https://unpkg.com/[email protected]/dist/cdn.min.js"></script>

<!-- source https://js.hyperui.dev/components/tabs-with-url -->

<div x-data="{ activeTab: 'productDetails' }" x-init="activeTab = window.location.hash ? window.location.hash.replace('#', '') : 'productDetails'">
    <nav>
        <ul class="flex flex-wrap gap-4">
            <li>
                <a @click="activeTab = 'productDetails'" :class="{ 'font-bold': activeTab === 'productDetails' }" class="block p-3 text-white bg-black rounded-lg" href="#productDetails">
                    Product Details
                </a>
            </li>

            <li>
                <a @click="activeTab = 'productSpecs'" :class="{ 'font-bold': activeTab === 'productSpecs' }" class="block p-3 text-white bg-black rounded-lg" href="#productSpecs">
                    Product Specs
                </a>
            </li>

            <li>
                <a @click="activeTab = 'productReviews'" :class="{ 'font-bold': activeTab === 'productReviews' }" class="block p-3 text-white bg-black rounded-lg" href="#productReviews">
                    Product Reviews
                </a>
            </li>
        </ul>
    </nav>

    <div class="p-6 mt-4 text-white bg-black rounded-lg">
        <div x-show="activeTab === 'productDetails'">
            <h2>Product Details</h2>
        </div>

        <div x-show="activeTab === 'productSpecs'">
            <h2>Product Specs</h2>
        </div>

        <div x-show="activeTab === 'productReviews'">
            <h2>Product Reviews</h2>
        </div>
    </div>
</div>
 
<script defer src="https://unpkg.com/[email protected]/dist/cdn.min.js"></script>

<!-- source https://js.hyperui.dev/components/tabs-with-url -->


<div
  x-data="{ activeTab: 'productDetails' }"
  x-init="activeTab = window.location.hash ? window.location.hash.replace('#', '') : 'productDetails'"
>
  <nav>
    <ul class="flex flex-wrap gap-4">
      <li>
        <a
          @click="activeTab = 'productDetails'"
          :class="{ 'font-bold': activeTab === 'productDetails' }"
          class="block p-3 text-white bg-black rounded-lg"
          href="#productDetails"
        >
          Product Details
        </a>
      </li>

      <li>
        <a
          @click="activeTab = 'productSpecs'"
          :class="{ 'font-bold': activeTab === 'productSpecs' }"
          class="block p-3 text-white bg-black rounded-lg"
          href="#productSpecs"
        >
          Product Specs
        </a>
      </li>

      <li>
        <a
          @click="activeTab = 'productReviews'"
          :class="{ 'font-bold': activeTab === 'productReviews' }"
          class="block p-3 text-white bg-black rounded-lg"
          href="#productReviews"
        >
          Product Reviews
        </a>
      </li>
    </ul>
  </nav>

  <div class="p-6 mt-4 text-white bg-black rounded-lg">
    <div x-show="activeTab === 'productDetails'">
      <h2>Product Details</h2>
    </div>

    <div x-show="activeTab === 'productSpecs'">
      <h2>Product Specs</h2>
    </div>

    <div x-show="activeTab === 'productReviews'">
      <h2>Product Reviews</h2>
    </div>
  </div>
</div>
 
/* No context defined. */