Watermark

Superposez des filigranes de texte ou d’image répétitifs pour protéger le contenu tout en le gardant interactif.

Importation

import { Watermark } from 'asterui'

Exemples

Filigrane de texte

Appliquez un filigrane de texte répétitif à une carte.

</>

Product Brief

Provide enough spacing and padding on parent containers so the watermark tiles stay visible. The overlay is pointer-events-none, so links and inputs remain usable.

import { Watermark, Card, Typography } from 'asterui'

function App() {
  const { Paragraph } = Typography
  
  return (
      <Watermark
        content="Confidential"
        gap={[140, 120]}
        font={{ fontWeight: 700, color: 'hsl(var(--bc) / 0.28)' }}
      >
        <Card title="Product Brief" className="bg-base-200 min-h-[420px] flex items-center">
          <Paragraph className="text-base-content/80">
            Provide enough spacing and padding on parent containers so the watermark tiles stay visible. The overlay is pointer-events-none, so links and inputs remain usable.
          </Paragraph>
        </Card>
      </Watermark>
    )
}

export default App

Lignes multiples

Empilez plusieurs lignes avec police, espacement et rotation personnalisés.

</>

Release Checklist

• Validate components in docs and examples
• Update changelog and version
• Record accessibility notes

import { Watermark, Typography } from 'asterui'

function App() {
  const { Title } = Typography
  
  return (
      <Watermark
        content={["AsterUI", "Internal"]}
        gap={[120, 100]}
        rotate={-30}
        offset={[48, 48]}
        font={{ fontSize: 18, fontWeight: 700, color: 'hsl(var(--bc) / 0.26)' }}
      >
        <div className="bg-base-200 border border-base-300 rounded-box p-6 min-h-[400px] flex flex-col gap-2">
          <Title level={4} className="m-0">Release Checklist</Title>
          <ul className="list-disc list-inside text-sm text-base-content/80 space-y-1">
            <li>Validate components in docs and examples</li>
            <li>Update changelog and version</li>
            <li>Record accessibility notes</li>
          </ul>
        </div>
      </Watermark>
    )
}

export default App

Filigrane d'image

Utilisez un URI de données ou une image hébergée pour filigraner le contenu.

</>

Image Watermark

Supply a data URI or hosted image. Images are drawn to canvas with rotation and gap applied.

import { Watermark, Typography } from 'asterui'

function App() {
  const { Title, Text } = Typography
  
  const logoSvg = 'data:image/svg+xml;utf8,' +
    encodeURIComponent(`
  <svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 200 200">
    <defs>
      <linearGradient id="g" x1="0" y1="0" x2="1" y2="1">
        <stop offset="0%" stop-color="#3b82f6" stop-opacity="0.18" />
        <stop offset="100%" stop-color="#8b5cf6" stop-opacity="0.18" />
      </linearGradient>
    </defs>
    <circle cx="100" cy="100" r="88" fill="url(#g)" />
    <text x="100" y="115" text-anchor="middle" font-size="48" font-family="sans-serif" fill="#0f172a" fill-opacity="0.35" font-weight="700">AU</text>
  </svg>`)
  
  return (
      <Watermark image={logoSvg} width={160} height={160} gap={[120, 120]} rotate={-25}>
        <div className="bg-base-200 border border-base-300 rounded-box p-6 min-h-[420px]">
          <Title level={4} className="m-0">Image Watermark</Title>
          <Text className="text-sm text-base-content/80 block">
            Supply a data URI or hosted image. Images are drawn to canvas with rotation and gap applied.
          </Text>
        </div>
      </Watermark>
    )
}

export default App

API

Watermark

Propriété	Description	Type	Défaut
content	Texte du filigrane (chaîne ou lignes)	string | string[]	-
image	URL d’image ou URI de données à rendre au lieu du texte	string	-
gap	Espacement horizontal et vertical entre les tuiles	[number, number]	[120, 120]
offset	Décalage de départ pour la première tuile	[number, number]	gap / 2
width	Largeur de la tuile en pixels	number	120
height	Hauteur de la tuile en pixels	number	64
rotate	Angle de rotation en degrés	number	-22
zIndex	z-index pour la superposition	number	1000
font	Paramètres de police pour les filigranes de texte	WatermarkFontOptions	-
className	Classes CSS supplémentaires	string	-
style	Styles personnalisés pour le wrapper	React.CSSProperties	-
data-testid	ID de test pour les tests	string	-

Accessibilité

• La superposition de filigrane utilise pointer-events: none pour garantir que le contenu reste interactif
• Le filigrane est purement décoratif et n’interfère pas avec les technologies d’assistance
• Tous les éléments interactifs sous le filigrane restent entièrement accessibles aux utilisateurs de clavier et de lecteur d’écran
• Le rendu semi-transparent garantit que le contenu sous-jacent reste visible et lisible