You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
33 lines
768 B
33 lines
768 B
2 years ago
|
<script>
|
||
|
|
import Modal from "$/client/components/Modal.svelte";
|
||
|
|
let modal_open = false;
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style>
|
||
|
|
test-panel {
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
padding: 1rem;
|
||
|
|
background: var(--color-bg);
|
||
|
|
border-radius: var(--border-radius);
|
||
|
|
opacity: 100%;
|
||
|
|
width: 400px;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
|
||
|
|
{#if modal_open}
|
||
|
|
<Modal on:close={ () => modal_open = false }>
|
||
|
|
<test-panel>
|
||
|
|
<h1>Modal Open</h1>
|
||
|
|
<p>
|
||
|
|
You can put anything inside the modal, and it also handles ESC for closing the
|
||
|
|
modal by sending an <b>on:close</b> event.
|
||
|
|
</p>
|
||
|
|
<button on:click={ () => modal_open = false }>CLOSE ME (ESC)</button>
|
||
|
|
</test-panel>
|
||
|
|
</Modal>
|
||
|
|
{:else}
|
||
|
|
<button on:click={ () => modal_open = true }>OPEN MODAL</button>
|
||
|
|
{/if}
|
||
|
|
|