This is the template project that's checked out and configured when you run the bando-up command from ljsthw-bandolier. This is where the code really lives.
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.
bandolier-template/admin/bando/demos/Modal.svelte

33 lines
768 B

<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}