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.
299 lines
24 KiB
299 lines
24 KiB
1 year ago
|
"use strict";(self.webpackChunkantd=self.webpackChunkantd||[]).push([[6176],{263005:function(_,r,t){t.r(r);var p=t(502143),m=t(968521),v=t(720719),Z=t(28840),g=t(759907),o=t(828089),f=t(825673),h=t(902068),E=t(574399),b=t(863942),O=t(316073),x=t(24628),P=t(719260),D=t(956140),a=t(127179),c=t(905388),y=t(40428),B=t(606965),T=t(268696),k=t(587302),l=t(424128),C=t(249706),M=t(795127),R=t(116846),A=t(212039),I=t(73024),w=t(553913),u=t(606641),i=t(667294),e=t(370917);function s(){var d=(0,u.eL)(),n=d.texts;return(0,e.tZ)(u.dY,null,(0,e.tZ)(i.Fragment,null,(0,e.tZ)("div",{className:"markdown"},(0,e.tZ)("p",null,n[0].value,(0,e.tZ)("code",null,n[1].value),n[2].value),(0,e.tZ)("h2",{id:"when-to-use"},(0,e.tZ)(l.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[3].value),(0,e.tZ)("h2",{id:"examples"},(0,e.tZ)(l.Z,{"aria-hidden":"true",tabIndex:"-1",href:"#examples",sourceType:"a"},(0,e.tZ)("span",{className:"icon icon-link"})),"Examples")),(0,e.tZ)(c.Z,{items:[{demo:{id:"components-tour-demo-basic"},previewerProps:{title:"Basic",filename:"components/tour/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, { useRef, useState } from 'react';
|
||
|
|
import { Button, Divider, Space, Tour } from 'antd';
|
||
|
|
import { EllipsisOutlined } from '@ant-design/icons';
|
||
|
|
const App = () => {
|
||
|
|
const ref1 = useRef(null);
|
||
|
|
const ref2 = useRef(null);
|
||
|
|
const ref3 = useRef(null);
|
||
|
|
const [open, setOpen] = useState(false);
|
||
|
|
const steps = [
|
||
|
|
{
|
||
|
|
title: 'Upload File',
|
||
|
|
description: 'Put your files here.',
|
||
|
|
cover: (
|
||
|
|
<img
|
||
|
|
alt="tour.png"
|
||
|
|
src="https://user-images.githubusercontent.com/5378891/197385811-55df8480-7ff4-44bd-9d43-a7dade598d70.png"
|
||
|
|
/>
|
||
|
|
),
|
||
|
|
target: () => ref1.current,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: 'Save',
|
||
|
|
description: 'Save your changes.',
|
||
|
|
target: () => ref2.current,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: 'Other Actions',
|
||
|
|
description: 'Click to see other actions.',
|
||
|
|
target: () => ref3.current,
|
||
|
|
},
|
||
|
|
];
|
||
|
|
return (
|
||
|
|
<>
|
||
|
|
<Button type="primary" onClick={() => setOpen(true)}>
|
||
|
|
Begin Tour
|
||
|
|
</Button>
|
||
|
|
|
||
|
|
<Divider />
|
||
|
|
|
||
|
|
<Space>
|
||
|
|
<Button ref={ref1}> Upload</Button>
|
||
|
|
<Button ref={ref2} type="primary">
|
||
|
|
Save
|
||
|
|
</Button>
|
||
|
|
<Button ref={ref3} icon={<EllipsisOutlined />} />
|
||
|
|
</Space>
|
||
|
|
|
||
|
|
<Tour open={open} onClose={() => setOpen(false)} steps={steps} />
|
||
|
|
</>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
export default App;
|
||
|
|
`,description:"<p>The most basic usage.</p>"}},{demo:{id:"components-tour-demo-non-modal"},previewerProps:{title:"Non-modal",filename:"components/tour/demo/non-modal.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, { useRef, useState } from 'react';
|
||
|
|
import { Button, Divider, Space, Tour } from 'antd';
|
||
|
|
import { EllipsisOutlined } from '@ant-design/icons';
|
||
|
|
const App = () => {
|
||
|
|
const ref1 = useRef(null);
|
||
|
|
const ref2 = useRef(null);
|
||
|
|
const ref3 = useRef(null);
|
||
|
|
const [open, setOpen] = useState(false);
|
||
|
|
const steps = [
|
||
|
|
{
|
||
|
|
title: 'Upload File',
|
||
|
|
description: 'Put your files here.',
|
||
|
|
cover: (
|
||
|
|
<img
|
||
|
|
alt="tour.png"
|
||
|
|
src="https://user-images.githubusercontent.com/5378891/197385811-55df8480-7ff4-44bd-9d43-a7dade598d70.png"
|
||
|
|
/>
|
||
|
|
),
|
||
|
|
target: () => ref1.current,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: 'Save',
|
||
|
|
description: 'Save your changes.',
|
||
|
|
target: () => ref2.current,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: 'Other Actions',
|
||
|
|
description: 'Click to see other actions.',
|
||
|
|
target: () => ref3.current,
|
||
|
|
},
|
||
|
|
];
|
||
|
|
return (
|
||
|
|
<>
|
||
|
|
<Button type="primary" onClick={() => setOpen(true)}>
|
||
|
|
Begin non-modal Tour
|
||
|
|
</Button>
|
||
|
|
|
||
|
|
<Divider />
|
||
|
|
|
||
|
|
<Space>
|
||
|
|
<Button ref={ref1}> Upload</Button>
|
||
|
|
<Button ref={ref2} type="primary">
|
||
|
|
Save
|
||
|
|
</Button>
|
||
|
|
<Button ref={ref3} icon={<EllipsisOutlined />} />
|
||
|
|
</Space>
|
||
|
|
|
||
|
|
<Tour open={open} onClose={() => setOpen(false)} mask={false} type="primary" steps={steps} />
|
||
|
|
</>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
export default App;
|
||
|
|
`,description:'<p>Use <code>mask={false}</code> to make Tour non-modal. At the meantime it is recommended to use with <code>type="primary"</code> to emphasize the guide itself.</p>'}},{demo:{id:"components-tour-demo-placement"},previewerProps:{title:"Placement",filename:"components/tour/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 React, { useRef, useState } from 'react';
|
||
|
|
import { Button, Tour } from 'antd';
|
||
|
|
const App = () => {
|
||
|
|
const ref = useRef(null);
|
||
|
|
const [open, setOpen] = useState(false);
|
||
|
|
const steps = [
|
||
|
|
{
|
||
|
|
title: 'Center',
|
||
|
|
description: 'Displayed in the center of screen.',
|
||
|
|
target: null,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: 'Right',
|
||
|
|
description: 'On the right of target.',
|
||
|
|
placement: 'right',
|
||
|
|
target: () => ref.current,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: 'Top',
|
||
|
|
description: 'On the top of target.',
|
||
|
|
placement: 'top',
|
||
|
|
target: () => ref.current,
|
||
|
|
},
|
||
|
|
];
|
||
|
|
return (
|
||
|
|
<>
|
||
|
|
<Button type="primary" onClick={() => setOpen(true)} ref={ref}>
|
||
|
|
Begin Tour
|
||
|
|
</Button>
|
||
|
|
|
||
|
|
<Tour open={open} onClose={() => setOpen(false)} steps={steps} />
|
||
|
|
</>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
export default App;
|
||
|
|
`,description:"<p>Change the placement of the guide relative to the target, there are 12 placements available. When <code>target={null}</code> the guide will show in the center.</p>"}},{demo:{id:"components-tour-demo-mask"},previewerProps:{title:"Custom mask style",filename:"components/tour/demo/mask.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, { useRef, useState } from 'react';
|
||
|
|
import { Button, Divider, Space, Tour } from 'antd';
|
||
|
|
import { EllipsisOutlined } from '@ant-design/icons';
|
||
|
|
const App = () => {
|
||
|
|
const ref1 = useRef(null);
|
||
|
|
const ref2 = useRef(null);
|
||
|
|
const ref3 = useRef(null);
|
||
|
|
const [open, setOpen] = useState(false);
|
||
|
|
const steps = [
|
||
|
|
{
|
||
|
|
title: 'Upload File',
|
||
|
|
description: 'Put your files here.',
|
||
|
|
cover: (
|
||
|
|
<img
|
||
|
|
alt="tour.png"
|
||
|
|
src="https://user-images.githubusercontent.com/5378891/197385811-55df8480-7ff4-44bd-9d43-a7dade598d70.png"
|
||
|
|
/>
|
||
|
|
),
|
||
|
|
target: () => ref1.current,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: 'Save',
|
||
|
|
description: 'Save your changes.',
|
||
|
|
target: () => ref2.current,
|
||
|
|
mask: {
|
||
|
|
style: {
|
||
|
|
boxShadow: 'inset 0 0 15px #fff',
|
||
|
|
},
|
||
|
|
color: 'rgba(40, 0, 255, .4)',
|
||
|
|
},
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: 'Other Actions',
|
||
|
|
description: 'Click to see other actions.',
|
||
|
|
target: () => ref3.current,
|
||
|
|
mask: false,
|
||
|
|
},
|
||
|
|
];
|
||
|
|
return (
|
||
|
|
<>
|
||
|
|
<Button type="primary" onClick={() => setOpen(true)}>
|
||
|
|
Begin Tour
|
||
|
|
</Button>
|
||
|
|
|
||
|
|
<Divider />
|
||
|
|
|
||
|
|
<Space>
|
||
|
|
<Button ref={ref1}> Upload</Button>
|
||
|
|
<Button ref={ref2} type="primary">
|
||
|
|
Save
|
||
|
|
</Button>
|
||
|
|
<Button ref={ref3} icon={<EllipsisOutlined />} />
|
||
|
|
</Space>
|
||
|
|
|
||
|
|
<Tour
|
||
|
|
open={open}
|
||
|
|
onClose={() => setOpen(false)}
|
||
|
|
steps={steps}
|
||
|
|
mask={{
|
||
|
|
style: {
|
||
|
|
boxShadow: 'inset 0 0 15px #333',
|
||
|
|
},
|
||
|
|
color: 'rgba(80, 255, 255, .4)',
|
||
|
|
}}
|
||
|
|
/>
|
||
|
|
</>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
export default App;
|
||
|
|
`,description:"<p>Custom mask style.</p>"}},{demo:{id:"components-tour-demo-indicator"},previewerProps:{title:"Custom indicator",filename:"components/tour/demo/indicator.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 { EllipsisOutlined } from '@ant-design/icons';
|
||
|
|
import { Button, Divider, Space, Tour } from 'antd';
|
||
|
|
import React, { useRef, useState } from 'react';
|
||
|
|
const App = () => {
|
||
|
|
const ref1 = useRef(null);
|
||
|
|
const ref2 = useRef(null);
|
||
|
|
const ref3 = useRef(null);
|
||
|
|
const [open, setOpen] = useState(false);
|
||
|
|
const steps = [
|
||
|
|
{
|
||
|
|
title: 'Upload File',
|
||
|
|
description: 'Put your files here.',
|
||
|
|
target: () => ref1.current,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: 'Save',
|
||
|
|
description: 'Save your changes.',
|
||
|
|
target: () => ref2.current,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: 'Other Actions',
|
||
|
|
description: 'Click to see other actions.',
|
||
|
|
target: () => ref3.current,
|
||
|
|
},
|
||
|
|
];
|
||
|
|
return (
|
||
|
|
<>
|
||
|
|
<Button type="primary" onClick={() => setOpen(true)}>
|
||
|
|
Begin Tour
|
||
|
|
</Button>
|
||
|
|
<Divider />
|
||
|
|
<Space>
|
||
|
|
<Button ref={ref1}>Upload</Button>
|
||
|
|
<Button ref={ref2} type="primary">
|
||
|
|
Save
|
||
|
|
</Button>
|
||
|
|
<Button ref={ref3} icon={<EllipsisOutlined />} />
|
||
|
|
</Space>
|
||
|
|
<Tour
|
||
|
|
open={open}
|
||
|
|
onClose={() => setOpen(false)}
|
||
|
|
steps={steps}
|
||
|
|
indicatorsRender={(current, total) => (
|
||
|
|
<span>
|
||
|
|
{current + 1} / {total}
|
||
|
|
</span>
|
||
|
|
)}
|
||
|
|
/>
|
||
|
|
</>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
export default App;
|
||
|
|
`,description:"<p>Custom indicator.</p>"}},{demo:{id:"components-tour-demo-render-panel"},previewerProps:{debug:!0,title:"_InternalPanelDoNotUseOrYouWillBeFired",filename:"components/tour/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 { Tour } from 'antd';
|
||
|
|
|
||
|
|
/** Test usage. Do not use in your production. */
|
||
|
|
const { _InternalPanelDoNotUseOrYouWillBeFired: InternalPanel } = Tour;
|
||
|
|
export default () => (
|
||
|
|
<div
|
||
|
|
style={{
|
||
|
|
display: 'flex',
|
||
|
|
flexDirection: 'column',
|
||
|
|
rowGap: 16,
|
||
|
|
background: 'rgba(50,0,0,0.65)',
|
||
|
|
padding: 8,
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<InternalPanel title="Hello World!" description="Hello World?!" />
|
||
|
|
<InternalPanel
|
||
|
|
title="Hello World!"
|
||
|
|
description="Hello World?!"
|
||
|
|
cover={
|
||
|
|
<img
|
||
|
|
alt="tour.png"
|
||
|
|
src="https://user-images.githubusercontent.com/5378891/197385811-55df8480-7ff4-44bd-9d43-a7dade598d70.png"
|
||
|
|
/>
|
||
|
|
}
|
||
|
|
current={5}
|
||
|
|
total={7}
|
||
|
|
/>
|
||
|
|
<InternalPanel
|
||
|
|
title="Hello World!"
|
||
|
|
description="Hello World?!"
|
||
|
|
type="primary"
|
||
|
|
current={4}
|
||
|
|
total={5}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
`,description:"<p>Debug usage. Do not use in your production.</p>"}}]}),(0,e.tZ)("div",{className:"markdown"},(0,e.tZ)("h2",{id:"api"},(0,e.tZ)(l.Z,{"aria-hidden":"true",tabIndex:"-1",href:"#api",sourceType:"a"},(0,e.tZ)("span",{className:"icon icon-link"})),"API"),(0,e.tZ)("h3",{id:"tour"},(0,e.tZ)(l.Z,{"aria-hidden":"true",tabIndex:"-1",href:"#tour",sourceType:"a"},(0,e.tZ)("span",{className:"icon icon-link"})),"Tour"),(0,e.tZ)(o.Z,{className:"component-api-table"},(0,e.tZ)("thead",null,(0,e.tZ)("tr",null,(0,e.tZ)("th",null,n[4].value),(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)("tbody",null,(0,e.tZ)("tr",null,(0,e.tZ)("td",null,n[9].value),(0,e.tZ)("td",null,n[10].value),(0,e.tZ)("td",null,(0,e.tZ)("code",null,n[11].value),n[12].value,(0,e.tZ)("code",null,n[13].value)),(0,e.tZ)("td",null,(0,e.tZ)("code",null,n[14].value)),(0,e.tZ)("td",null)),(0,e.tZ)("tr",null,(0,e.tZ)("td",null,n[15].value),(0,e.tZ)("td",null,n[16].value),(0,e.tZ)("td",null,(0,e.tZ)("code",null,n[17].value),n[18].value,(0,e.tZ)("code",null,n[19].value),n[20].value,(0,e.tZ)("code",null,n[21].value),n[22].value,(0,e.tZ)("code",null,n[23].value),n[24].value,(0,e.tZ)("code",null,n[25].value),n[26].value,(0,e.tZ)("code",null,n[27].value),n[28].value,(0,e.tZ)("code",null,n[29].value),n[30].value,(0,e.tZ)("code",null,n[31].value),n[32].value,(0,e.tZ)("code",null,n[33].value),n[34].value,(0,e.tZ)("code",null,n[35].value),n[36].value,(0,e.tZ)("code",null,n[37].value),n[38].value,(0,e.tZ)("code",null,n[39].value)),(0,e.tZ)("td",null,(0,e.tZ)("code",null,n[40].value)),(0,e.tZ)("td",null)),(0,e.tZ)("tr",null,(0,e.tZ)("td",null,n[41].value),(0,e.tZ)("td",null,n[42].value),(0,e.tZ)("td",null,(0,e.tZ)("code",null,n[43].value)),(0,e.tZ)("td",null,n[44].value),(0,e.tZ)("td",null)),(0,e.tZ)("tr",null,(0,e.tZ)("td",null,n[45].value),(0,e.tZ)("td",null,n[46].value),(0,e.tZ)("td",null,(0,e.tZ)("code",null,n[47].value)),(0,e.tZ)("td",null,(0,e.tZ)("code",null,n[48].value)),(0,e.tZ)("td",null)),(0,e.tZ)("tr",null,(0,e.tZ)("td",null,n[49].value),(0,e.tZ)("td",null,n[50].value),(0,e.tZ)("td",null,(0,e.tZ)("code",null,n[51].value),n[52].value,(0,e.tZ)("code",null,n[53].value)),(0,e.tZ)("td",null,(0,e.tZ)("code",null,n[54].value)),(0,e.tZ)("td",null)),(0,e.tZ)("tr",null,(0,e.tZ)("td",null,n[55].value),(0,e.tZ)("td",null,n[56].value),(0,e.tZ)("td",null,(0,e.tZ)("code",null,n[57].value)),(0,e.tZ)("td",null,n[58].value),(0,e.tZ)("td",null)),(0,e.tZ)("tr",null,(0,e.tZ)("td",null,n[59].value),(0,e.tZ)("td",null,n[60].value),(0,e.tZ)("td",null,(0,e.tZ)("code",null,n[61].value)),(0,e.tZ)("td",null,n[62].value),(0,e.tZ)("td",null)),(0,e.tZ)("tr",null,(0,e.tZ)("td",null,n[63].value),(0,e.tZ)("td",null,n[64].value),(0,e.tZ)("td",null,(0,e.tZ)("code",null,n[65].value)),(0,e.tZ)("td",null,n[66].value),(0,e.tZ)("td",null)),(0,e.tZ)("tr",null,(0,e.tZ)("td",null,n[67].value),(0,e.tZ)("td",null,n[68].value),(0,e.tZ)("td",null,(0,e.tZ)("code",null,n[69].value)),(0,e.tZ)("td",null,(0,e.tZ)("code",null,n[70].value)),(0,e.tZ)("td",null,n[71].value)),(0,e.tZ)("tr",null,(0,e.tZ)("td",null,n[72].value),(0,e.tZ)("td",null,n[73].value),(0,e.tZ)("td",null,(0,e.tZ)("code",null,n[74].value)),(0,e.tZ)("td",null,n[75].value),(0,e.tZ)("td",null,n[76].value)),(0,e.tZ)("tr",null,(0,e.tZ)("td",null,n[77].value),(0,e.tZ)("td",null,n[78].value),(0,e.tZ)("td",null,n[79].value),(0,e.tZ)("td",null,n[80].value),(0,e.tZ)("td",null,n[81].value)))),(0,e.tZ)("h3",{id:"tourstep"},(0,e.tZ)(l.Z,{"aria-hidden":"true",tabIndex:"-1",href:"#tourstep",sourceType:"a"},(0,e.tZ)("span",{className:"icon icon-link"})),"TourStep"),(0,e.tZ)(o.Z,{className:"component-api-table"},(0,e.tZ)("thead",null,(0,e.tZ)("tr",null,(0,e.tZ)("th",null,n[82].value),(0,e.tZ)("th",null,n[83].value),(0,e.tZ)("th",null,n[84].value),(0,e.tZ)("th",null,n[85].value),(0,e.tZ)("th",null,n[86].value))),(0,e.tZ)("tbody",null,(0,e.tZ)("tr",null,(0,e.tZ)("td",null,n[87].value),(0,e.tZ)("td",null,n[88].value),(0,e.tZ)("td",null,(0,e.tZ)("code",null,n[89].value),n[90].value
|