Watermark

General

Phủ một lớp text hoặc ảnh lặp lại lên nội dung để đánh dấu bản quyền, chống sao chép, hoặc gắn nhãn bản nháp.

Basic Usage

Basuicn là hệ thống component mã nguồn mở, dựng trên Next.js 16 + React 19 + Tailwind v4. Watermark giúp đánh dấu nội dung, chống sao chép, hoặc gắn nhãn bản nháp lên giao diện. Bạn có thể tuỳ chỉnh nội dung, font, góc xoay, khoảng cách giữa các lần lặp lại.

Multi-line Content

Truyền mảng string để hiển thị nhiều dòng watermark.

Custom Font

Tuỳ chỉnh màu, size, weight, family, style cho text watermark.

Rotation

Đặt rotate = 0 để watermark nằm ngang, hoặc giá trị dương/âm để xoay tuỳ ý.

rotate = 0

rotate = -45

rotate = 45

Gap & Offset

`gap` điều khiển khoảng cách giữa các lần lặp; `offset` dịch ô đầu tiên.

gap = [40, 40]

gap = [180, 180]

offset = [40, 40]

Image Watermark

Truyền `image` để dùng logo/ảnh thay vì text. `image` được ưu tiên hơn `content`.

Full Coverage

Watermark phủ toàn bộ phần tử cha — đặt parent `h-screen` / `w-full` để tile lặp kín màn hình.

Trang preview phủ watermark toàn màn hình

Watermark lặp lại đều khắp chiều rộng và chiều cao của container — thử cuộn / resize để thấy tile tiếp tục bám full khung.

Z-index Layering

`zIndex` quyết định lớp watermark nằm trên hay dưới các phần tử positioned bên trong.

API Reference

Prop	Type	Default	Mô tả
`content`	`string \| string[]`	—	Nội dung text watermark. Truyền mảng để render nhiều dòng.
`image`	`string`	—	URL ảnh watermark — ưu tiên hơn `content` khi cùng được set.
`width`	`number`	`120 (text) / 120 (image)`	Chiều rộng vùng nội dung của một ô watermark (px).
`height`	`number`	`64 (text) / 120 (image)`	Chiều cao vùng nội dung của một ô watermark (px).
`rotate`	`number`	`-22`	Góc xoay watermark, đơn vị độ.
`gap`	`[number, number]`	`[100, 100]`	Khoảng cách giữa các lần lặp lại watermark theo trục X và Y (px).
`offset`	`[number, number]`	—	Dịch chuyển ô watermark đầu tiên theo trục X và Y (px).
`font`	`WatermarkFont`	`{ color: 'rgba(0,0,0,0.15)', fontSize: 16, fontWeight: 'normal', fontFamily: 'sans-serif', fontStyle: 'normal' }`	Cấu hình font cho watermark dạng text.
`zIndex`	`number`	`9`	z-index của lớp watermark — đặt cao hơn nội dung con khi cần đè lên trên.
`children`	`React.ReactNode`	—	Nội dung bên dưới được phủ watermark.
`className`	`string`	—	Class tuỳ chỉnh cho container ngoài cùng.