public/svelte-headlessui
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 1 Wiki Activity

Bring back the popper & portal in dialog example

Browse Source
This commit is contained in:
Ryan Gossiaux
2021-12-14 11:08:36 -08:00
parent 0fe7b0ea04
commit 70a4a814b7
1 changed files with 66 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files

119
src/routes/dialog/index.svelte
View File

@@ -10,6 +10,15 @@
import Portal from "$lib/components/portal/Portal.svelte"; import Portal from "$lib/components/portal/Portal.svelte";
import MenuItems from "$lib/components/menu/MenuItems.svelte"; import MenuItems from "$lib/components/menu/MenuItems.svelte";
import MenuItem from "$lib/components/menu/MenuItem.svelte"; import MenuItem from "$lib/components/menu/MenuItem.svelte";
import { createPopperActions } from "svelte-popperjs";
const [popperRef, popperContent] = createPopperActions();
const popperOptions = {
placement: "bottom-end",
strategy: "fixed",
modifiers: [{ name: "offset", options: { offset: [0, 10] } }],
};
function classNames(...classes) { function classNames(...classes) {
return classes.filter(Boolean).join(" "); return classes.filter(Boolean).join(" ");
} }
@@ -113,6 +122,7 @@
<Menu> <Menu>
<span class="rounded-md shadow-sm"> <span class="rounded-md shadow-sm">
<MenuButton <MenuButton
use={[popperRef]}
class="inline-flex justify-center w-full px-4 py-2 text-sm font-medium leading-5 text-gray-700 transition duration-150 ease-in-out bg-white border border-gray-300 rounded-md hover:text-gray-500 focus:outline-none focus:border-blue-300 focus:shadow-outline-blue active:bg-gray-50 active:text-gray-800" class="inline-flex justify-center w-full px-4 py-2 text-sm font-medium leading-5 text-gray-700 transition duration-150 ease-in-out bg-white border border-gray-300 rounded-md hover:text-gray-500 focus:outline-none focus:border-blue-300 focus:shadow-outline-blue active:bg-gray-50 active:text-gray-800"
> >
<span>Choose a reason</span> <span>Choose a reason</span>
@@ -131,67 +141,70 @@
</span> </span>
<TransitionRoot <TransitionRoot
enter="transition duration-300 ease-out" enter="transition duration-1000 ease-out"
enterFrom="transform scale-95 opacity-0" enterFrom="transform scale-95 opacity-0"
enterTo="transform scale-100 opacity-100" enterTo="transform scale-100 opacity-100"
leave="transition duration-75 ease-out" leave="transition duration-75 ease-out"
leaveFrom="transform scale-100 opacity-100" leaveFrom="transform scale-100 opacity-100"
leaveTo="transform scale-95 opacity-0" leaveTo="transform scale-95 opacity-0"
> >
<MenuItems <Portal>
class="z-20 w-56 mt-2 origin-top-right bg-white border border-gray-200 divide-y divide-gray-100 rounded-md shadow-lg outline-none" <MenuItems
> use={[[popperContent, popperOptions]]}
<div class="px-4 py-3"> class="z-20 w-56 mt-2 origin-top-right bg-white border border-gray-200 divide-y divide-gray-100 rounded-md shadow-lg outline-none"
<p class="text-sm leading-5">Signed in as</p> >
<p <div class="px-4 py-3">
class="text-sm font-medium leading-5 text-gray-900 truncate" <p class="text-sm leading-5">Signed in as</p>
> <p
tom@example.com class="text-sm font-medium leading-5 text-gray-900 truncate"
</p> >
</div> tom@example.com
</p>
</div>
<div class="py-1"> <div class="py-1">
<MenuItem <MenuItem
as="a" as="a"
href="#account-settings" href="#account-settings"
class={resolveClass} class={resolveClass}
> >
Account settings Account settings
</MenuItem> </MenuItem>
<MenuItem <MenuItem
as="a" as="a"
href="#support" href="#support"
class={resolveClass} class={resolveClass}
> >
Support Support
</MenuItem> </MenuItem>
<MenuItem <MenuItem
as="a" as="a"
disabled disabled={true}
href="#new-feature" href="#new-feature"
class={resolveClass} class={resolveClass}
> >
New feature (soon) New feature (soon)
</MenuItem> </MenuItem>
<MenuItem <MenuItem
as="a" as="a"
href="#license" href="#license"
class={resolveClass} class={resolveClass}
> >
License License
</MenuItem> </MenuItem>
</div> </div>
<div class="py-1"> <div class="py-1">
<MenuItem <MenuItem
as="a" as="a"
href="#sign-out" href="#sign-out"
class={resolveClass} class={resolveClass}
> >
Sign out Sign out
</MenuItem> </MenuItem>
</div> </div>
</MenuItems> </MenuItems>
</Portal>
</TransitionRoot> </TransitionRoot>
</Menu> </Menu>
</div> </div>