Components
Watermark
The paper bears its seal beneath the content: a canvas draws the text once into a tile (rotated, faint, crisp at the screen's pixel density) and the marks layer repeats it over the default slot. The seal redraws itself when a prop turns — and it never takes a pointer.
#Basic usage
The registry holds each entry twice: once in the ledger, once in the seal that marks it as the house's own. The mark beneath the words is quiet by design — it claims the page without taking the reader's attention.
Copies leave the building with the same seal, faint but present, so the paper can always be asked where it was made.
<script setup lang="ts">
import { Watermark } from "@bysages/vue";
</script>
<template>
<!-- The seal redraws itself from the theme's computed styles; it
never takes a pointer. -->
<Watermark content="BY SAGES · 内部资料" class="w-full">
<div class="grid gap-3 p-(--bs-padding-lg) text-sm leading-relaxed text-secondary">
<p>
The registry holds each entry twice: once in the ledger, once in the seal that marks it as
the house's own. The mark beneath the words is quiet by design — it claims the page without
taking the reader's attention.
</p>
<p>
Copies leave the building with the same seal, faint but present, so the paper can always be
asked where it was made.
</p>
</div>
</Watermark>
</template>
The registry holds each entry twice: once in the ledger, once in the seal that marks it as the house's own. The mark beneath the words is quiet by design — it claims the page without taking the reader's attention.
Copies leave the building with the same seal, faint but present, so the paper can always be asked where it was made.
<script setup lang="ts">
import { Watermark } from "@bysages/vue";
</script>
<template>
<!-- The seal answers the caller's hand: a heavier ink, a steeper
angle, a larger measure. -->
<Watermark
content="DRAFT · 草稿"
:opacity="0.12"
:rotate="-45"
font-size="1.125rem"
class="w-full"
>
<div class="grid gap-3 p-(--bs-padding-lg) text-sm leading-relaxed text-secondary">
<p>
The registry holds each entry twice: once in the ledger, once in the seal that marks it as
the house's own. The mark beneath the words is quiet by design — it claims the page without
taking the reader's attention.
</p>
<p>
Copies leave the building with the same seal, faint but present, so the paper can always be
asked where it was made.
</p>
</div>
</Watermark>
</template>
#Props
#Watermark
The paper bears its seal beneath the content: a canvas draws the text once into a tile (rotated, faint, crisp at the screen's pixel density) and the marks layer repeats it over the default slot. The seal redraws itself when a prop turns — and it never takes a pointer.
| Prop | Type | Default | Description |
|---|---|---|---|
content | String | — | |
opacity | Number | 0.06 | — |
rotate | Number | -20 | — |
fontSize | String | "0.875rem" | — |