search

benjaminforras / ngx-headlessui-old

https://ngx-headlessui.vercel.app
7 stars 1 forks source link

Component: Popover #16

Open benjaminforras opened 3 years ago

benjaminforras commented 3 years ago

Markup:

<nav PopoverGroup ar-label="Mythical University" class="flex space-x-3 m-12">
  <div Popover class="relative">
    <button PopoverButton class="px-3 py-2 bg-gray-300">About</button>
    <div PopoverPanel class="absolute flex flex-col w-64 bg-gray-100 border-2 border-blue-900">
      <a href="/" class="px-3 py-2 hover:bg-gray-200">
        Overview
      </a>
      <a href="/" class="px-3 py-2 hover:bg-gray-200">
        Administration
      </a>
      <a href="/" class="px-3 py-2 hover:bg-gray-200">
        Facts
      </a>
      <a href="/" class="px-3 py-2 hover:bg-gray-200">
        Campus Tours
      </a>
    </div>
  </div>
</nav>
benjaminforras commented 1 year ago

PopoverPanel should be a ngTemplate directive Popover should use a Portal