Avatar · API
Set the image URL or query load state from LiveView or the client.
Set Src (Client Binding)
?
<.action phx-click={Corex.Avatar.set_src("api-set-src-client", "https://corex-ui.com/images/avatar.png")}>
Set primary
</.action>
<.action phx-click={Corex.Avatar.set_src("api-set-src-client", "https://corex-ui.com/pwa-192x192.png")}>
Set alternate
</.action>
<.avatar id="api-set-src-client" class="avatar" src="https://corex-ui.com/images/avatar.png" alt="API demo">
<:fallback>?</:fallback>
</.avatar>
Set Src (Client JS)
JS
<.action
phx-click={
JS.dispatch("corex:avatar:set-src",
to: "#api-set-src-client-js",
detail: %{src: "https://corex-ui.com/images/avatar.png"},
bubbles: false
)
}
>
Set primary
</.action>
<.action
phx-click={
JS.dispatch("corex:avatar:set-src",
to: "#api-set-src-client-js",
detail: %{src: "https://corex-ui.com/pwa-192x192.png"},
bubbles: false
)
}
>
Set alternate
</.action>
<.avatar id="api-set-src-client-js" class="avatar" src="" alt="">
<:fallback>JS</:fallback>
</.avatar>
const el = document.getElementById("api-set-src-client-js")
el?.dispatchEvent(
new CustomEvent("corex:avatar:set-src", {
detail: { src: "https://corex-ui.com/images/avatar.png" },
bubbles: false
})
)
el?.dispatchEvent(
new CustomEvent("corex:avatar:set-src", {
detail: { src: "https://corex-ui.com/pwa-192x192.png" },
bubbles: false
})
)
const el: HTMLElement | null = document.getElementById("api-set-src-client-js")
el?.dispatchEvent(
new CustomEvent<{ src: string }>("corex:avatar:set-src", {
detail: { src: "https://corex-ui.com/images/avatar.png" },
bubbles: false
})
)
el?.dispatchEvent(
new CustomEvent<{ src: string }>("corex:avatar:set-src", {
detail: { src: "https://corex-ui.com/pwa-192x192.png" },
bubbles: false
})
)
Set Src (Server)
?
<div class="flex flex-wrap gap-2 mb-4">
<.action phx-click="api_set_src_server" phx-value-url="https://corex-ui.com/images/avatar.png" class="button button--sm">
Set primary
</.action>
<.action phx-click="api_set_src_server" phx-value-url="https://corex-ui.com/pwa-192x192.png" class="button button--sm">
Set alternate
</.action>
</div>
<.avatar id="api-set-src-server" class="avatar" src="https://corex-ui.com/images/avatar.png" alt="API demo">
<:fallback>?</:fallback>
</.avatar>
def handle_event("api_set_src_server", %{"url" => url}, socket) do
{:noreply, Corex.Avatar.set_src(socket, "api-set-src-server", url)}
end
Loaded (Client Binding)
?
<.action phx-click={Corex.Avatar.loaded("api-loaded-bind", respond_to: :both)} class="button button--sm">
Status
</.action>
<.avatar id="api-loaded-bind" class="avatar" src="https://corex-ui.com/images/avatar.png" alt="">
<:fallback>?</:fallback>
</.avatar>
Loaded (Client JS)
?
<.action
phx-click={
JS.dispatch("corex:avatar:loaded",
to: "#api-loaded-js",
detail: %{respond_to: "both"},
bubbles: false
)
}
class="button button--sm"
>
Status
</.action>
<.avatar id="api-loaded-js" class="avatar" src="https://corex-ui.com/images/avatar.png" alt="">
<:fallback>?</:fallback>
</.avatar>
const el = document.getElementById("api-loaded-js")
el?.dispatchEvent(
new CustomEvent("corex:avatar:loaded", {
detail: { respond_to: "both" },
bubbles: false
})
)
const el: HTMLElement | null = document.getElementById("api-loaded-js")
el?.dispatchEvent(
new CustomEvent<{ respond_to: string }>("corex:avatar:loaded", {
detail: { respond_to: "both" },
bubbles: false
})
)
Loaded (Server)
?
<.action phx-click="api_loaded_server" class="button button--sm">Status</.action>
<.avatar id="api-loaded-server" class="avatar" src="https://corex-ui.com/images/avatar.png" alt="">
<:fallback>?</:fallback>
</.avatar>
def handle_event("api_loaded_server", _params, socket) do
{:noreply, Corex.Avatar.loaded(socket, "api-loaded-server", respond_to: :server)}
end
def handle_event("avatar_loaded_response", %{"id" => id, "loaded" => loaded}, socket) do
desc = "#{id}\n#{inspect(loaded)}"
{:noreply,
Corex.Toast.create(socket, "layout-toast", "avatar_loaded_response", desc, :info, duration: 5000)}
end