surface v0.1.0-alpha.2 Surface.LiveComponent behaviour View Source
A live (stateless or stateful) component. A wrapper around Phoenix.LiveComponent
.
Example
defmodule Dialog do
use Surface.LiveComponent
property title, :string, required: true
def mount(socket) do
{:ok, assign(socket, show: false)}
end
def render(assigns) do
~H"""
<div class={{ "modal", "is-active": @show }}>
<div class="modal-background"></div>
<div class="modal-card">
<header class="modal-card-head">
<p class="modal-card-title">{{ @title }}</p>
</header>
<section class="modal-card-body">
<slot/>
</section>
<footer class="modal-card-foot" style="justify-content: flex-end">
<Button click="hide">Ok</Button>
</footer>
</div>
</div>
"""
end
# Public API
def show(dialog_id) do
send_update(__MODULE__, id: dialog_id, show: true)
end
# Event handlers
def handle_event("show", _, socket) do
{:noreply, assign(socket, show: true)}
end
def handle_event("hide", _, socket) do
{:noreply, assign(socket, show: false)}
end
end
Link to this section Summary
Callbacks
This optional callback is invoked in order to set up a context that can be retrieved for any descendent component.
Link to this section Callbacks
Specs
This optional callback is invoked in order to set up a context that can be retrieved for any descendent component.