Examples
- Introduction
- Reactivity
- Props
- Logic
- Events
- Bindings
- Lifecycle
- Stores
- Motion
- Transitions
- Animations
- Easing
- SVG
- Actions
- Classes
- Component composition
- Context API
- Special elements
- Module context
- Debugging
- 7GUIs
- Miscellaneous
App.svelte
Modal.svelte
<script> import Modal from './Modal.svelte'; let showModal = false; </script> <button on:click={() => (showModal = true)}> show modal </button> <Modal bind:showModal> <h2 slot="header"> modal <small><em>adjective</em> mod·al \ˈmō-dəl\</small> </h2> <ol class="definition-list"> <li>of or relating to modality in logic</li> <li> containing provisions as to the mode of procedure or the manner of taking effect —used of a contract or legacy </li> <li>of or relating to a musical mode</li> <li>of or relating to structure as opposed to substance</li> <li>of, relating to, or constituting a grammatical form or category characteristically indicating predication</li> <li>of or relating to a statistical mode</li> </ol> <a href="https://www.merriam-webster.com/dictionary/modal">merriam-webster.com</a> </Modal>
loading editor...
Console
loading Svelte compiler...
loading editor...
Compiler options
result = svelte.compile(source, {
generate:
css:
});loading editor...