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

Add more examples

Browse Source
This commit is contained in:
Ryan Gossiaux
2021-12-18 18:36:58 -08:00
parent 39cc12c8ef
commit 3b5e036dc4
4 changed files with 127 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
src/routes/transitions/component-examples/nested/_Box.svelte Normal file
View File

@@ -0,0 +1,20 @@
<script>
import { TransitionChild } from "$lib";
</script>
<TransitionChild
unmount={false}
enter="transition translate duration-300"
enterFrom="transform -translate-x-full"
enterTo="transform translate-x-0"
leave="transition translate duration-300"
leaveFrom="transform translate-x-0"
leaveTo="transform translate-x-full"
>
<div
class="p-4 space-y-2 text-sm font-semibold tracking-wide text-gray-700 uppercase bg-white rounded-md shadow"
>
<span>This is a box</span>
<slot />
</div>
</TransitionChild>

37
src/routes/transitions/component-examples/nested/hidden.svelte Normal file
View File

@@ -0,0 +1,37 @@
<script lang="ts">
import { Transition } from "$lib";
import Box from "./_Box.svelte";
let isOpen = false;
</script>
<div class="flex justify-center w-screen h-full p-12 bg-gray-50">
<div class="space-y-2 w-96">
<span class="inline-flex rounded-md shadow-sm">
<button
type="button"
on:click={() => (isOpen = !isOpen)}
class="inline-flex items-center px-3 py-2 text-sm font-medium leading-4 text-gray-700 transition bg-white border border-gray-300 rounded-md duration-150-out hover:text-gray-500 focus:outline-none focus:border-blue-300 focus:shadow-outline-blue active:text-gray-800 active:bg-gray-50"
>
{isOpen ? "Hide" : "Show"}
</button>
</span>
<Transition show={isOpen} unmount={false}>
<Box>
<Box>
<Box>
<Box />
</Box>
<Box>
<Box>
<Box>
<Box />
</Box>
</Box>
</Box>
</Box>
</Box>
</Transition>
</div>
</div>

37
src/routes/transitions/component-examples/nested/unmount.svelte Normal file
View File

@@ -0,0 +1,37 @@
<script lang="ts">
import { Transition } from "$lib";
import Box from "./_Box.svelte";
let isOpen = false;
</script>
<div class="flex justify-center w-screen h-full p-12 bg-gray-50">
<div class="space-y-2 w-96">
<span class="inline-flex rounded-md shadow-sm">
<button
type="button"
on:click={() => (isOpen = !isOpen)}
class="inline-flex items-center px-3 py-2 text-sm font-medium leading-4 text-gray-700 transition bg-white border border-gray-300 rounded-md duration-150-out hover:text-gray-500 focus:outline-none focus:border-blue-300 focus:shadow-outline-blue active:text-gray-800 active:bg-gray-50"
>
{isOpen ? "Hide" : "Show"}
</button>
</span>
<Transition show={isOpen} unmount={true}>
<Box>
<Box>
<Box>
<Box />
</Box>
<Box>
<Box>
<Box>
<Box />
</Box>
</Box>
</Box>
</Box>
</Box>
</Transition>
</div>
</div>

33
src/routes/transitions/component-examples/peek-a-boo.svelte Normal file
View File

@@ -0,0 +1,33 @@
<script lang="ts">
import { Transition } from "$lib";
let isOpen = false;
</script>
<div class="flex justify-center w-screen h-full p-12 bg-gray-50">
<div class="space-y-2 w-96">
<span class="inline-flex rounded-md shadow-sm">
<button
type="button"
on:click={() => (isOpen = !isOpen)}
class="inline-flex items-center px-3 py-2 text-sm font-medium leading-4 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:text-gray-800 active:bg-gray-50"
>
{isOpen ? "Hide" : "Show"}
</button>
</span>
<Transition
show={isOpen}
unmount={false}
enter="transition ease-out duration-300"
enterFrom="transform opacity-0"
enterTo="transform opacity-100"
leave="transition ease-in duration-300"
leaveFrom="transform opacity-100"
leaveTo="transform opacity-0"
class="p-4 bg-white rounded-md shadow"
>
Contents to show and hide
</Transition>
</div>
</div>