Watermark

Sobreponha marcas d’água de texto ou imagem repetidas para proteger conteúdo mantendo-o interativo.

Importação

import { Watermark } from 'asterui'

Exemplos

Marca d'Água de Texto

Aplique uma marca d'água de texto repetida a um cartão.

</>

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últiplas Linhas

Empilhe múltiplas linhas com fonte, espaçamento e rotação 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 d'Água de Imagem

Use um URI de dados ou imagem hospedada para marcar o conteúdo.

</>

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

Propriedade	Descrição	Tipo	Padrão
content	Texto da marca d’água (string ou linhas)	string | string[]	-
image	URL de imagem ou URI de dados para renderizar em vez de texto	string	-
gap	Espaçamento horizontal e vertical entre blocos	[number, number]	[120, 120]
offset	Deslocamento inicial para o primeiro bloco	[number, number]	gap / 2
width	Largura do bloco em pixels	number	120
height	Altura do bloco em pixels	number	64
rotate	Ângulo de rotação em graus	number	-22
zIndex	z-index para a sobreposição	number	1000
font	Configurações de fonte para marcas d’água de texto	WatermarkFontOptions	-
className	Classes CSS adicionais	string	-
style	Estilos personalizados para o wrapper	React.CSSProperties	-
data-testid	ID de teste para testes	string	-

Acessibilidade

• A sobreposição de marca d’água usa pointer-events: none para garantir que o conteúdo permaneça interativo
• Marca d’água é puramente decorativa e não interfere com tecnologias assistivas
• Todos os elementos interativos sob a marca d’água permanecem totalmente acessíveis para usuários de teclado e leitores de tela
• Renderização semi-transparente garante que o conteúdo subjacente permaneça visível e legível