Watermark

Superpone marcas de agua de texto o imagen repetidas para proteger el contenido manteniéndolo interactivo.

Importación

import { Watermark } from 'asterui'

Ejemplos

Marca de Agua de Texto

Aplica una marca de agua de texto repetida a una tarjeta.

</>

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

Múltiples Líneas

Apila múltiples líneas con fuente, espacio y rotación personalizados.

</>

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

Marca de Agua de Imagen

Usa un URI de datos o imagen alojada para marcar el contenido.

</>

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

Propiedad	Descripción	Tipo	Predeterminado
content	Texto de marca de agua (cadena o líneas)	string | string[]	-
image	URL de imagen o URI de datos para renderizar en lugar de texto	string	-
gap	Espacio horizontal y vertical entre mosaicos	[number, number]	[120, 120]
offset	Desplazamiento inicial para el primer mosaico	[number, number]	gap / 2
width	Ancho del mosaico en píxeles	number	120
height	Alto del mosaico en píxeles	number	64
rotate	Ángulo de rotación en grados	number	-22
zIndex	z-index para la superposición	number	1000
font	Configuración de fuente para marcas de agua de texto	WatermarkFontOptions	-
className	Clases CSS adicionales	string	-
style	Estilos personalizados para el envoltorio	React.CSSProperties	-
data-testid	ID de prueba para pruebas	string	-

Accesibilidad

• La superposición de marca de agua usa pointer-events: none para asegurar que el contenido permanezca interactivo
• La marca de agua es puramente decorativa y no interfiere con tecnologías asistivas
• Todos los elementos interactivos debajo de la marca de agua permanecen completamente accesibles para usuarios de teclado y lectores de pantalla
• El renderizado semitransparente asegura que el contenido subyacente permanezca visible y legible