ant-design
  1. ant-design-watermark

Ant Design Watermark

Ant Design Watermark is a feature that allows you to add a watermark to your documents or images. This can be useful in a variety of situations where you want to protect your content or add a professional touch.

Syntax

The syntax for using Ant Design Watermark is simple. You can use the <Watermark> tag to add a watermark to your content. Here's an example of the syntax:

<Watermark text="CONFIDENTIAL" style={{ fontSize: 60, color: '#f2f2f2', opacity: 0.2 }}></Watermark>

In this example, we're adding a watermark that says "CONFIDENTIAL" with a font size of 60, a color of f2f2f2, and an opacity of 0.2.

Use

Ant Design Watermark can be used in a variety of situations. You might use it to add a watermark to documents that contain sensitive information, such as financial statements or legal documents. You might also use it to add a watermark to images that you're sharing online, such as photos or graphics.

Importance

Adding a watermark to your content can help protect it from being copied or shared without your permission. It can also help give your content a professional look and feel. Ant Design Watermark makes it easy to add a watermark to your content without having to use complex software or tools.

Example

import { Watermark } from 'antd';

<Watermark text="SAMPLE" style={{ fontSize: 40, color: '#C5C5C5', opacity: 0.5 }}>
  <div>
    <h1>Example Page</h1>
    <p>This is some sample content for demonstration purposes.</p>
  </div>
</Watermark>

In this example, we're adding a watermark that says "SAMPLE" with a font size of 40, a color of C5C5C5, and an opacity of 0.5. We're also wrapping our content in a div so that the watermark appears over both the header and the paragraph.

Summary

Ant Design Watermark is a simple and effective way to add a watermark to your content. With its easy-to-use syntax and flexible options for customization, it can be used in a variety of situations to protect your content and give it a professional touch.

Published on: