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.
399 lines
26 KiB
399 lines
26 KiB
"use strict";(self.webpackChunkantd=self.webpackChunkantd||[]).push([[2990],{346012:function(m,r,t){t.r(r);var _=t(502143),u=t(968521),v=t(720719),g=t(28840),h=t(759907),i=t(828089),P=t(825673),b=t(902068),f=t(574399),x=t(863942),w=t(316073),B=t(24628),k=t(719260),C=t(956140),a=t(127179),s=t(905388),E=t(40428),D=t(606965),A=t(268696),T=t(587302),o=t(424128),O=t(249706),L=t(795127),y=t(116846),M=t(212039),Z=t(73024),R=t(553913),c=t(606641),l=t(667294),e=t(370917);function d(){var p=(0,c.eL)(),n=p.texts;return(0,e.tZ)(c.dY,null,(0,e.tZ)(l.Fragment,null,(0,e.tZ)("div",{className:"markdown"},(0,e.tZ)("p",null,n[0].value),(0,e.tZ)("h2",{id:"\u4F55\u65F6\u4F7F\u7528"},(0,e.tZ)(o.Z,{"aria-hidden":"true",tabIndex:"-1",href:"#\u4F55\u65F6\u4F7F\u7528",sourceType:"a"},(0,e.tZ)("span",{className:"icon icon-link"})),"\u4F55\u65F6\u4F7F\u7528"),(0,e.tZ)("p",null,n[1].value),(0,e.tZ)("p",null,n[2].value,(0,e.tZ)("code",null,n[3].value),n[4].value),(0,e.tZ)("h2",{id:"\u4EE3\u7801\u6F14\u793A"},(0,e.tZ)(o.Z,{"aria-hidden":"true",tabIndex:"-1",href:"#\u4EE3\u7801\u6F14\u793A",sourceType:"a"},(0,e.tZ)("span",{className:"icon icon-link"})),"\u4EE3\u7801\u6F14\u793A")),(0,e.tZ)(s.Z,{items:[{demo:{id:"components-popover-demo-basic"},previewerProps:{title:"\u57FA\u672C",filename:"components/popover/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 { Button, Popover } from 'antd';
|
|
const content = (
|
|
<div>
|
|
<p>Content</p>
|
|
<p>Content</p>
|
|
</div>
|
|
);
|
|
const App = () => (
|
|
<Popover content={content} title="Title">
|
|
<Button type="primary">Hover me</Button>
|
|
</Popover>
|
|
);
|
|
export default App;
|
|
`,description:"<p>\u6700\u7B80\u5355\u7684\u7528\u6CD5\uFF0C\u6D6E\u5C42\u7684\u5927\u5C0F\u7531\u5185\u5BB9\u533A\u57DF\u51B3\u5B9A\u3002</p>",style:`.ant-popover-content p {
|
|
margin: 0;
|
|
}`}},{demo:{id:"components-popover-demo-triggertype"},previewerProps:{title:"\u4E09\u79CD\u89E6\u53D1\u65B9\u5F0F",filename:"components/popover/demo/triggerType.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 { Button, Popover, Space } from 'antd';
|
|
import React from 'react';
|
|
const content = (
|
|
<div>
|
|
<p>Content</p>
|
|
<p>Content</p>
|
|
</div>
|
|
);
|
|
const App = () => (
|
|
<Space wrap>
|
|
<Popover content={content} title="Title" trigger="hover">
|
|
<Button>Hover me</Button>
|
|
</Popover>
|
|
<Popover content={content} title="Title" trigger="focus">
|
|
<Button>Focus me</Button>
|
|
</Popover>
|
|
<Popover content={content} title="Title" trigger="click">
|
|
<Button>Click me</Button>
|
|
</Popover>
|
|
</Space>
|
|
);
|
|
export default App;
|
|
`,description:"<p>\u9F20\u6807\u79FB\u5165\u3001\u805A\u96C6\u3001\u70B9\u51FB\u3002</p>"}},{demo:{id:"components-popover-demo-placement"},previewerProps:{title:"\u4F4D\u7F6E",filename:"components/popover/demo/placement.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 { Button, Popover } from 'antd';
|
|
import React from 'react';
|
|
const text = <span>Title</span>;
|
|
const content = (
|
|
<div>
|
|
<p>Content</p>
|
|
<p>Content</p>
|
|
</div>
|
|
);
|
|
const buttonWidth = 70;
|
|
const App = () => (
|
|
<div>
|
|
<div
|
|
style={{
|
|
marginLeft: buttonWidth,
|
|
whiteSpace: 'nowrap',
|
|
}}
|
|
>
|
|
<Popover placement="topLeft" title={text} content={content} trigger="click">
|
|
<Button>TL</Button>
|
|
</Popover>
|
|
<Popover placement="top" title={text} content={content} trigger="click">
|
|
<Button>Top</Button>
|
|
</Popover>
|
|
<Popover placement="topRight" title={text} content={content} trigger="click">
|
|
<Button>TR</Button>
|
|
</Popover>
|
|
</div>
|
|
<div
|
|
style={{
|
|
width: buttonWidth,
|
|
float: 'left',
|
|
}}
|
|
>
|
|
<Popover placement="leftTop" title={text} content={content} trigger="click">
|
|
<Button>LT</Button>
|
|
</Popover>
|
|
<Popover placement="left" title={text} content={content} trigger="click">
|
|
<Button>Left</Button>
|
|
</Popover>
|
|
<Popover placement="leftBottom" title={text} content={content} trigger="click">
|
|
<Button>LB</Button>
|
|
</Popover>
|
|
</div>
|
|
<div
|
|
style={{
|
|
width: buttonWidth,
|
|
marginLeft: buttonWidth * 4 + 24,
|
|
}}
|
|
>
|
|
<Popover placement="rightTop" title={text} content={content} trigger="click">
|
|
<Button>RT</Button>
|
|
</Popover>
|
|
<Popover placement="right" title={text} content={content} trigger="click">
|
|
<Button>Right</Button>
|
|
</Popover>
|
|
<Popover placement="rightBottom" title={text} content={content} trigger="click">
|
|
<Button>RB</Button>
|
|
</Popover>
|
|
</div>
|
|
<div
|
|
style={{
|
|
marginLeft: buttonWidth,
|
|
clear: 'both',
|
|
whiteSpace: 'nowrap',
|
|
}}
|
|
>
|
|
<Popover placement="bottomLeft" title={text} content={content} trigger="click">
|
|
<Button>BL</Button>
|
|
</Popover>
|
|
<Popover placement="bottom" title={text} content={content} trigger="click">
|
|
<Button>Bottom</Button>
|
|
</Popover>
|
|
<Popover placement="bottomRight" title={text} content={content} trigger="click">
|
|
<Button>BR</Button>
|
|
</Popover>
|
|
</div>
|
|
</div>
|
|
);
|
|
export default App;
|
|
`,description:"<p>\u4F4D\u7F6E\u6709\u5341\u4E8C\u4E2A\u65B9\u5411\u3002</p>",style:`#components-popover-demo-placement .ant-btn {
|
|
margin-left: 0;
|
|
margin-right: 8px;
|
|
margin-bottom: 8px;
|
|
width: 70px;
|
|
text-align: center;
|
|
padding: 0;
|
|
}
|
|
#components-popover-demo-placement .ant-btn {
|
|
margin-left: 8px;
|
|
margin-right: 0;
|
|
}`}},{demo:{id:"components-popover-demo-arrow"},previewerProps:{title:"\u7BAD\u5934\u5C55\u793A",filename:"components/popover/demo/arrow.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, { useMemo, useState } from 'react';
|
|
import { Button, Divider, Popover, Segmented } from 'antd';
|
|
const text = <span>Title</span>;
|
|
const content = (
|
|
<div>
|
|
<p>Content</p>
|
|
<p>Content</p>
|
|
</div>
|
|
);
|
|
const buttonWidth = 70;
|
|
const App = () => {
|
|
const [showArrow, setShowArrow] = useState(true);
|
|
const [arrowAtCenter, setArrowAtCenter] = useState(false);
|
|
const mergedArrow = useMemo(() => {
|
|
if (arrowAtCenter)
|
|
return {
|
|
pointAtCenter: true,
|
|
};
|
|
return showArrow;
|
|
}, [showArrow, arrowAtCenter]);
|
|
return (
|
|
<div className="demo">
|
|
<Segmented
|
|
options={['Show', 'Hide', 'Center']}
|
|
onChange={(val) => {
|
|
setShowArrow(val !== 'Hide');
|
|
setArrowAtCenter(val === 'Center');
|
|
}}
|
|
/>
|
|
<Divider orientation="center">Content</Divider>
|
|
<div
|
|
style={{
|
|
marginLeft: buttonWidth,
|
|
whiteSpace: 'nowrap',
|
|
}}
|
|
>
|
|
<Popover placement="topLeft" title={text} content={content} arrow={mergedArrow}>
|
|
<Button>TL</Button>
|
|
</Popover>
|
|
<Popover placement="top" title={text} content={content} arrow={mergedArrow}>
|
|
<Button>Top</Button>
|
|
</Popover>
|
|
<Popover placement="topRight" title={text} content={content} arrow={mergedArrow}>
|
|
<Button>TR</Button>
|
|
</Popover>
|
|
</div>
|
|
<div
|
|
style={{
|
|
width: buttonWidth,
|
|
float: 'left',
|
|
}}
|
|
>
|
|
<Popover placement="leftTop" title={text} content={content} arrow={mergedArrow}>
|
|
<Button>LT</Button>
|
|
</Popover>
|
|
<Popover placement="left" title={text} content={content} arrow={mergedArrow}>
|
|
<Button>Left</Button>
|
|
</Popover>
|
|
<Popover placement="leftBottom" title={text} content={content} arrow={mergedArrow}>
|
|
<Button>LB</Button>
|
|
</Popover>
|
|
</div>
|
|
<div
|
|
style={{
|
|
width: buttonWidth,
|
|
marginLeft: buttonWidth * 4 + 24,
|
|
}}
|
|
>
|
|
<Popover placement="rightTop" title={text} content={content} arrow={mergedArrow}>
|
|
<Button>RT</Button>
|
|
</Popover>
|
|
<Popover placement="right" title={text} content={content} arrow={mergedArrow}>
|
|
<Button>Right</Button>
|
|
</Popover>
|
|
<Popover placement="rightBottom" title={text} content={content} arrow={mergedArrow}>
|
|
<Button>RB</Button>
|
|
</Popover>
|
|
</div>
|
|
<div
|
|
style={{
|
|
marginLeft: buttonWidth,
|
|
clear: 'both',
|
|
whiteSpace: 'nowrap',
|
|
}}
|
|
>
|
|
<Popover placement="bottomLeft" title={text} content={content} arrow={mergedArrow}>
|
|
<Button>BL</Button>
|
|
</Popover>
|
|
<Popover placement="bottom" title={text} content={content} arrow={mergedArrow}>
|
|
<Button>Bottom</Button>
|
|
</Popover>
|
|
<Popover placement="bottomRight" title={text} content={content} arrow={mergedArrow}>
|
|
<Button>BR</Button>
|
|
</Popover>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
export default App;
|
|
`,description:"<p>\u901A\u8FC7 <code>arrow</code> \u5C5E\u6027\u9690\u85CF\u7BAD\u5934\u3002</p>",style:`.code-box-demo .demo {
|
|
overflow: auto;
|
|
}
|
|
.code-box-demo .ant-btn {
|
|
margin-right: 8px;
|
|
margin-bottom: 8px;
|
|
}
|
|
.code-box-demo .ant-btn-rtl {
|
|
margin-right: 0;
|
|
margin-left: 8px;
|
|
margin-bottom: 8px;
|
|
}
|
|
#components-popover-demo-arrow .ant-btn {
|
|
width: 70px;
|
|
text-align: center;
|
|
padding: 0;
|
|
}`}},{demo:{id:"components-popover-demo-control"},previewerProps:{title:"\u4ECE\u6D6E\u5C42\u5185\u5173\u95ED",filename:"components/popover/demo/control.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, { useState } from 'react';
|
|
import { Button, Popover } from 'antd';
|
|
const App = () => {
|
|
const [open, setOpen] = useState(false);
|
|
const hide = () => {
|
|
setOpen(false);
|
|
};
|
|
const handleOpenChange = (newOpen) => {
|
|
setOpen(newOpen);
|
|
};
|
|
return (
|
|
<Popover
|
|
content={<a onClick={hide}>Close</a>}
|
|
title="Title"
|
|
trigger="click"
|
|
open={open}
|
|
onOpenChange={handleOpenChange}
|
|
>
|
|
<Button type="primary">Click me</Button>
|
|
</Popover>
|
|
);
|
|
};
|
|
export default App;
|
|
`,description:"<p>\u4F7F\u7528 <code>open</code> \u5C5E\u6027\u63A7\u5236\u6D6E\u5C42\u663E\u793A\u3002</p>"}},{demo:{id:"components-popover-demo-hover-with-click"},previewerProps:{title:"\u60AC\u505C\u70B9\u51FB\u5F39\u51FA\u7A97\u53E3",filename:"components/popover/demo/hover-with-click.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, { useState } from 'react';
|
|
import { Button, Popover } from 'antd';
|
|
const App = () => {
|
|
const [clicked, setClicked] = useState(false);
|
|
const [hovered, setHovered] = useState(false);
|
|
const hide = () => {
|
|
setClicked(false);
|
|
setHovered(false);
|
|
};
|
|
const handleHoverChange = (open) => {
|
|
setHovered(open);
|
|
setClicked(false);
|
|
};
|
|
const handleClickChange = (open) => {
|
|
setHovered(false);
|
|
setClicked(open);
|
|
};
|
|
const hoverContent = <div>This is hover content.</div>;
|
|
const clickContent = <div>This is click content.</div>;
|
|
return (
|
|
<Popover
|
|
style={{
|
|
width: 500,
|
|
}}
|
|
content={hoverContent}
|
|
title="Hover title"
|
|
trigger="hover"
|
|
open={hovered}
|
|
onOpenChange={handleHoverChange}
|
|
>
|
|
<Popover
|
|
content={
|
|
<div>
|
|
{clickContent}
|
|
<a onClick={hide}>Close</a>
|
|
</div>
|
|
}
|
|
title="Click title"
|
|
trigger="click"
|
|
open={clicked}
|
|
onOpenChange={handleClickChange}
|
|
>
|
|
<Button>Hover and click / \u60AC\u505C\u5E76\u5355\u51FB</Button>
|
|
</Popover>
|
|
</Popover>
|
|
);
|
|
};
|
|
export default App;
|
|
`,description:"<p>\u4EE5\u4E0B\u793A\u4F8B\u663E\u793A\u5982\u4F55\u521B\u5EFA\u53EF\u60AC\u505C\u548C\u5355\u51FB\u7684\u5F39\u51FA\u7A97\u53E3\u3002</p>"}},{demo:{id:"components-popover-demo-render-panel"},previewerProps:{debug:!0,title:"_InternalPanelDoNotUseOrYouWillBeFired",filename:"components/popover/demo/render-panel.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 { Popover } from 'antd';
|
|
const { _InternalPanelDoNotUseOrYouWillBeFired: InternalPopover } = Popover;
|
|
const content = (
|
|
<div>
|
|
<p>Content</p>
|
|
<p>Content</p>
|
|
</div>
|
|
);
|
|
const App = () => (
|
|
<>
|
|
<InternalPopover content={content} title="Title" />
|
|
<InternalPopover
|
|
content={content}
|
|
title="Title"
|
|
placement="bottomLeft"
|
|
style={{
|
|
width: 250,
|
|
}}
|
|
/>
|
|
</>
|
|
);
|
|
export default App;
|
|
`,description:"<p>\u8C03\u8BD5\u7528\u7EC4\u4EF6\uFF0C\u8BF7\u52FF\u76F4\u63A5\u4F7F\u7528\u3002</p>"}},{demo:{id:"components-popover-demo-wireframe"},previewerProps:{debug:!0,title:"\u7EBF\u6846\u98CE\u683C",filename:"components/popover/demo/wireframe.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 { ConfigProvider, Popover } from 'antd';
|
|
const { _InternalPanelDoNotUseOrYouWillBeFired: InternalPopover } = Popover;
|
|
const content = (
|
|
<div>
|
|
<p>Content</p>
|
|
<p>Content</p>
|
|
</div>
|
|
);
|
|
const App = () => (
|
|
<ConfigProvider
|
|
theme={{
|
|
token: {
|
|
wireframe: true,
|
|
},
|
|
}}
|
|
>
|
|
<InternalPopover content={content} title="Title" />
|
|
<InternalPopover
|
|
content={content}
|
|
title="Title"
|
|
placement="bottomLeft"
|
|
style={{
|
|
width: 250,
|
|
}}
|
|
/>
|
|
</ConfigProvider>
|
|
);
|
|
export default App;
|
|
`,description:"<p>\u7EBF\u6846\u6837\u5F0F\u3002</p>"}},{demo:{id:"components-popover-demo-component-token"},previewerProps:{debug:!0,title:"\u7EC4\u4EF6 Token",filename:"components/popover/demo/component-token.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 { ConfigProvider, Popover } from 'antd';
|
|
import React from 'react';
|
|
const { _InternalPanelDoNotUseOrYouWillBeFired: InternalPopover } = Popover;
|
|
const content = (
|
|
<div>
|
|
<p>Content</p>
|
|
<p>Content</p>
|
|
</div>
|
|
);
|
|
const App = () => (
|
|
<ConfigProvider
|
|
theme={{
|
|
components: {
|
|
Popover: {
|
|
minWidth: 40,
|
|
},
|
|
},
|
|
}}
|
|
>
|
|
<InternalPopover content={content} title="Title" />
|
|
<InternalPopover
|
|
content={content}
|
|
title="Title"
|
|
placement="bottomLeft"
|
|
style={{
|
|
width: 250,
|
|
}}
|
|
/>
|
|
</ConfigProvider>
|
|
);
|
|
export default App;
|
|
`,description:"<p>Component Token Debug.</p>"}}]}),(0,e.tZ)("div",{className:"markdown"},(0,e.tZ)("h2",{id:"api"},(0,e.tZ)(o.Z,{"aria-hidden":"true",tabIndex:"-1",href:"#api",sourceType:"a"},(0,e.tZ)("span",{className:"icon icon-link"})),"API"),(0,e.tZ)(i.Z,{className:"component-api-table"},(0,e.tZ)("thead",null,(0,e.tZ)("tr",null,(0,e.tZ)("th",null,n[5].value),(0,e.tZ)("th",null,n[6].value),(0,e.tZ)("th",null,n[7].value),(0,e.tZ)("th",null,n[8].value),(0,e.tZ)("th",null,n[9].value))),(0,e.tZ)("tbody",null,(0,e.tZ)("tr",null,(0,e.tZ)("td",null,n[10].value),(0,e.tZ)("td",null,n[11].value),(0,e.tZ)("td",null,n[12].value),(0,e.tZ)("td",null,n[13].value),(0,e.tZ)("td",null)),(0,e.tZ)("tr",null,(0,e.tZ)("td",null,n[14].value),(0,e.tZ)("td",null,n[15].value),(0,e.tZ)("td",null,n[16].value),(0,e.tZ)("td",null,n[17].value),(0,e.tZ)("td",null)))),(0,e.tZ)("p",null,n[18].value,(0,e.tZ)(o.Z,{to:"/components/tooltip-cn/#api",sourceType:"Link"},n[19].value),n[20].value),(0,e.tZ)("h2",{id:"\u6CE8\u610F"},(0,e.tZ)(o.Z,{"aria-hidden":"true",tabIndex:"-1",href:"#\u6CE8\u610F",sourceType:"a"},(0,e.tZ)("span",{className:"icon icon-link"})),"\u6CE8\u610F"),(0,e.tZ)("p",null,n[21].value,(0,e.tZ)("code",null,n[22].value),n[23].value,(0,e.tZ)("code",null,n[24].value),n[25].value,(0,e.tZ)("code",null,n[26].value),n[27].value,(0,e.tZ)("code",null,n[28].value),n[29].value,(0,e.tZ)("code",null,n[30].value),n[31].value),(0,e.tZ)("h2",{id:"design-token"},(0,e.tZ)(o.Z,{"aria-hidden":"true",tabIndex:"-1",href:"#design-token",sourceType:"a"},(0,e.tZ)("span",{className:"icon icon-link"})),"Design Token")),(0,e.tZ)(a.Z,{component:"Popover"})))}r.default=d}}]);
|
|
|