واجهة برمجية

    <.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>

  

    <.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
  })
)

  

    <div class="flex flex-wrap gap-space-sm mb-space-lg">
  <.action phx-click="api_set_src_server" phx-value-url="https://corex-ui.com/images/avatar.png" class="button ui-size-sm">
    Set primary
  </.action>
  <.action phx-click="api_set_src_server" phx-value-url="https://corex-ui.com/pwa-192x192.png" class="button ui-size-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