View Source Phoenix.WebComponent (Phoenix.WebComponent v1.6.2)
Provides a suit of html custom component for phoenix.
This library provides three main functionalities:
- Enhance form helper with manterial web componet
- Enhance link helper with manterial web componet
- Markdown render helper with
@gsmlg/lit/remark-element
- TopAppBar render top app bar with custom element.
form-helper
Form helper
See Phoenix.WebComponent.FormHelper
.
javascript-library
JavaScript library
This project provides javascript that define custom elements.
To use the web component, you must load priv/static/phoenix_webcomponent.js
into your build tool. Or through npm by install phoenix_webcomponent
.
The difference is npm version is not bundled.
Link to this section Summary
Functions
Returns a list of attributes that make an element behave like a link. For example, to make a button work like a link
Link to this section Functions
Returns a list of attributes that make an element behave like a link. For example, to make a button work like a link:
<button {link_attributes("/home")}>
Go back to home
</button>
However, this function is more often used to create buttons that must invoke an action on the server, such as deleting an entity, using the relevant HTTP protocol:
<button data-confirm="Are you sure?" {link_attributes("/product/1", method: :delete}>
Delete product
</button>
The to
argument may be a string, a URI, or a tuple {scheme, value}
.
See the examples below.
Note: using this function requires loading the JavaScript library
at priv/static/phoenix_html.js
. See the Phoenix.HTML
module
documentation for more information.
options
Options
:method
- the HTTP method for the link. Defaults to:get
.:csrf_token
- a custom token to use when method is not:get
. This is used to ensure the request was sent by the user who rendered the page. By default, CSRF tokens are generated throughPlug.CSRFProtection
. You can set this option tofalse
, to disable token generation, or set it to your own token.
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
The following data attributes can also be manually set in the element:
data-confirm
- shows a confirmation prompt before generating and submitting the form.
examples
Examples
iex> link_attributes("/world")
[data: [method: :get, to: "/world"]]
iex> link_attributes(URI.parse("https://elixir-lang.org"))
[data: [method: :get, to: "https://elixir-lang.org"]]
iex> link_attributes("/product/1", method: :delete)
[data: [csrf: Plug.CSRFProtection.get_csrf_token(), method: :delete, to: "/product/1"]]
if-the-url-is-absolute-only-certain-schemas-are-allowed-to-avoid-javascript-injection
If the URL is absolute, only certain schemas are allowed to avoid JavaScript injection.
For example, the following will fail
iex> link_attributes("javascript:alert('hacked!')")
** (ArgumentError) unsupported scheme given as link. In case you want to link to an
unknown or unsafe scheme, such as javascript, use a tuple: {:javascript, rest}
You can however explicitly render those unsafe schemes by using a tuple:
iex> link_attributes({:javascript, "alert('my alert!')"})
[data: [method: :get, to: ["javascript", 58, "alert('my alert!')"]]]