View Source Phoenix.WebComponent.Link (Phoenix.WebComponent v1.6.3)

Conveniences for working with links and URLs in HTML.

Link to this section Summary

Functions

Generates a button tag that uses the Javascript function handleClick() (see phoenix_html.js) to submit the form data.

Generates a link to the given URL.

Generates a link that will patch the current LiveView. When navigating to the current LiveView, Phoenix.LiveView.handle_params/3 is immediately invoked to handle the change of params and URL state. Then the new state is pushed to the client, without reloading the whole page while also maintaining the current scroll position. For live redirects to another LiveView, use wc_live_redirect/2.

Generates a link that will redirect to a new LiveView of the same live session. The current LiveView will be shut down and a new one will be mounted in its place, without reloading the whole page. This can also be used to remount the same LiveView, in case you want to start fresh. If you want to navigate to the same LiveView without remounting it, use wc_live_patch/2 instead. Note: The live redirects are only supported between two LiveViews defined under the same live session. See Phoenix.LiveView.Router.live_session/3 for more details.

Link to this section Functions

Generates a button tag that uses the Javascript function handleClick() (see phoenix_html.js) to submit the form data.

Useful to ensure that links that change data are not triggered by search engines and other spidering software.

examples

Examples

button("hello", to: "/world")
#=> <button class="button" data-csrf="csrf_token" data-method="post" data-to="/world">hello</button>

button("hello", to: "/world", method: :get, class: "btn")
#=> <button class="btn" data-method="get" data-to="/world">hello</button>

options

Options

  • :to - the page to link to. This option is required

  • :method - the method to use with the button. Defaults to :post.

All other options are forwarded to the underlying button input.

When the :method is set to :get and the :to URL contains query parameters the generated form element will strip the parameters in accordance with the W3C form specification.

data-attributes

Data attributes

Data attributes are added as a keyword list passed to the data key. The following data attributes are supported:

  • data-confirm - shows a confirmation prompt before generating and submitting the form.

Generates a link to the given URL.

examples

Examples

wc_link("hello", to: "/world")
#=> <a href="/world"><bx-btn>hello</bx-btn></a>

wc_link("hello", to: URI.parse("https://elixir-lang.org"))
#=> <a href="https://elixir-lang.org"><bx-btn>hello</bx-btn></a>

wc_link("<hello>", to: "/world")
#=> <a href="/world"><bx-btn>&lt;hello&gt;</bx-btn></a>

wc_link("<hello>", to: "/world", class: "btn")
#=> <a class="btn" href="/world"><bx-btn>&lt;hello&gt;</bx-btn></a>

wc_link("delete", to: "/the_world", data: [confirm: "Really?"])
#=> <a data-confirm="Really?" href="/the_world"><bx-btn>delete</bx-btn></a>

# If you supply a method other than `:get`:
wc_link("delete", to: "/everything", method: :delete)
#=> <a href="/everything" data-csrf="csrf_token" data-method="delete" data-to="/everything"><bx-btn>delete</bx-btn></a>

# You can use a `do ... end` block too:
link to: "/hello" do
  "world"
end
#=> <a href="/hello"><bx-btn>world</bx-btn><a>

options

Options

  • :to - the page to link to. This option is required

  • :method - the method to use with the link. 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

  • :csrf_token - a custom token to use for links with a method other than :get.

All other options are forwarded to the underlying <a> tag.

data-attributes

Data attributes

Data attributes are added as a keyword list passed to the data key. The following data attributes are supported:

  • data-confirm - shows a confirmation prompt before generating and submitting the form when :method is not :get.

csrf-protection

CSRF Protection

By default, CSRF tokens are generated through Plug.CSRFProtection.

Link to this function

wc_live_patch(text, opts)

View Source

Generates a link that will patch the current LiveView. When navigating to the current LiveView, Phoenix.LiveView.handle_params/3 is immediately invoked to handle the change of params and URL state. Then the new state is pushed to the client, without reloading the whole page while also maintaining the current scroll position. For live redirects to another LiveView, use wc_live_redirect/2.

options

Options

  • :to - the required path to link to.
  • :replace - the flag to replace the current history or push a new state. Defaults false. All other options are forwarded to the anchor tag.

examples

Examples

<%= wc_live_patch "home", to: Routes.page_path(@socket, :index) %>
<%= wc_live_patch "next", to: Routes.live_path(@socket, MyLive, @page + 1) %>
<%= wc_live_patch to: Routes.live_path(@socket, MyLive, dir: :asc), replace: false do %>
  Sort By Price
<% end %>
Link to this function

wc_live_redirect(text, opts)

View Source

Generates a link that will redirect to a new LiveView of the same live session. The current LiveView will be shut down and a new one will be mounted in its place, without reloading the whole page. This can also be used to remount the same LiveView, in case you want to start fresh. If you want to navigate to the same LiveView without remounting it, use wc_live_patch/2 instead. Note: The live redirects are only supported between two LiveViews defined under the same live session. See Phoenix.LiveView.Router.live_session/3 for more details.

options

Options

  • :to - the required path to link to.
  • :replace - the flag to replace the current history or push a new state. Defaults false. All other options are forwarded to the anchor tag.

examples

Examples

<%= wc_live_redirect "home", to: Routes.page_path(@socket, :index) %>
<%= wc_live_redirect "next", to: Routes.live_path(@socket, MyLive, @page + 1) %>
<%= wc_live_redirect to: Routes.live_path(@socket, MyLive, dir: :asc), replace: false do %>
  Sort By Price
<% end %>