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
<script> let current = 'foo'; </script> <button class:active="{current === 'foo'}" on:click="{() => current = 'foo'}" >foo</button> <button class:active="{current === 'bar'}" on:click="{() => current = 'bar'}" >bar</button> <button class:active="{current === 'baz'}" on:click="{() => current = 'baz'}" >baz</button> <style> button { display: block; } .active { background-color: #ff3e00; color: white; } </style>
loading editor...
Console
loading Svelte compiler...
loading editor...
Compiler options
result = svelte.compile(source, {
generate:
});loading editor...