-
Notifications
You must be signed in to change notification settings - Fork 0
/
+page.svelte
64 lines (60 loc) · 2.03 KB
/
+page.svelte
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
<script lang="ts">
import Popdown from '$lib/Popdown.svelte';
import PositionExample from '../components/PositionExample.svelte';
import { fade } from 'svelte/transition';
import { onClickOutside } from '$lib/util/on-click-outside';
const horizontalOptions = ['outer-left', 'inner-left', 'center', 'inner-right', 'outer-right'];
const verticalOptions = ['above', 'top', 'bottom', 'below', 'middle'];
let overflow = true;
let clickContentVisible = false;
let hoverContentVisible = false;
</script>
<h1>Popdown Demo</h1>
<h2>Onclick content:</h2>
<div>
<Popdown position="below center" showContent={clickContentVisible}>
<svelte:fragment slot="trigger">
<button
on:click={() => (clickContentVisible = !clickContentVisible)}
use:onClickOutside={() => (clickContentVisible = false)}>click me</button
>
</svelte:fragment>
<svelte:fragment slot="content">
<div class="content" transition:fade>content</div>
</svelte:fragment>
</Popdown>
</div>
<h2>onhover popover</h2>
<Popdown position="outer-right center" showContent={hoverContentVisible}>
<button
on:mouseover={() => (hoverContentVisible = true)}
on:focus={() => (hoverContentVisible = true)}
on:mouseout={() => (hoverContentVisible = false)}
on:blur={() => (hoverContentVisible = false)}
slot="trigger"
>
hover me
</button>
<svelte:fragment slot="content">
<div class="content" transition:fade>content</div>
</svelte:fragment>
</Popdown>
<h2>Positioning:</h2>
<label>
<input type="checkbox" bind:checked={overflow} />
container is scrollable
</label>
<div class="postion-examples">
{#each horizontalOptions as horizontalOption}
{#each verticalOptions as verticalOption}
<PositionExample horizontal={horizontalOption} vertical={verticalOption} contentSize="small" {overflow} />
<PositionExample horizontal={horizontalOption} vertical={verticalOption} contentSize="big" {overflow} />
{/each}
{/each}
</div>
<style>
.postion-examples {
display: flex;
flex-wrap: wrap;
}
</style>