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
25 KiB
399 lines
25 KiB
"use strict";(self.webpackChunkantd=self.webpackChunkantd||[]).push([[4904],{169720: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),T=t(606965),D=t(268696),A=t(587302),o=t(424128),O=t(249706),y=t(795127),L=t(116846),M=t(212039),Z=t(73024),R=t(553913),c=t(606641),l=t(667294),e=t(370917);function p(){var d=(0,c.eL)(),n=d.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:"when-to-use"},(0,e.tZ)(o.Z,{"aria-hidden":"true",tabIndex:"-1",href:"#when-to-use",sourceType:"a"},(0,e.tZ)("span",{className:"icon icon-link"})),"When To Use"),(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)("code",null,n[5].value),n[6].value),(0,e.tZ)("h2",{id:"examples"},(0,e.tZ)(o.Z,{"aria-hidden":"true",tabIndex:"-1",href:"#examples",sourceType:"a"},(0,e.tZ)("span",{className:"icon icon-link"})),"Examples")),(0,e.tZ)(s.Z,{items:[{demo:{id:"components-popover-demo-basic"},previewerProps:{title:"Basic",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>The most basic example. The size of the floating layer depends on the contents region.</p>",style:`.ant-popover-content p {
|
|
margin: 0;
|
|
}`}},{demo:{id:"components-popover-demo-triggertype"},previewerProps:{title:"Three ways to trigger",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>Mouse to click, focus and move in.</p>"}},{demo:{id:"components-popover-demo-placement"},previewerProps:{title:"Placement",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>There are 12 <code>placement</code> options available.</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:"Arrow",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>Hide arrow by <code>arrow</code>.</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:"Controlling the close of the dialog",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>Use <code>open</code> prop to control the display of the card.</p>"}},{demo:{id:"components-popover-demo-hover-with-click"},previewerProps:{title:"Hover with click popover",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>The following example shows how to create a popover which can be hovered and clicked.</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>Debug usage. Do not use in your production.</p>"}},{demo:{id:"components-popover-demo-wireframe"},previewerProps:{debug:!0,title:"Wireframe",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>Wireframe style.</p>"}},{demo:{id:"components-popover-demo-component-token"},previewerProps:{debug:!0,title:"Component 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[7].value),(0,e.tZ)("th",null,n[8].value),(0,e.tZ)("th",null,n[9].value),(0,e.tZ)("th",null,n[10].value),(0,e.tZ)("th",null,n[11].value))),(0,e.tZ)("tbody",null,(0,e.tZ)("tr",null,(0,e.tZ)("td",null,n[12].value),(0,e.tZ)("td",null,n[13].value),(0,e.tZ)("td",null,n[14].value),(0,e.tZ)("td",null,n[15].value),(0,e.tZ)("td",null)),(0,e.tZ)("tr",null,(0,e.tZ)("td",null,n[16].value),(0,e.tZ)("td",null,n[17].value),(0,e.tZ)("td",null,n[18].value),(0,e.tZ)("td",null,n[19].value),(0,e.tZ)("td",null)))),(0,e.tZ)("p",null,n[20].value,(0,e.tZ)(o.Z,{to:"/components/tooltip/#api",sourceType:"Link"},n[21].value),n[22].value),(0,e.tZ)("h2",{id:"note"},(0,e.tZ)(o.Z,{"aria-hidden":"true",tabIndex:"-1",href:"#note",sourceType:"a"},(0,e.tZ)("span",{className:"icon icon-link"})),"Note"),(0,e.tZ)("p",null,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)("code",null,n[32].value),n[33].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=p}}]);
|
|
|