WalletPasses.Preview.Components (wallet_passes v0.13.0)

Copy Markdown View Source

LiveView function components for previewing wallet passes.

Optional — requires phoenix_live_view dependency.

Usage

import WalletPasses.Preview.Components

<.apple_pass_preview pass_json={@apple_json} barcode_svg={@barcode_svg} barcode_format={@barcode_format}>
  <:logo><img src="/images/logo.svg" class="h-7 w-auto" alt="" /></:logo>
  <:strip><img src="/images/strip.png" class="w-full h-auto" alt="" /></:strip>
  <:thumbnail><img src="/images/role.png" class="h-10 w-10" alt="" /></:thumbnail>
</.apple_pass_preview>

<%!-- Google auto-renders logo/hero/role images from the pass object; slots override them --%>
<.google_pass_preview pass_object={@google_obj} barcode_svg={@barcode_svg} barcode_format={@barcode_format} />

Summary

Functions

apple_pass_preview(assigns)

Attributes

  • pass_json (:map) (required)
  • barcode_svg (:string) (required)
  • barcode_format (:atom) - Defaults to :qr.

Slots

  • logo - Optional logo image rendered beside logoText in the header.
  • strip - Optional full-width strip image between header and primary field.
  • thumbnail - Optional image rendered beside the primary field value.
  • footer - Optional footer banner image rendered above the barcode (boarding passes).

google_pass_preview(assigns)

Attributes

  • pass_object (:map) (required)
  • barcode_svg (:string) (required)
  • barcode_format (:atom) - Defaults to :qr.

Slots

  • logo - Overrides the logo auto-rendered from the pass object.
  • hero - Overrides the hero image auto-rendered from the pass object.
  • thumbnail - Overrides the role/thumbnail image auto-rendered from the pass object.