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.

• method (:string) - The HTTP method to use with the link. This is intended for usage outside of LiveView and therefore only works with the href={...} attribute. It has no effect on patch and navigate instructions.

  In case the method is not get, the link is generated inside the form which sets the proper information. In order to submit the form, JavaScript must be enabled in the browser.

  Defaults to "get".

• csrf_token (:any) - A boolean or custom token to use for links with an HTTP method other than get. Defaults to true.

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

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

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

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

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>

Examples

Rendering a file input:

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

Rendering a file input with a label:

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

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

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