الصورة الرمزية · واجهة برمجية

تعيين عنوان الصورة أو حالة التحميل من LiveView أو العميل.

تعيين المصدر (ربط العميل)

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

تعيين المصدر (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
  })
)

تعيين المصدر (الخادم)

    <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

التركيز (ربط العميل)

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

التركيز (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
  })
)

تم التحميل (الخادم)

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