javascript - TailwindCSS/AlpineJS 中的下拉菜单

Question

有谁知道如何在 TailwindCSS/AlpineJS 中构建“下拉菜单”？我知道如何构建下拉菜单，但无法制作下拉菜单。

我的下拉列表:

<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine.min.js" defer></script>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<meta charset="utf-8" />

      <div class="flex-shrink-0 flex border-t border-gray-200 p-4">
        <a href="#" class="flex-shrink-0 group block">
          <div class="flex items-center">
            <div @click.away="open = false" class="relative" x-data="{ open: false }">
                  <div>
                    <button @click="open = !open" class="max-w-xs flex items-center text-sm rounded-full text-white focus:outline-none focus:shadow-solid transition ease-in-out duration-150">
                      <img class="inline-block h-8 w-8 rounded-full" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=facearea&amp;facepad=2&amp;w=256&amp;h=256&amp;q=80" alt="">
            <div class="ml-3">
              <p class="text-sm leading-5 font-medium text-gray-700 group-hover:text-gray-900">
                John Doe
              </p>
              <p class="text-xs text-left leading-4 font-medium text-gray-500 group-hover:text-gray-700 transition ease-in-out duration-150">
                View profile
              </p>
            </div>                      
                    </button>
                  </div>
                  <div x-show="open" x-transition:enter="transition ease-out duration-100" x-transition:enter-start="transform opacity-0 scale-95" x-transition:enter-end="transform opacity-100 scale-100" x-transition:leave="transition ease-in duration-75" x-transition:leave-start="transform opacity-100 scale-100" x-transition:leave-end="transform opacity-0 scale-95" class="origin-top-right absolute left-0 mt-2 -mr-1 w-48 rounded-md shadow-lg">
                    <div class="py-1 rounded-md bg-white shadow-xs relative">
                      <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 transition ease-in-out duration-150">Your Profile</a>
                      <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 transition ease-in-out duration-150">Settings</a>
                      <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 transition ease-in-out duration-150">Sign out</a>
                    </div>
                  </div>
                </div>

          </div>
        </a>
      </div>

https://jsfiddle.net/s4m6vea7/

谢谢!

Answer 1

变化最小

我确实知道如何构建它。构建 drop up 很容易。均匀地隔开它更加困难。在 this code pen ，我以你的例子为例，并在没有太大改变的情况下让它工作。我将 bottom-0 类添加到下拉列表中。我还添加了一个 mb-12 类，它位于按钮上方。这不是一个 super 动态的修复，你必须在你使用它的每个元素的底部添加边距。

固溶体

我改变了this code pen在下拉菜单周围有一个包装器。通过包装下拉列表，我能够让 bottom-0 类从下拉列表的顶部开始。无论下拉高度如何，添加的任何边距都将保持一致。