View Source PhoenixAssetPipeline.Helpers (phoenix_asset_pipeline v1.0.15)

Provides asset pipeline macros.

Summary

Functions

Returns class list with obfuscated class names.

Alias for PhoenixAssetPipeline.Obfuscator.obfuscate_class/2.

Renders a script tag.

Renders a inline style tag.

Renders a inline style tag with tailwind css.

Functions

class(class)

(macro)

Returns class list with obfuscated class names.

Examples

<.div {class("text-center")}>
  <.h1 {class(["text-2xl", "font-bold"])}>
    Hello, Phoenix!
  </.h1>
</.div>

Output

<div class="t">
  <h1 class="t1 f">
    Hello, Phoenix!
  </h1>
</div>

obfuscate(class)

Alias for PhoenixAssetPipeline.Obfuscator.obfuscate_class/2.

Read more https://hexdocs.pm/phoenix_asset_pipeline/PhoenixAssetPipeline.Obfuscator.html#obfuscate_class/2

script(path, html_opts \\ [])

(macro)

Renders a script tag.

Uses Phoenix.Endpoint.static_url/0 Read more https://hexdocs.pm/phoenix/Phoenix.Endpoint.html

Args

path: ("app" || "app.js") || "app.ts"
html_opts: list of html options

Configuration

config :my_app, MyAppWeb.Endpoint, static_url: [host: host, port: 443, scheme: "https"]

Examples

<%= script("app") %>
<%= script("app", async: true, crossorigin: "anonymous") %>

Output

If url/0 is equal to static_url/0, the root path will be used.

<script async="async" crossorigin="anonymous" integrity="sha512-<integrity>" phx-track-static="phx-track-static" src="/<path>-<digest>.js">
</script>

Otherwise, the full url will be used

<script async="async" crossorigin="anonymous" integrity="sha512-<integrity>" phx-track-static="phx-track-static" src="<static_url>/<path>-<digest>.js">
</script>

style(path, html_opts \\ [])

(macro)

Renders a inline style tag.

Args

path: ("app" || "app.css") || "app.sass" || "app.scss"
html_opts: list of html options

Examples

<%= style("app") %>

Output

<style integrity="sha512-<integrity>">
  /* app.css styles */
</style>

tailwind(path, html_opts \\ [])

(macro)

Renders a inline style tag with tailwind css.

Requires tailwind.config.js file in the assets directory.

Args

path: ("app" || "app.css") || "app.sass" || "app.scss"
html_opts: list of html options

Examples

<%= style("app") %>

Output

<style integrity="sha512-<integrity>">
  /* tailwind css styles */
  /* app.css styles */
</style>