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

Some updates to dialog example

Browse Source
This commit is contained in:
Ryan Gossiaux
2021-12-13 21:57:53 -08:00
parent a4e55d7167
commit 092fdd595d
2 changed files with 58 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/routes/dialog/Nested.svelte
View File

@@ -10,25 +10,25 @@
<DialogOverlay class="fixed inset-0 bg-gray-500 opacity-25" /> <DialogOverlay class="fixed inset-0 bg-gray-500 opacity-25" />
<div <div
class="z-10 fixed left-12 top-24 bg-white w-96 p-4 transform" class="z-10 fixed left-12 top-24 bg-white w-96 p-4 transform"
style={`translate(calc(50px * ${level}), calc(50px * ${level}))`} style={`transform: translate(calc(50px * ${level}), calc(50px * ${level}))`}
> >
<p>Level: {level}</p> <p>Level: {level}</p>
<div class="space-x-4"> <div class="space-x-4">
<button <button
class="bg-gray-200 px-2 py-1 rounded" class="bg-gray-200 px-2 py-1 rounded"
onClick={() => (showChild = true)} on:click={() => (showChild = true)}
> >
Open (1) Open (1)
</button> </button>
<button <button
class="bg-gray-200 px-2 py-1 rounded" class="bg-gray-200 px-2 py-1 rounded"
onClick={() => (showChild = true)} on:click={() => (showChild = true)}
> >
Open (2) Open (2)
</button> </button>
<button <button
class="bg-gray-200 px-2 py-1 rounded" class="bg-gray-200 px-2 py-1 rounded"
onClick={() => (showChild = true)} on:click={() => (showChild = true)}
> >
Open (3) Open (3)
</button> </button>

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

@@ -130,7 +130,7 @@
</MenuButton> </MenuButton>
</span> </span>
<TransitionChild <TransitionRoot
enter="transition duration-300 ease-out" enter="transition duration-300 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"
@@ -138,63 +138,61 @@
leaveFrom="transform scale-100 opacity-100" leaveFrom="transform scale-100 opacity-100"
leaveTo="transform scale-95 opacity-0" leaveTo="transform scale-95 opacity-0"
> >
<Portal> <MenuItems
<MenuItems 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"
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" >
> <div class="px-4 py-3">
<div class="px-4 py-3"> <p class="text-sm leading-5">Signed in as</p>
<p class="text-sm leading-5">Signed in as</p> <p
<p class="text-sm font-medium leading-5 text-gray-900 truncate"
class="text-sm font-medium leading-5 text-gray-900 truncate" >
> tom@example.com
tom@example.com </p>
</p> </div>
</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
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>
</TransitionChild>
</Menu> </Menu>
</div> </div>
</div> </div>