How to Create Watermark in React JS using Ant Design UI Components | Antd Watermark Logo or Text
HTML-код
- Опубликовано: 19 сен 2024
- #reactjs #antd #watermark
In this video tutorial I have explained how to create watermark in React JS using Ant Design UI Components
This video focuses on
- How to create watermark in React JS using Ant Design UI Components
- How to use ant design Watermark component in react app
- Explains different props of antd watermark component introduces in recent version of antd 5.x
- How to create text watermark for react js components or contents
- How to create image or logon watermark for react js components or contents
- How to customize antd watermark style like font size, color etc.
- How to adjust gap between different antd watermarks in react js app
- How to customize the offset, width and height of react watermark using ant design UI system
- How to change z index of react watermark using antd watermark props
- How to rotate and watermark to different angles like 45 degree, 90 degrees etc.
- How to add multiline watermark in react app components
- How to Image prop of antd watermark to show watermark logo in react app
- How to show multiple watermarks text under one react component frame
If you are new to ant-design, I have already added an intro video on ant-design and overview of its components at • Ant Design UI library ... link, please go through that video to set up the ground for further components implementation.
For more details on ant-design, please visit its documentation at ant.design/com...
Happy Coding!
Hii amir I needed a bit of help I have drawer so inside that I want add date picker that gives me to select only year range calendar like from 2016 to 2020 kind like this and I want to console log that value can you please help🙏
Hi @Deadmax Max
You can select range of years using DatePicker's RangePicker component so it will be something like below
import { DatePicker } from 'antd';
{
//Here dates will be array of two Dayjs objects and dateStrings will be their string representation of same dates
console.log(dateStrings)
}}/>
Please let me know if you need any more information on that.
Thanks
please make a video on how to use anchor in antd menu items
Its noted down @Hazique Ahmed Khan ,
I will create in my future videos.
Thanks for the suggestions! Really appreciated.
Hi sir , please tell me how to maintain height and width when I apply this on images,it is overflowing
Hi Sunny Kumar,
In case the image if overflowing you my try setting the width and height like below
Thanks
@@CodeWithAamir Thanks Sir ji
Please Sir make a video on Antd Grid
Noted your great suggestion @Aubdur rob Anik
I will create one in my future videos.
Thanks