logoNamu Design

⌘ K
  • Design
  • Development
  • Components
  • Blog
  • Resources
1.0.0
  • Components Overview
  • General
    • Button
    • FloatButtonNew
    • Icon
    • Typography
  • Layout
    • Divider
    • Grid
    • Layout
    • Space
  • Navigation
    • Anchor
    • Breadcrumb
    • Dropdown
    • Menu
    • Pagination
    • Steps
  • Data Entry
    • AutoComplete
    • Cascader
    • Checkbox
    • ColorPickerNew
    • DatePicker
    • Form
    • Input
    • InputNumber
    • Mentions
    • Radio
    • Rate
    • Select
    • Slider
    • Switch
    • TimePicker
    • Transfer
    • TreeSelect
    • Upload
  • Data Display
    • Avatar
    • Badge
    • Calendar
    • Card
    • Carousel
    • Collapse
    • Descriptions
    • Empty
    • Image
    • List
    • Popover
    • QRCodeNew
    • Segmented
    • Statistic
    • Table
    • Tabs
    • Tag
    • Timeline
    • Tooltip
    • TourNew
    • Tree
  • Feedback
    • Alert
    • Drawer
    • Message
    • Modal
    • Notification
    • Popconfirm
    • Progress
    • Result
    • Skeleton
    • Spin
    • Watermark
  • Other
    • Affix
    • AppNew
    • ConfigProvider
When To Use
Examples
Basic
Multi-line watermark
Image watermark
Custom configuration
API
Watermark
Font
Design Token
FAQ
Handle abnormal image watermarks

Watermark

    • SpinAffix

    Resources

    Namu Design Charts
    Namu Design Pro
    Namu Design Pro Components
    Namu Design Mobile
    Namu Design Mini
    Namu Design Landing-Landing Templates
    Scaffolds-Scaffold Market
    Umi-React Application Framework
    dumi-Component doc generator
    qiankun-Micro-Frontends Framework
    ahooks-React Hooks Library
    Ant Motion-Motion Solution
    China Mirror 🇨🇳

    Community

    Awesome Namu Design
    Medium
    Twitter
    yuqueNamu Design in YuQue
    Namu Design in Zhihu
    Experience Cloud Blog
    seeconfSEE Conf-Experience Tech Conference

    Help

    GitHub
    Change Log
    FAQ
    Bug Report
    Issues
    Discussions
    StackOverflow
    SegmentFault

    Ant XTechMore Products

    yuqueYuQue-Document Collaboration Platform
    AntVAntV-Data Visualization
    EggEgg-Enterprise Node.js Framework
    kitchenKitchen-Sketch Toolkit
    xtechAnt Financial Experience Tech
    Theme Editor
    Made with ❤ by
    Ant Group and Namu Design Community

    Add specific text or patterns to the page.

    When To Use

    • Use when the page needs to be watermarked to identify the copyright.
    • Suitable for preventing information theft.

    Examples

    Basic

    The most basic usage.

    expand codeexpand code
    Multi-line watermark

    Use 'content' to set a string array to specify multi-line text watermark content.

    expand codeexpand code
    Image watermark

    Specify the image address via 'image'. To ensure that the image is high definition and not stretched, set the width and height, and upload at least twice the width and height of the logo image address.

    expand codeexpand code
    Custom configuration

    Preview the watermark effect by configuring custom parameters.

    expand codeexpand code

    API

    Common props ref：Common props

    Watermark

    PropertyDescriptionTypeDefaultVersion
    widthThe width of the watermark, the default value of content is its own widthnumber120
    heightThe height of the watermark, the default value of content is its own heightnumber64
    rotateWhen the watermark is drawn, the rotation Angle, unit °number-22
    zIndexThe z-index of the appended watermark elementnumber9
    imageImage source, it is recommended to export 2x or 3x image, high priority (support base64 format)string-
    contentWatermark text contentstring | string[]-
    fontText styleFontFont
    gapThe spacing between watermarks[number, number][100, 100]
    offsetThe offset of the watermark from the upper left corner of the container. The default is gap/2[number, number][gap[0]/2, gap[1]/2]

    Font

    PropertyDescriptionTypeDefaultVersion
    colorfont colorstringrgba(0,0,0,.15)
    fontSizefont sizenumber16
    fontWeightfont weightnormal | light | weight | numbernormal
    fontFamilyfont familystringsans-serif
    fontStylefont stylenone | normal | italic | obliquenormal

    Design Token

    FAQ

    Handle abnormal image watermarks

    When using an image watermark and the image loads abnormally, you can add content at the same time to prevent the watermark from becoming invalid (since 5.2.3).

    <Watermark
      height={30}
      width={130}
      content="Namu Design"
      image="https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*lkAoRbywo0oAAAAAAAAAAAAADrJ8AQ/original"
    >
      <div style={{ height: 500 }} />
    </Watermark>
    The light-speed iteration of the digital world makes products more complex. However, human consciousness and attention resources are limited. Facing this design contradiction, the pursuit of natural interaction will be the consistent direction of Namu Design.
    Natural user cognition: According to cognitive psychology, about 80% of external information is obtained through visual channels. The most important visual elements in the interface design, including layout, colors, illustrations, icons, etc., should fully absorb the laws of nature, thereby reducing the user's cognitive cost and bringing authentic and smooth feelings. In some scenarios, opportunely adding other sensory channels such as hearing, touch can create a richer and more natural product experience.
    Natural user behavior: In the interaction with the system, the designer should fully understand the relationship between users, system roles, and task objectives, and also contextually organize system functions and services. At the same time, a series of methods such as behavior analysis, artificial intelligence and sensors could be applied to assist users to make effective decisions and reduce extra operations of users, to save users' mental and physical resources and make human-computer interaction more natural.
    示例图片