Please see the documentation for Phoenix.Component.async_result/1

Attributes

• assign (Phoenix.LiveView.AsyncResult) (required)

Slots

• loading - rendered while the assign is loading for the first time.
• failed - rendered when an error or exit is caught or assign_async returns {:error, reason} for the first time. Receives the error as a :let.
• inner_block - rendered when the assign is loaded successfully via AsyncResult.ok/2. Receives the result as a :let.

Generates a link to a given route.

Unlike LiveView's own link component, only href and navigate are supported. patch cannot be expressed with NavigationLink. Use push_patch within handle_event to patch the URL.

href will generate a <Link> view which will delegate to the user's default web browser.

navigate will generate a <NavigationLink> view which will be handled by the client as a navigation request back to the LiveView server.

Attributes

• navigate (:string) - Navigates from a LiveView to a new LiveView. The browser page is kept, but a new LiveView process is mounted and its content on the page is reloaded. It is only possible to navigate between LiveViews declared under the same router Phoenix.LiveView.Router.live_session/3. Otherwise, a full browser redirect is used.

• patch (:string) - Patches the current LiveView. The handle_params callback of the current LiveView will be invoked and the minimum content will be sent over the wire, as any other LiveView diff.

• href (:any) - Uses traditional browser navigation to the new location. This means the whole page is reloaded on the browser.

• replace (:boolean) - When using :patch or :navigate, should the browser's history be replaced with pushState?

  Defaults to false.

• Global attributes are accepted. Additional attributes added to the <NavigationLink> tag. Supports all globals plus: ["type"].

Slots

• inner_block (required) - The content rendered inside of the <NavigationLink> tag.

Examples

<.link href="/">Regular anchor link</.link>copy

<.link navigate={~p"/"} class="underline">home</.link>copy

<.link navigate={~p"/?sort=asc"} replace={false}>
  Sort By Price
</.link>copy

<.link href={URI.parse("https://elixir-lang.org")}>hello</.link>copy

Builds a file input tag for a LiveView upload.

Attributes

• upload (Phoenix.LiveView.UploadConfig) (required) - The Phoenix.LiveView.UploadConfig struct.
• accept (:string) - the optional override for the accept attribute. Defaults to :accept specified by allow_upload.
• Global attributes are accepted. Supports all globals plus: ["webkitdirectory", "required", "disabled", "capture", "form"].

Drag and Drop

Drag and drop is supported by annotating the droppable container with a phx-drop-target attribute pointing to the UploadConfig ref, so the following markup is all that is required for drag and drop support:

<div class="container" phx-drop-target={@uploads.avatar.ref}>
  <!-- ... -->
  <.live_file_input upload={@uploads.avatar} />
</div>copy

Examples

Rendering a file input:

<.live_file_input upload={@uploads.avatar} />copy

Rendering a file input with a label:

<label for={@uploads.avatar.ref}>Avatar</label>
<.live_file_input upload={@uploads.avatar} />copy

Generates an image preview on the client for a selected file.

Attributes

• entry (Phoenix.LiveView.UploadEntry) (required) - The Phoenix.LiveView.UploadEntry struct.
• id (:string) - the id of the img tag. Derived by default from the entry ref, but can be overridden as needed if you need to render a preview of the same entry multiple times on the same page. Defaults to nil.
• Global attributes are accepted.

Examples

<%= for entry <- @uploads.avatar.entries do %>
  <.live_img_preview entry={entry} width="75" />
<% end %>copy

When you need to use it multiple times, make sure that they have distinct ids

<%= for entry <- @uploads.avatar.entries do %>
  <.live_img_preview entry={entry} width="75" />
<% end %>

<%= for entry <- @uploads.avatar.entries do %>
  <.live_img_preview id={"modal-#{entry.ref}"} entry={entry} width="500" />
<% end %>copy