PhiaUi.Components.QrCode (phia_ui v0.1.17)

Copy Markdown View Source

QrCode component — server-side SVG QR code generation.

Generates QR codes entirely on the server using the eqrcode hex package. Renders as an inline SVG — no JavaScript, no CDN, no image requests.

Examples

<%!-- Basic QR code --%>
<.qr_code value="https://phiaui.dev" />

<%!-- With custom size --%>
<.qr_code value="https://phiaui.dev" size={300} />

<%!-- With custom colors --%>
<.qr_code value="https://phiaui.dev" color="#1e3a5f" background="#f0f9ff" />

<%!-- With caption --%>
<.qr_code value="https://phiaui.dev" caption="Scan to visit PhiaUI" />

<%!-- High error correction for logo overlays --%>
<.qr_code value="https://phiaui.dev" error_correction_level={:high} />

Summary

Functions

qr_code(assigns)

Renders an inline SVG QR code generated server-side.

Functions

qr_code(assigns)

Renders an inline SVG QR code generated server-side.

Uses the eqrcode hex package under the hood. The SVG is emitted as raw HTML — no JavaScript or external requests required.

Examples

<.qr_code value="https://phiaui.dev" size={256} />

<.qr_code
  value={@profile_url}
  caption="Scan to view profile"
  error_correction_level={:high}
/>

Attributes

  • value (:string) (required) - Content to encode into the QR code.
  • size (:integer) - Width and height of the SVG in pixels (default: 200). Defaults to 200.
  • color (:string) - Fill color for dark QR modules (default: black). Defaults to "#000000".
  • background (:string) - Background fill color (default: white). Defaults to "#ffffff".
  • error_correction_level (:atom) - Error correction level: :low, :medium, :quartile, :high. Defaults to :medium. Must be one of :low, :medium, :quartile, or :high.
  • aria_label (:string) - Accessible label for the QR code. Defaults to "QR code for <value>". Defaults to nil.
  • caption (:string) - Optional caption rendered below the QR code. Defaults to nil.
  • class (:string) - Additional CSS classes on the wrapper element. Defaults to nil.
  • Global attributes are accepted. HTML attributes forwarded to the wrapper element.