API Reference LiveSvelte v0.1.0-rc0
modules
Modules
examples
Examples
liveview
LiveView
defmodule App.SvelteLive do
use App, :live_view
def render(assigns) do
~H"""
<.live_component
module={LiveSvelte}
id="Example"
name="Example"
props={%{items: @items, i: @i, showItems: @show_items}}
/>
"""
end
def handle_event("add_item", %{"name" => name}, socket) do
socket =
socket
|> assign(:items, socket.assigns.items ++ [name])
|> assign(:i, length(socket.assigns.items) + 1)
|> assign(:show_items, true)
{:noreply, socket}
end
def mount(_params, _session, socket) do
{:ok,
socket
|> assign(:items, ["One", "Two", "Three", "Four", "Five"])
|> assign(:i, 3)
|> assign(:show_items, true)}
end
end
svelte-component
Svelte Component
<script>
import {slide, fly} from 'svelte/transition'
export let pushEvent
export let i = 5
export let items = []
export let showItems = true
let newItemName
function addItem() {
pushEvent('add_item', {name: newItemName})
newItemName = ''
}
</script>
<div class="flex flex-col">
<label>
<input type="checkbox" bind:checked={showItems}>
show list
</label>
<label>
<input type="range" bind:value={i} max={items.length}>
</label>
<div class="mb-2">
<input type="test" bind:value={newItemName} class="border rounded px-2 py-1"/>
<button on:click={addItem} class="bg-black rounded text-white px-2 py-1">Add item</button>
</div>
</div>
{#if showItems}
<div transition:fly={{x: -20}}>
{#each items.slice(0, i) as item}
<div transition:slide|local class="py-2 border-t border-[#eee]">
{item}
</div>
{/each}
</div>
{/if}