[英]Dropup in TailwindCSS / AlpineJS
Does anyone know how to build a 'dropup' in TailwindCSS /AlpineJS?有谁知道如何在 TailwindCSS /AlpineJS 中构建“dropup”? I know how to build a dropdown but can't manage to make a dropup.我知道如何建立下拉菜单,但无法制作下拉菜单。
My dropdown:我的下拉列表:
<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&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&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/ https://jsfiddle.net/s4m6vea7/
Thanks!谢谢!
I do know how to build this.我确实知道如何构建它。 Building the drop up is easy.建立下拉菜单很容易。 Spacing it out evenly is more difficult.将其均匀分布更加困难。 In this code pen , I took your example and made it work without changing very much.在此代码笔中,我以您的示例为例,并使其在没有太大变化的情况下工作。 I added the bottom-0
class to the dropdown.我将bottom-0
class 添加到下拉列表中。 I also added an mb-12
class to it would sit above the button.我还添加了一个mb-12
class ,它将位于按钮上方。 This isn't a super dynamic fix though, you'll have to add margins to the bottom of every element you use it on.不过,这不是一个超级动态修复,您必须在使用它的每个元素的底部添加边距。
I changed this code pen to have a wrapper around the dropup.我更改了此代码笔以在下拉菜单周围有一个包装器。 By wrapping the dropup I was able to get the bottom-0
class to start at the top of the dropdown.通过包装下拉菜单,我能够让bottom-0
class 从下拉菜单的顶部开始。 Any margin added will be consistent regardless of the dropup height.无论下拉高度如何,添加的任何边距都将保持一致。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.