@kit-ng-ui/watermark

Overlay arbitrary content with a tiled, rotated text pattern. Mirrors ant-design's <Watermark> (text variant).

Install

pnpm add @kit-ng-ui/watermark

@use '@kit-ng-ui/watermark/styles';

Example

<kit-watermark content="Confidential">
  <article style="height: 320px;">Sensitive document body.</article>
</kit-watermark>

API

| Input | Type | Default | Description | | --------- | ------------------------------- | ------------------------ | -------------------------------------------- | | content | string \| readonly string[] | '' | Watermark text (multi-line via array). | | rotate | number | -22 | Rotation in degrees. | | zIndex | number | 9 | Stacking order over content. | | width | number | 120 | Tile cell width (px). | | height | number | 64 | Tile cell height (px). | | gap | { x: number; y: number } | { x: 100, y: 100 } | Spacing between tiles. | | font | KitWatermarkFont | see source | Color / size / weight / family / style. |

Notes

• The watermark is purely visual: the overlay layer has pointer-events: none, so it does not capture clicks.
• Image watermarks are a planned addition — see TODO(parity) in the source.
• The tile is re-rendered to a <canvas> whenever any of content, rotate, gap, font, width or height change. Pass gap and font as stable references (e.g. a readonly field) — inline object literals re-render the tile on every change-detection pass.