组件 手风琴 手风琴组件

手风琴组件

带有 Material Design 的手风琴组件,大地色调配色方案,电子商务的简单复杂性,响应式深色主题支持。

预览

HTML 代码

<div class="accordion-item bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700">
  <h2 class="accordion-header mb-0" id="headingOne">
    <button
      class="accordion-button
    relative
    flex
    items-center
    w-full
    py-4
    px-5
    text-base text-gray-800 dark:text-gray-200 text-left
    bg-white dark:bg-gray-800
    border-0
    rounded-none
    transition
    focus:outline-none"
      type="button"
      data-bs-toggle="collapse"
      data-bs-target="#collapseOne"
      aria-expanded="true"
      aria-controls="collapseOne"
    >
      Product Information
    </button>
  </h2>
  <div
    id="collapseOne"
    class="accordion-collapse collapse show"
    aria-labelledby="headingOne"
    data-bs-parent="#accordionExample"
  >
    <div class="accordion-body py-4 px-5 text-gray-600 dark:text-gray-400">
      This is the first item's accordion body. It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
    </div>
  </div>
</div>

<div class="accordion-item bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700">
  <h2 class="accordion-header mb-0" id="headingTwo">
    <button
      class="accordion-button
    collapsed
    relative
    flex
    items-center
    w-full
    py-4
    px-5
    text-base text-gray-800 dark:text-gray-200 text-left
    bg-white dark:bg-gray-800
    border-0
    rounded-none
    transition
    focus:outline-none"
      type="button"
      data-bs-toggle="collapse"
      data-bs-target="#collapseTwo"
      aria-expanded="false"
      aria-controls="collapseTwo"
    >
      Shipping Details
    </button>
  </h2>
  <div
    id="collapseTwo"
    class="accordion-collapse collapse"
    aria-labelledby="headingTwo"
    data-bs-parent="#accordionExample"
  >
    <div class="accordion-body py-4 px-5 text-gray-600 dark:text-gray-400">
      This is the second item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
    </div>
  </div>
</div>

<div class="accordion-item bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700">
  <h2 class="accordion-header mb-0" id="headingThree">
    <button
      class="accordion-button
    collapsed
    relative
    flex
    items-center
    w-full
    py-4
    px-5
    text-base text-gray-800 dark:text-gray-200 text-left
    bg-white dark:bg-gray-800
    border-0
    rounded-none
    transition
    focus:outline-none"
      type="button"
      data-bs-toggle="collapse"
      data-bs-target="#collapseThree"
      aria-expanded="false"
      aria-controls="collapseThree"
    >
      Returns and Exchanges
    </button>
  </h2>
  <div
    id="collapseThree"
    class="accordion-collapse collapse"
    aria-labelledby="headingThree"
    data-bs-parent="#accordionExample"
  >
    <div class="accordion-body py-4 px-5 text-gray-600 dark:text-gray-400">
      This is the third item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
    </div>
  </div>
</div>

相关组件

Dark Mode Accordion (金融/银行)

一个简单的、单色的、深色主题的折叠面板组件,专为金融和银行界面而设计。它具有响应式设计和深色模式支持,使用单一颜色的阴影以获得干净的外观。

打开

Neumorphic 手风琴组件

具有 Triadic 配色方案的 Neumorphic Accordion Component 手风琴组件,适用于商业网站。它具有响应式设计,支持深色模式,完全通过 HTML 和 Tailwind CSS 实现。

打开

手风琴组件

一个3D风格的手风琴组件,专为支持黑暗主题的商业/企业网站设计。

打开