PhiaUi.Components.Watermark (phia_ui v0.1.17)

Copy Markdown View Source

Watermark — repeating text overlay using an inline SVG <pattern>.

Inspired by Ant Design Watermark. Uses no JavaScript and no external URIs. Each instance generates a unique pattern ID via :crypto to avoid <pattern> ID collisions when multiple watermarks appear on the same page.

Examples

<.watermark content="CONFIDENTIAL">
  <img src="/report.png" class="w-full" />
</.watermark>

<.watermark content="Draft" opacity="0.08" rotate={-45} font_size="20px">
  <div class="p-8">Document content here</div>
</.watermark>

Summary

Functions

watermark(assigns)

Functions

watermark(assigns)

Attributes

  • content (:string) (required) - Watermark text to repeat across the area.
  • gap (:integer) - Spacing between watermark tiles (px). Defaults to 100.
  • rotate (:integer) - Rotation angle in degrees. Defaults to -30.
  • opacity (:string) - CSS opacity value (0.0–1.0). Defaults to "0.12".
  • font_size (:string) - CSS font size of the watermark text. Defaults to "16px".
  • class (:string) - Additional CSS classes for the root element. Defaults to nil.
  • Global attributes are accepted. HTML attributes forwarded to the root <div>.

Slots

  • inner_block (required) - Content to be watermarked.