Phoenix.HTML.Link

Phoenix.HTML.Link

Conveniences for working with links and URLs in HTML.

Summary

Functions

button(opts, opts)

Generates a button that uses a regular HTML form to submit to the given URL

link(text, opts)

Generates a link to the given URL

Functions

button(opts, opts)

Generates a button that uses a regular HTML form to submit to the given URL.

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

Examples

button("hello", to: "/world")
#=> <form action="/world" class="button" method="post">
      <input name="_csrf_token" value="">
      <button type="submit">hello</button>
    </form>

button("hello", to: "/world", method: "get", class: "btn")
#=> <form action="/world" class="btn" method="get">
      <button type="submit">hello</button>
    </form>

Options

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

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

• :form - the options for the form. Defaults to [class: "button", enforce_utf8: false]

All other options are forwarded to the underlying button input.

link(text, opts)

Generates a link to the given URL.

Examples

link("hello", to: "/world")
#=> <a href="/doc_world">hello</world">hello<-a>

link(.html?lang=en"<hello>", to: "/world")
#=> <a href="/doc_world">&lt;hello&gt;</world">&lt;hello&gt;<-a>

link(.html?lang=en"<hello>", to: "/world", class: "btn")
#=> <a class="btn" href="/doc_world">&lt;hello&gt;</world">&lt;hello&gt;<-a>

link(.html?lang=en"delete", to: "/the_world", data: [confirm: "Really?"])
#=> <a data-confirm="Really?" href="/doc_/-the_world.html?lang=en">delete</a>

# You can use a `do ... end` block too:
link to: "/hello" do
  "world"
end

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

• :form - customize the underlying form when the method is not :get

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

Data attributes

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

• data-submit="parent" - automatically used when the :method is not :get, this module attribute says the underlying link should submit the parent form on click

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

JavaScript dependency

In order to support the data attributes above, Phoenix.HTML relies on JavaScript. You can either load the ES5 version from priv/static/phoenix_html.js or depend on the one at web/static/js/phoenix_html.js written in ES6 directly from your build tool.