如何在 TailwindCSS 和 Alpine.js 中构建没有重复标签内容的响应式手风琴标签？

Posted 2023-03-07

【中文标题】如何在 TailwindCSS 和 Alpine.js 中构建没有重复标签内容的响应式手风琴标签？

【英文标题】：How to build responsive Accordion Tabs without duplicated tab content in TailwindCSS & Alpine.js?

【发布时间】：2021-12-08 09:37:40

【问题描述】：

我正在尝试在 TailwindCSS 和 Alpine.js 中构建 Accordion Tabs 组件，类似于 A11y Accordion Tabs。

在移动视口中，组件的行为应该像手风琴一样。 在桌面上，它的行为应该类似于选项卡。

但是如何避免在页面中重复相同的内容呢？理想情况下，选项卡/手风琴内的内容应该只在页面中出现一次，这样 html 就不会臃肿。

Here's a codepen 这是我目前所拥有的：

<div class="m-1.5" x-data=" tab : 'tab-a' ">
  <div class="sm:flex">
    <a x-on:click="tab = 'tab-a'">
      <div :class="tab === 'tab-a' ? 'sm:bg-white' : 'sm:bg-gray-200'" class="sm:rounded-t-sm sm:mr-2 cursor-pointer bg-gray-200 font-bold p-1.5 pb-3 pt-3 text-gray-700 text-xs my-px sm:mb-0 w-full sm:w-max">
        Tab A
      </div>
    </a>
    <div class="sm:hidden relative overflow-hidden max-h-0 duration-300" x-ref="containerA" x-bind:style="tab === 'tab-a' ? 'max-height: ' + $refs.containerA.scrollHeight + 'px' : ''">
      Tab A content
    </div>

    <a x-on:click="tab = 'tab-b'">
      <div :class="tab === 'tab-b' ? 'sm:bg-white' : 'sm:bg-gray-200'" class="sm:rounded-t-sm sm:mr-2 cursor-pointer bg-gray-200 font-bold p-1.5 pb-3 pt-3 text-gray-700 text-xs my-px sm:mb-0 w-full sm:w-max">
        Tab B
      </div>
    </a>
    <div class="sm:hidden relative overflow-hidden max-h-0 duration-300" x-ref="containerB" x-bind:style="tab === 'tab-b' ? 'max-height: ' + $refs.containerB.scrollHeight + 'px' : ''">
      Tab B content
    </div>

    <a x-on:click="tab = 'tab-c'">
      <div :class="tab === 'tab-c' ? 'sm:bg-white' : 'sm:bg-gray-200'" class="sm:rounded-t-sm sm:mr-2 cursor-pointer bg-gray-200 font-bold p-1.5 pb-3 pt-3 text-gray-700 text-xs my-px sm:mb-0 w-full sm:w-max">
        Tab C
      </div>
    </a>
    <div class="sm:hidden relative overflow-hidden max-h-0 duration-300" x-ref="containerC" x-bind:style="tab === 'tab-c' ? 'max-height: ' + $refs.containerC.scrollHeight + 'px' : ''">
      Tab C content
    </div>
  </div>
  <div class="hidden sm:block">
    <div x-show="tab === 'tab-a'">
      Tab A content should not be duplicated here
    </div>
    <div x-show="tab === 'tab-b'">
      Tab B content should not be duplicated here
    </div>
    <div x-show="tab === 'tab-c'">
      Tab C content should not be duplicated here
    </div>
  </div>
</div>

【参考方案1】：

这里的答案是复制标签标题而不是内容：

<div class="m-1.5" x-data=" tab : 'tab-a' ">
  <div class="flex">
    <a x-on:click="tab = 'tab-a'">
      <h3 :class="tab === 'tab-a' ? 'sm:bg-white' : 'sm:bg-gray-200'" class="hidden sm:block cursor-pointer bg-gray-200 font-bold p-3 text-gray-700 text-xs w-16 border-2 border-b-0">
        Tab A
      </h3>
    </a>
    <a x-on:click="tab = 'tab-b'">
      <h3 :class="tab === 'tab-b' ? 'sm:bg-white' : 'sm:bg-gray-200'" class="hidden sm:block cursor-pointer bg-gray-200 font-bold p-3 text-gray-700 text-xs w-16 border-2 border-b-0">
        Tab B
      </h3>
    </a>
    <a x-on:click="tab = 'tab-c'">
      <h3 :class="tab === 'tab-c' ? 'sm:bg-white' : 'sm:bg-gray-200'" class="hidden sm:block cursor-pointer bg-gray-200 font-bold p-3 text-gray-700 text-xs w-16 border-2 border-b-0">
        Tab C
      </h3>
    </a>
  </div>
  <a x-on:click="tab = 'tab-a'">
    <h3 class="sm:hidden cursor-pointer bg-gray-200 font-bold p-3 text-gray-700 text-xs my-px sm:mb-0">
      Tab A
    </h3>
  </a>
  <div class="overflow-hidden max-h-0 duration-300 sm:transition-none" x-ref="containerA" x-bind:style="tab === 'tab-a' ? 'max-height: ' + $refs.containerA.scrollHeight + 'px' : ''">
    Tab A content
  </div>
  <a x-on:click="tab = 'tab-b'">
    <h3 class="sm:hidden cursor-pointer bg-gray-200 font-bold p-3 text-gray-700 text-xs my-px sm:mb-0">
      Tab B
    </h3>
  </a>
  <div class="overflow-hidden max-h-0 duration-300 sm:transition-none" x-ref="containerB" x-bind:style="tab === 'tab-b' ? 'max-height: ' + $refs.containerB.scrollHeight + 'px' : ''">
    Tab B content
  </div>
  <a x-on:click="tab = 'tab-c'">
    <h3 class="sm:hidden cursor-pointer bg-gray-200 font-bold p-3 text-gray-700 text-xs my-px sm:mb-0">
      Tab C
    </h3>
  </a>
  <div class="overflow-hidden max-h-0 duration-300 sm:transition-none" x-ref="containerC" x-bind:style="tab === 'tab-c' ? 'max-height: ' + $refs.containerC.scrollHeight + 'px' : ''">
    Tab C content
  </div>
</div>