You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 

208 lines
18 KiB

"use strict";(self.webpackChunkantd=self.webpackChunkantd||[]).push([[9664],{316984:function(m,l,t){t.r(l);var p=t(502143),h=t(968521),g=t(720719),Z=t(28840),i=t(759907),a=t(828089),v=t(825673),f=t(902068),E=t(574399),x=t(863942),b=t(316073),P=t(24628),A=t(719260),I=t(956140),s=t(127179),u=t(905388),k=t(40428),y=t(606965),D=t(268696),M=t(587302),r=t(424128),O=t(249706),T=t(795127),w=t(116846),C=t(212039),W=t(73024),F=t(553913),o=t(606641),d=t(667294),n=t(370917);function _(){var c=(0,o.eL)(),e=c.texts;return(0,n.tZ)(o.dY,null,(0,n.tZ)(d.Fragment,null,(0,n.tZ)("div",{className:"markdown"},(0,n.tZ)("p",null,e[0].value),(0,n.tZ)("h2",{id:"\u4F55\u65F6\u4F7F\u7528"},(0,n.tZ)(r.Z,{"aria-hidden":"true",tabIndex:"-1",href:"#\u4F55\u65F6\u4F7F\u7528",sourceType:"a"},(0,n.tZ)("span",{className:"icon icon-link"})),"\u4F55\u65F6\u4F7F\u7528"),(0,n.tZ)("ul",null,(0,n.tZ)("li",null,e[1].value),(0,n.tZ)("li",null,e[2].value)),(0,n.tZ)("h2",{id:"\u4EE3\u7801\u6F14\u793A"},(0,n.tZ)(r.Z,{"aria-hidden":"true",tabIndex:"-1",href:"#\u4EE3\u7801\u6F14\u793A",sourceType:"a"},(0,n.tZ)("span",{className:"icon icon-link"})),"\u4EE3\u7801\u6F14\u793A")),(0,n.tZ)(u.Z,{items:[{demo:{id:"components-watermark-demo-basic"},previewerProps:{title:"\u57FA\u672C",filename:"components/watermark/demo/basic.tsx",pkgDependencyList:{"@ant-design/colors":"^7.0.0","@ant-design/cssinjs":"^1.10.1","@ant-design/icons":"^5.1.0","@ant-design/react-slick":"~1.0.0","@babel/runtime":"^7.18.3","@ctrl/tinycolor":"^3.6.0","@rc-component/color-picker":"~1.4.0","@rc-component/mutate-observer":"^1.0.0","@rc-component/tour":"~1.8.0","@rc-component/trigger":"^1.13.0",classnames:"^2.2.6","copy-to-clipboard":"^3.2.0",dayjs:"^1.11.1","qrcode.react":"^3.1.0","rc-cascader":"~3.12.0","rc-checkbox":"~3.1.0","rc-collapse":"~3.7.0","rc-dialog":"~9.1.0","rc-drawer":"~6.2.0","rc-dropdown":"~4.1.0","rc-field-form":"~1.34.0","rc-image":"~7.0.0","rc-input":"~1.1.0","rc-input-number":"~8.0.2","rc-mentions":"~2.5.0","rc-menu":"~9.10.0","rc-motion":"^2.7.3","rc-notification":"~5.0.4","rc-pagination":"~3.5.0","rc-picker":"~3.10.0","rc-progress":"~3.4.1","rc-rate":"~2.12.0","rc-resize-observer":"^1.2.0","rc-segmented":"~2.2.0","rc-select":"~14.5.0","rc-slider":"~10.1.0","rc-steps":"~6.0.0","rc-switch":"~4.1.0","rc-table":"~7.32.1","rc-tabs":"~12.9.0","rc-textarea":"~1.3.2","rc-tooltip":"~6.0.0","rc-tree":"~5.7.6","rc-tree-select":"~5.9.0","rc-upload":"~4.3.0","rc-util":"^5.32.0","scroll-into-view-if-needed":"^3.0.3","throttle-debounce":"^5.0.0"},jsx:`import React from 'react';
import { Watermark } from 'antd';
const App = () => (
<Watermark content="Ant Design">
<div
style={{
height: 500,
}}
/>
</Watermark>
);
export default App;
`,description:"<p>\u6700\u7B80\u5355\u7684\u7528\u6CD5\u3002</p>"}},{demo:{id:"components-watermark-demo-multi-line"},previewerProps:{title:"\u591A\u884C\u6C34\u5370",filename:"components/watermark/demo/multi-line.tsx",pkgDependencyList:{"@ant-design/colors":"^7.0.0","@ant-design/cssinjs":"^1.10.1","@ant-design/icons":"^5.1.0","@ant-design/react-slick":"~1.0.0","@babel/runtime":"^7.18.3","@ctrl/tinycolor":"^3.6.0","@rc-component/color-picker":"~1.4.0","@rc-component/mutate-observer":"^1.0.0","@rc-component/tour":"~1.8.0","@rc-component/trigger":"^1.13.0",classnames:"^2.2.6","copy-to-clipboard":"^3.2.0",dayjs:"^1.11.1","qrcode.react":"^3.1.0","rc-cascader":"~3.12.0","rc-checkbox":"~3.1.0","rc-collapse":"~3.7.0","rc-dialog":"~9.1.0","rc-drawer":"~6.2.0","rc-dropdown":"~4.1.0","rc-field-form":"~1.34.0","rc-image":"~7.0.0","rc-input":"~1.1.0","rc-input-number":"~8.0.2","rc-mentions":"~2.5.0","rc-menu":"~9.10.0","rc-motion":"^2.7.3","rc-notification":"~5.0.4","rc-pagination":"~3.5.0","rc-picker":"~3.10.0","rc-progress":"~3.4.1","rc-rate":"~2.12.0","rc-resize-observer":"^1.2.0","rc-segmented":"~2.2.0","rc-select":"~14.5.0","rc-slider":"~10.1.0","rc-steps":"~6.0.0","rc-switch":"~4.1.0","rc-table":"~7.32.1","rc-tabs":"~12.9.0","rc-textarea":"~1.3.2","rc-tooltip":"~6.0.0","rc-tree":"~5.7.6","rc-tree-select":"~5.9.0","rc-upload":"~4.3.0","rc-util":"^5.32.0","scroll-into-view-if-needed":"^3.0.3","throttle-debounce":"^5.0.0"},jsx:`import React from 'react';
import { Watermark } from 'antd';
const App = () => (
<Watermark content={['Ant Design', 'Happy Working']}>
<div
style={{
height: 500,
}}
/>
</Watermark>
);
export default App;
`,description:"<p>\u901A\u8FC7 <code>content</code> \u8BBE\u7F6E \u5B57\u7B26\u4E32\u6570\u7EC4 \u6307\u5B9A\u591A\u884C\u6587\u5B57\u6C34\u5370\u5185\u5BB9\u3002</p>"}},{demo:{id:"components-watermark-demo-image"},previewerProps:{title:"\u56FE\u7247\u6C34\u5370",filename:"components/watermark/demo/image.tsx",pkgDependencyList:{"@ant-design/colors":"^7.0.0","@ant-design/cssinjs":"^1.10.1","@ant-design/icons":"^5.1.0","@ant-design/react-slick":"~1.0.0","@babel/runtime":"^7.18.3","@ctrl/tinycolor":"^3.6.0","@rc-component/color-picker":"~1.4.0","@rc-component/mutate-observer":"^1.0.0","@rc-component/tour":"~1.8.0","@rc-component/trigger":"^1.13.0",classnames:"^2.2.6","copy-to-clipboard":"^3.2.0",dayjs:"^1.11.1","qrcode.react":"^3.1.0","rc-cascader":"~3.12.0","rc-checkbox":"~3.1.0","rc-collapse":"~3.7.0","rc-dialog":"~9.1.0","rc-drawer":"~6.2.0","rc-dropdown":"~4.1.0","rc-field-form":"~1.34.0","rc-image":"~7.0.0","rc-input":"~1.1.0","rc-input-number":"~8.0.2","rc-mentions":"~2.5.0","rc-menu":"~9.10.0","rc-motion":"^2.7.3","rc-notification":"~5.0.4","rc-pagination":"~3.5.0","rc-picker":"~3.10.0","rc-progress":"~3.4.1","rc-rate":"~2.12.0","rc-resize-observer":"^1.2.0","rc-segmented":"~2.2.0","rc-select":"~14.5.0","rc-slider":"~10.1.0","rc-steps":"~6.0.0","rc-switch":"~4.1.0","rc-table":"~7.32.1","rc-tabs":"~12.9.0","rc-textarea":"~1.3.2","rc-tooltip":"~6.0.0","rc-tree":"~5.7.6","rc-tree-select":"~5.9.0","rc-upload":"~4.3.0","rc-util":"^5.32.0","scroll-into-view-if-needed":"^3.0.3","throttle-debounce":"^5.0.0"},jsx:`import React from 'react';
import { Watermark } from 'antd';
const App = () => (
<Watermark
height={30}
width={130}
image="https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*lkAoRbywo0oAAAAAAAAAAAAADrJ8AQ/original"
>
<div
style={{
height: 500,
}}
/>
</Watermark>
);
export default App;
`,description:"<p>\u901A\u8FC7 <code>image</code> \u6307\u5B9A\u56FE\u7247\u5730\u5740\u3002\u4E3A\u4FDD\u8BC1\u56FE\u7247\u9AD8\u6E05\u4E14\u4E0D\u88AB\u62C9\u4F38\uFF0C\u8BF7\u8BBE\u7F6E width \u548C height, \u5E76\u4E0A\u4F20\u81F3\u5C11\u4E24\u500D\u7684\u5BBD\u9AD8\u7684 logo \u56FE\u7247\u5730\u5740\u3002</p>"}},{demo:{id:"components-watermark-demo-custom"},previewerProps:{title:"\u81EA\u5B9A\u4E49\u914D\u7F6E",filename:"components/watermark/demo/custom.tsx",pkgDependencyList:{"@ant-design/colors":"^7.0.0","@ant-design/cssinjs":"^1.10.1","@ant-design/icons":"^5.1.0","@ant-design/react-slick":"~1.0.0","@babel/runtime":"^7.18.3","@ctrl/tinycolor":"^3.6.0","@rc-component/color-picker":"~1.4.0","@rc-component/mutate-observer":"^1.0.0","@rc-component/tour":"~1.8.0","@rc-component/trigger":"^1.13.0",classnames:"^2.2.6","copy-to-clipboard":"^3.2.0",dayjs:"^1.11.1","qrcode.react":"^3.1.0","rc-cascader":"~3.12.0","rc-checkbox":"~3.1.0","rc-collapse":"~3.7.0","rc-dialog":"~9.1.0","rc-drawer":"~6.2.0","rc-dropdown":"~4.1.0","rc-field-form":"~1.34.0","rc-image":"~7.0.0","rc-input":"~1.1.0","rc-input-number":"~8.0.2","rc-mentions":"~2.5.0","rc-menu":"~9.10.0","rc-motion":"^2.7.3","rc-notification":"~5.0.4","rc-pagination":"~3.5.0","rc-picker":"~3.10.0","rc-progress":"~3.4.1","rc-rate":"~2.12.0","rc-resize-observer":"^1.2.0","rc-segmented":"~2.2.0","rc-select":"~14.5.0","rc-slider":"~10.1.0","rc-steps":"~6.0.0","rc-switch":"~4.1.0","rc-table":"~7.32.1","rc-tabs":"~12.9.0","rc-textarea":"~1.3.2","rc-tooltip":"~6.0.0","rc-tree":"~5.7.6","rc-tree-select":"~5.9.0","rc-upload":"~4.3.0","rc-util":"^5.32.0","scroll-into-view-if-needed":"^3.0.3","throttle-debounce":"^5.0.0"},jsx:`import { ColorPicker, Form, Input, InputNumber, Slider, Space, Typography, Watermark } from 'antd';
import React, { useMemo, useState } from 'react';
const { Paragraph } = Typography;
const App = () => {
const [form] = Form.useForm();
const [config, setConfig] = useState({
content: 'Ant Design',
color: 'rgba(0, 0, 0, 0.15)',
fontSize: 16,
zIndex: 11,
rotate: -22,
gap: [100, 100],
offset: undefined,
});
const { content, color, fontSize, zIndex, rotate, gap, offset } = config;
const watermarkProps = useMemo(
() => ({
content,
font: {
color: typeof color === 'string' ? color : color.toRgbString(),
fontSize,
},
zIndex,
rotate,
gap,
offset,
}),
[config],
);
return (
<div
style={{
display: 'flex',
}}
>
<Watermark {...watermarkProps}>
<Typography>
<Paragraph>
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
Ant Design.
</Paragraph>
<Paragraph>
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&apos;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.
</Paragraph>
<Paragraph>
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&apos; mental and physical resources and make human-computer interaction more
natural.
</Paragraph>
</Typography>
<img
style={{
zIndex: 10,
width: '100%',
maxWidth: 800,
position: 'relative',
}}
src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*zx7LTI_ECSAAAAAAAAAAAABkARQnAQ"
alt="\u793A\u4F8B\u56FE\u7247"
/>
</Watermark>
<Form
style={{
width: 280,
flexShrink: 0,
borderLeft: '1px solid #eee',
paddingLeft: 20,
marginLeft: 20,
}}
form={form}
layout="vertical"
initialValues={config}
onValuesChange={(_, values) => {
setConfig(values);
}}
>
<Form.Item name="content" label="Content">
<Input placeholder="\u8BF7\u8F93\u5165" />
</Form.Item>
<Form.Item name="color" label="Color">
<ColorPicker />
</Form.Item>
<Form.Item name="fontSize" label="FontSize">
<Slider step={1} min={0} max={100} />
</Form.Item>
<Form.Item name="zIndex" label="zIndex">
<Slider step={1} min={0} max={100} />
</Form.Item>
<Form.Item name="rotate" label="Rotate">
<Slider step={1} min={-180} max={180} />
</Form.Item>
<Form.Item
label="Gap"
style={{
marginBottom: 0,
}}
>
<Space
style={{
display: 'flex',
}}
align="baseline"
>
<Form.Item name={['gap', 0]}>
<InputNumber
placeholder="gapX"
style={{
width: '100%',
}}
/>
</Form.Item>
<Form.Item name={['gap', 1]}>
<InputNumber
placeholder="gapY"
style={{
width: '100%',
}}
/>
</Form.Item>
</Space>
</Form.Item>
<Form.Item
label="Offset"
style={{
marginBottom: 0,
}}
>
<Space
style={{
display: 'flex',
}}
align="baseline"
>
<Form.Item name={['offset', 0]}>
<InputNumber
placeholder="offsetLeft"
style={{
width: '100%',
}}
/>
</Form.Item>
<Form.Item name={['offset', 1]}>
<InputNumber
placeholder="offsetTop"
style={{
width: '100%',
}}
/>
</Form.Item>
</Space>
</Form.Item>
</Form>
</div>
);
};
export default App;
`,description:"<p>\u901A\u8FC7\u81EA\u5B9A\u4E49\u53C2\u6570\u914D\u7F6E\u9884\u89C8\u6C34\u5370\u6548\u679C\u3002</p>"}}]}),(0,n.tZ)("div",{className:"markdown"},(0,n.tZ)("h2",{id:"api"},(0,n.tZ)(r.Z,{"aria-hidden":"true",tabIndex:"-1",href:"#api",sourceType:"a"},(0,n.tZ)("span",{className:"icon icon-link"})),"API"),(0,n.tZ)("h3",{id:"watermark"},(0,n.tZ)(r.Z,{"aria-hidden":"true",tabIndex:"-1",href:"#watermark",sourceType:"a"},(0,n.tZ)("span",{className:"icon icon-link"})),"Watermark"),(0,n.tZ)(a.Z,{className:"component-api-table"},(0,n.tZ)("thead",null,(0,n.tZ)("tr",null,(0,n.tZ)("th",null,e[3].value),(0,n.tZ)("th",null,e[4].value),(0,n.tZ)("th",null,e[5].value),(0,n.tZ)("th",null,e[6].value),(0,n.tZ)("th",null,e[7].value))),(0,n.tZ)("tbody",null,(0,n.tZ)("tr",null,(0,n.tZ)("td",null,e[8].value),(0,n.tZ)("td",null,e[9].value,(0,n.tZ)("code",null,e[10].value),e[11].value),(0,n.tZ)("td",null,e[12].value),(0,n.tZ)("td",null,e[13].value),(0,n.tZ)("td",null)),(0,n.tZ)("tr",null,(0,n.tZ)("td",null,e[14].value),(0,n.tZ)("td",null,e[15].value,(0,n.tZ)("code",null,e[16].value),e[17].value),(0,n.tZ)("td",null,e[18].value),(0,n.tZ)("td",null,e[19].value),(0,n.tZ)("td",null)),(0,n.tZ)("tr",null,(0,n.tZ)("td",null,e[20].value),(0,n.tZ)("td",null,e[21].value,(0,n.tZ)("code",null,e[22].value)),(0,n.tZ)("td",null,e[23].value),(0,n.tZ)("td",null,e[24].value),(0,n.tZ)("td",null)),(0,n.tZ)("tr",null,(0,n.tZ)("td",null,e[25].value),(0,n.tZ)("td",null,e[26].value),(0,n.tZ)("td",null,e[27].value),(0,n.tZ)("td",null,e[28].value),(0,n.tZ)("td",null)),(0,n.tZ)("tr",null,(0,n.tZ)("td",null,e[29].value),(0,n.tZ)("td",null,e[30].value),(0,n.tZ)("td",null,e[31].value),(0,n.tZ)("td",null,e[32].value),(0,n.tZ)("td",null)),(0,n.tZ)("tr",null,(0,n.tZ)("td",null,e[33].value),(0,n.tZ)("td",null,e[34].value),(0,n.tZ)("td",null,e[35].value),(0,n.tZ)("td",null,e[36].value),(0,n.tZ)("td",null)),(0,n.tZ)("tr",null,(0,n.tZ)("td",null,e[37].value),(0,n.tZ)("td",null,e[38].value),(0,n.tZ)("td",null,(0,n.tZ)(r.Z,{to:"#font",sourceType:"Link"},e[39].value)),(0,n.tZ)("td",null,(0,n.tZ)(r.Z,{to:"#font",sourceType:"Link"},e[40].value)),(0,n.tZ)("td",null)),(0,n.tZ)("tr",null,(0,n.tZ)("td",null,e[41].value),(0,n.tZ)("td",null,e[42].value),(0,n.tZ)("td",null,e[43].value),(0,n.tZ)("td",null,e[44].value),(0,n.tZ)("td",null)),(0,n.tZ)("tr",null,(0,n.tZ)("td",null,e[45].value),(0,n.tZ)("td",null,e[46].value,(0,n.tZ)("code",null,e[47].value)),(0,n.tZ)("td",null,e[48].value),(0,n.tZ)("td",null,e[49].value),(0,n.tZ)("td",null)))),(0,n.tZ)("h3",{id:"font"},(0,n.tZ)(r.Z,{"aria-hidden":"true",tabIndex:"-1",href:"#font",sourceType:"a"},(0,n.tZ)("span",{className:"icon icon-link"})),"Font"),(0,n.tZ)(a.Z,{className:"component-api-table"},(0,n.tZ)("thead",null,(0,n.tZ)("tr",null,(0,n.tZ)("th",null,e[50].value),(0,n.tZ)("th",null,e[51].value),(0,n.tZ)("th",null,e[52].value),(0,n.tZ)("th",null,e[53].value),(0,n.tZ)("th",null,e[54].value))),(0,n.tZ)("tbody",null,(0,n.tZ)("tr",null,(0,n.tZ)("td",null,e[55].value),(0,n.tZ)("td",null,e[56].value),(0,n.tZ)("td",null,e[57].value),(0,n.tZ)("td",null,e[58].value),(0,n.tZ)("td",null)),(0,n.tZ)("tr",null,(0,n.tZ)("td",null,e[59].value),(0,n.tZ)("td",null,e[60].value),(0,n.tZ)("td",null,e[61].value),(0,n.tZ)("td",null,e[62].value),(0,n.tZ)("td",null)),(0,n.tZ)("tr",null,(0,n.tZ)("td",null,e[63].value),(0,n.tZ)("td",null,e[64].value),(0,n.tZ)("td",null,(0,n.tZ)("code",null,e[65].value),e[66].value,(0,n.tZ)("code",null,e[67].value),e[68].value,(0,n.tZ)("code",null,e[69].value),e[70].value),(0,n.tZ)("td",null,e[71].value),(0,n.tZ)("td",null)),(0,n.tZ)("tr",null,(0,n.tZ)("td",null,e[72].value),(0,n.tZ)("td",null,e[73].value),(0,n.tZ)("td",null,e[74].value),(0,n.tZ)("td",null,e[75].value),(0,n.tZ)("td",null)),(0,n.tZ)("tr",null,(0,n.tZ)("td",null,e[76].value),(0,n.tZ)("td",null,e[77].value),(0,n.tZ)("td",null,(0,n.tZ)("code",null,e[78].value),e[79].value,(0,n.tZ)("code",null,e[80].value),e[81].value,(0,n.tZ)("code",null,e[82].value),e[83].value,(0,n.tZ)("code",null,e[84].value)),(0,n.tZ)("td",null,e[85].value),(0,n.tZ)("td",null)))),(0,n.tZ)("h2",{id:"design-token"},(0,n.tZ)(r.Z,{"aria-hidden":"true",tabIndex:"-1",href:"#design-token",sourceType:"a"},(0,n.tZ)("span",{className:"icon icon-link"})),"Design Token")),(0,n.tZ)(s.Z,{component:"Watermark"}),(0,n.tZ)("div",{className:"markdown"},(0,n.tZ)("h2",{id:"faq"},(0,n.tZ)(r.Z,{"aria-hidden":"true",tabIndex:"-1",href:"#faq",sourceType:"a"},(0,n.tZ)("span",{className:"icon icon-link"})),"FAQ"),(0,n.tZ)("h3",{id:"\u5904\u7406\u5F02\u5E38\u56FE\u7247\u6C34\u5370"},(0,n.tZ)(r.Z,{"aria-hidden":"true",tabIndex:"-1",href:"#\u5904\u7406\u5F02\u5E38\u56FE\u7247\u6C34\u5370",sourceType:"a"},(0,n.tZ)("span",{className:"icon icon-link"})),"\u5904\u7406\u5F02\u5E38\u56FE\u7247\u6C34\u5370"),(0,n.tZ)("p",null,e[86].value,(0,n.tZ)("code",null,e[87].value),e[88].value),(0,n.tZ)(i.Z,{lang:"typescript"},e[89].value))))}l.default=_}}]);