'/%3e%3cg%20transform='translate(170%20205)%20scale(0.3606)'%20fill='%23111011'%3e%3cpath%20d='M497%20640H359L248%20320%20122%20640H0L256%200z'/%3e%3cpath%20d='M292.43%20640H200.8L248%20522z'/%3e%3cpath%20d='M335%200h138l111%20320L710%200h122L576%20640z'/%3e%3c/g%3e%3c/svg%3e){kind=small}
Extras
Watermark
Un texto tenue repetido sobre el contenido: borradores y vistas previas confidenciales.
import { Watermark } from '@alea/ui';
Ejemplos
Watermark
Sobre cualquier contenido; solo decorativo.
Q4 roadmap
Plugins in the store, Alea phase 3, the icon kit.
Tokens
Los tokens de diseño que usa este componente, con su valor en el tema actual. Cambia cualquiera para darle otro estilo.
Color
--alea-text…
Props
Watermark props
Repite un texto tenue sobre el contenido: borradores, vistas previas confidenciales. Decorativo: oculto para lectores de pantalla, no es una medida de seguridad.
| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
textobligatoria | string | - | El texto repetido en el área. |
className | string | - | Clases extra para el elemento raíz. |
gap | number | 120 | Espacio entre marcas en px. Por defecto 120. |
opacity | number | 0.08 | De 0 a 1. Por defecto 0.08. |
rotate | number | - | Ángulo en grados. Por defecto -22. |
Especificaciones
Generado desde el código: las variantes de los tipos, los estados y tokens del CSS, y los patrones de motion que aplican. Las grillas muestran el componente real en ambos temas; los números se miden en la página.
- Oscuro y claro
- Cada color viene de tokens del tema, así que sigue a data-theme (y a presets como Graphite) en la página o en cualquier contenedor. El contraste se revisa en ambos temas.
- Clases para estilos
.alea-watermark.alea-watermark-layer
Accesibilidad
- Decorativo y oculto para lectores de pantalla: di "Borrador" en la página también si importa.
Qué hacer y qué evitar
Hacer
- Dilo con palabras también cuando importa (Borrador, Confidencial).
- Mantenlo tenue para que el contenido siga legible.
Evitar
- No dependas de él para la seguridad.
- No cubras controles interactivos con él.