mirror of
https://github.com/ant-design/ant-design.git
synced 2024-11-27 20:49:53 +08:00
docs: Tour gap prop (#50574)
Co-authored-by: afc163 <afc163@gmail.com> Co-authored-by: KAROS\81948 <chenwenfan@harmonycloud.cn>
This commit is contained in:
IsKaros
GitHub
parent
9570ae03a4
commit
612d5c0702
@ -172,6 +172,366 @@ Array [
|
||||
|
||||
exports[`renders components/tour/demo/basic.tsx extend context correctly 2`] = `[]`;
|
||||
|
||||
exports[`renders components/tour/demo/gap.tsx extend context correctly 1`] = `
|
||||
<div>
|
||||
<button
|
||||
class="ant-btn ant-btn-primary"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
Begin Tour
|
||||
</span>
|
||||
</button>
|
||||
<div
|
||||
class="ant-space ant-space-vertical ant-space-gap-row-small ant-space-gap-col-small"
|
||||
style="display: flex; margin-top: 12px;"
|
||||
>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
>
|
||||
<div
|
||||
class="ant-row"
|
||||
>
|
||||
<div
|
||||
class="ant-col ant-col-6"
|
||||
>
|
||||
<span
|
||||
class="ant-typography"
|
||||
>
|
||||
Radius:
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="ant-col ant-col-12"
|
||||
>
|
||||
<div
|
||||
class="ant-slider ant-slider-horizontal"
|
||||
>
|
||||
<div
|
||||
class="ant-slider-rail"
|
||||
/>
|
||||
<div
|
||||
class="ant-slider-track"
|
||||
style="left: 0%; width: 8%;"
|
||||
/>
|
||||
<div
|
||||
class="ant-slider-step"
|
||||
/>
|
||||
<div
|
||||
aria-disabled="false"
|
||||
aria-orientation="horizontal"
|
||||
aria-valuemax="100"
|
||||
aria-valuemin="0"
|
||||
aria-valuenow="8"
|
||||
class="ant-slider-handle"
|
||||
role="slider"
|
||||
style="left: 8%; transform: translateX(-50%);"
|
||||
tabindex="0"
|
||||
/>
|
||||
<div
|
||||
class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-slider-tooltip ant-tooltip-placement-top"
|
||||
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
|
||||
>
|
||||
<div
|
||||
class="ant-tooltip-arrow"
|
||||
style="position: absolute; bottom: 0px; left: 0px;"
|
||||
/>
|
||||
<div
|
||||
class="ant-tooltip-content"
|
||||
>
|
||||
<div
|
||||
class="ant-tooltip-inner"
|
||||
role="tooltip"
|
||||
>
|
||||
8
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
>
|
||||
<div
|
||||
class="ant-row"
|
||||
>
|
||||
<div
|
||||
class="ant-col ant-col-6"
|
||||
>
|
||||
<span
|
||||
class="ant-typography"
|
||||
>
|
||||
offset:
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="ant-col ant-col-12"
|
||||
>
|
||||
<div
|
||||
class="ant-slider ant-slider-horizontal"
|
||||
>
|
||||
<div
|
||||
class="ant-slider-rail"
|
||||
/>
|
||||
<div
|
||||
class="ant-slider-track"
|
||||
style="left: 0%; width: 4%;"
|
||||
/>
|
||||
<div
|
||||
class="ant-slider-step"
|
||||
/>
|
||||
<div
|
||||
aria-disabled="false"
|
||||
aria-orientation="horizontal"
|
||||
aria-valuemax="50"
|
||||
aria-valuemin="0"
|
||||
aria-valuenow="2"
|
||||
class="ant-slider-handle"
|
||||
role="slider"
|
||||
style="left: 4%; transform: translateX(-50%);"
|
||||
tabindex="0"
|
||||
/>
|
||||
<div
|
||||
class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-slider-tooltip ant-tooltip-placement-top"
|
||||
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
|
||||
>
|
||||
<div
|
||||
class="ant-tooltip-arrow"
|
||||
style="position: absolute; bottom: 0px; left: 0px;"
|
||||
/>
|
||||
<div
|
||||
class="ant-tooltip-content"
|
||||
>
|
||||
<div
|
||||
class="ant-tooltip-inner"
|
||||
role="tooltip"
|
||||
>
|
||||
2
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
>
|
||||
<div
|
||||
class="ant-row"
|
||||
>
|
||||
<div
|
||||
class="ant-col ant-col-6"
|
||||
>
|
||||
<span
|
||||
class="ant-typography"
|
||||
>
|
||||
Horizontal offset:
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="ant-col ant-col-12"
|
||||
>
|
||||
<div
|
||||
class="ant-slider ant-slider-horizontal"
|
||||
>
|
||||
<div
|
||||
class="ant-slider-rail"
|
||||
/>
|
||||
<div
|
||||
class="ant-slider-track"
|
||||
style="left: 0%; width: 4%;"
|
||||
/>
|
||||
<div
|
||||
class="ant-slider-step"
|
||||
/>
|
||||
<div
|
||||
aria-disabled="false"
|
||||
aria-orientation="horizontal"
|
||||
aria-valuemax="50"
|
||||
aria-valuemin="0"
|
||||
aria-valuenow="2"
|
||||
class="ant-slider-handle"
|
||||
role="slider"
|
||||
style="left: 4%; transform: translateX(-50%);"
|
||||
tabindex="0"
|
||||
/>
|
||||
<div
|
||||
class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-slider-tooltip ant-tooltip-placement-top"
|
||||
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
|
||||
>
|
||||
<div
|
||||
class="ant-tooltip-arrow"
|
||||
style="position: absolute; bottom: 0px; left: 0px;"
|
||||
/>
|
||||
<div
|
||||
class="ant-tooltip-content"
|
||||
>
|
||||
<div
|
||||
class="ant-tooltip-inner"
|
||||
role="tooltip"
|
||||
>
|
||||
2
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
>
|
||||
<div
|
||||
class="ant-row"
|
||||
>
|
||||
<div
|
||||
class="ant-col ant-col-6"
|
||||
>
|
||||
<span
|
||||
class="ant-typography"
|
||||
>
|
||||
Vertical offset:
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="ant-col ant-col-12"
|
||||
>
|
||||
<div
|
||||
class="ant-slider ant-slider-horizontal"
|
||||
>
|
||||
<div
|
||||
class="ant-slider-rail"
|
||||
/>
|
||||
<div
|
||||
class="ant-slider-track"
|
||||
style="left: 0%; width: 4%;"
|
||||
/>
|
||||
<div
|
||||
class="ant-slider-step"
|
||||
/>
|
||||
<div
|
||||
aria-disabled="false"
|
||||
aria-orientation="horizontal"
|
||||
aria-valuemax="50"
|
||||
aria-valuemin="0"
|
||||
aria-valuenow="2"
|
||||
class="ant-slider-handle"
|
||||
role="slider"
|
||||
style="left: 4%; transform: translateX(-50%);"
|
||||
tabindex="0"
|
||||
/>
|
||||
<div
|
||||
class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-slider-tooltip ant-tooltip-placement-top"
|
||||
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
|
||||
>
|
||||
<div
|
||||
class="ant-tooltip-arrow"
|
||||
style="position: absolute; bottom: 0px; left: 0px;"
|
||||
/>
|
||||
<div
|
||||
class="ant-tooltip-content"
|
||||
>
|
||||
<div
|
||||
class="ant-tooltip-inner"
|
||||
role="tooltip"
|
||||
>
|
||||
2
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-tour ant-tour-placement-bottom"
|
||||
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1001;"
|
||||
>
|
||||
<div
|
||||
class="ant-tour-arrow"
|
||||
style="position: absolute; top: 0px; left: 0px;"
|
||||
/>
|
||||
<div
|
||||
class="ant-tour-content"
|
||||
>
|
||||
<div
|
||||
class="ant-tour-inner"
|
||||
>
|
||||
<button
|
||||
class="ant-tour-close"
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
aria-label="close"
|
||||
class="anticon anticon-close ant-tour-close-icon"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="close"
|
||||
fill="currentColor"
|
||||
fill-rule="evenodd"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M799.86 166.31c.02 0 .04.02.08.06l57.69 57.7c.04.03.05.05.06.08a.12.12 0 010 .06c0 .03-.02.05-.06.09L569.93 512l287.7 287.7c.04.04.05.06.06.09a.12.12 0 010 .07c0 .02-.02.04-.06.08l-57.7 57.69c-.03.04-.05.05-.07.06a.12.12 0 01-.07 0c-.03 0-.05-.02-.09-.06L512 569.93l-287.7 287.7c-.04.04-.06.05-.09.06a.12.12 0 01-.07 0c-.02 0-.04-.02-.08-.06l-57.69-57.7c-.04-.03-.05-.05-.06-.07a.12.12 0 010-.07c0-.03.02-.05.06-.09L454.07 512l-287.7-287.7c-.04-.04-.05-.06-.06-.09a.12.12 0 010-.07c0-.02.02-.04.06-.08l57.7-57.69c.03-.04.05-.05.07-.06a.12.12 0 01.07 0c.03 0 .05.02.09.06L512 454.07l287.7-287.7c.04-.04.06-.05.09-.06a.12.12 0 01.07 0z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</button>
|
||||
<div
|
||||
class="ant-tour-cover"
|
||||
>
|
||||
<img
|
||||
alt="tour.png"
|
||||
src="https://user-images.githubusercontent.com/5378891/197385811-55df8480-7ff4-44bd-9d43-a7dade598d70.png"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="ant-tour-header"
|
||||
>
|
||||
<div
|
||||
class="ant-tour-title"
|
||||
>
|
||||
Upload File
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-tour-description"
|
||||
>
|
||||
Put your files here.
|
||||
</div>
|
||||
<div
|
||||
class="ant-tour-footer"
|
||||
>
|
||||
<div
|
||||
class="ant-tour-buttons"
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-primary ant-btn-sm ant-tour-next-btn"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
Finish
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`renders components/tour/demo/gap.tsx extend context correctly 2`] = `[]`;
|
||||
|
||||
exports[`renders components/tour/demo/indicator.tsx extend context correctly 1`] = `
|
||||
Array [
|
||||
<button
|
||||
|
||||
@ -77,6 +77,208 @@ Array [
|
||||
]
|
||||
`;
|
||||
|
||||
exports[`renders components/tour/demo/gap.tsx correctly 1`] = `
|
||||
<div>
|
||||
<button
|
||||
class="ant-btn ant-btn-primary"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
Begin Tour
|
||||
</span>
|
||||
</button>
|
||||
<div
|
||||
class="ant-space ant-space-vertical ant-space-gap-row-small ant-space-gap-col-small"
|
||||
style="display:flex;margin-top:12px"
|
||||
>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
>
|
||||
<div
|
||||
class="ant-row"
|
||||
>
|
||||
<div
|
||||
class="ant-col ant-col-6"
|
||||
>
|
||||
<span
|
||||
class="ant-typography"
|
||||
>
|
||||
Radius:
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="ant-col ant-col-12"
|
||||
>
|
||||
<div
|
||||
class="ant-slider ant-slider-horizontal"
|
||||
>
|
||||
<div
|
||||
class="ant-slider-rail"
|
||||
/>
|
||||
<div
|
||||
class="ant-slider-track"
|
||||
style="left:0%;width:8%"
|
||||
/>
|
||||
<div
|
||||
class="ant-slider-step"
|
||||
/>
|
||||
<div
|
||||
aria-disabled="false"
|
||||
aria-orientation="horizontal"
|
||||
aria-valuemax="100"
|
||||
aria-valuemin="0"
|
||||
aria-valuenow="8"
|
||||
class="ant-slider-handle"
|
||||
role="slider"
|
||||
style="left:8%;transform:translateX(-50%)"
|
||||
tabindex="0"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
>
|
||||
<div
|
||||
class="ant-row"
|
||||
>
|
||||
<div
|
||||
class="ant-col ant-col-6"
|
||||
>
|
||||
<span
|
||||
class="ant-typography"
|
||||
>
|
||||
offset:
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="ant-col ant-col-12"
|
||||
>
|
||||
<div
|
||||
class="ant-slider ant-slider-horizontal"
|
||||
>
|
||||
<div
|
||||
class="ant-slider-rail"
|
||||
/>
|
||||
<div
|
||||
class="ant-slider-track"
|
||||
style="left:0%;width:4%"
|
||||
/>
|
||||
<div
|
||||
class="ant-slider-step"
|
||||
/>
|
||||
<div
|
||||
aria-disabled="false"
|
||||
aria-orientation="horizontal"
|
||||
aria-valuemax="50"
|
||||
aria-valuemin="0"
|
||||
aria-valuenow="2"
|
||||
class="ant-slider-handle"
|
||||
role="slider"
|
||||
style="left:4%;transform:translateX(-50%)"
|
||||
tabindex="0"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
>
|
||||
<div
|
||||
class="ant-row"
|
||||
>
|
||||
<div
|
||||
class="ant-col ant-col-6"
|
||||
>
|
||||
<span
|
||||
class="ant-typography"
|
||||
>
|
||||
Horizontal offset:
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="ant-col ant-col-12"
|
||||
>
|
||||
<div
|
||||
class="ant-slider ant-slider-horizontal"
|
||||
>
|
||||
<div
|
||||
class="ant-slider-rail"
|
||||
/>
|
||||
<div
|
||||
class="ant-slider-track"
|
||||
style="left:0%;width:4%"
|
||||
/>
|
||||
<div
|
||||
class="ant-slider-step"
|
||||
/>
|
||||
<div
|
||||
aria-disabled="false"
|
||||
aria-orientation="horizontal"
|
||||
aria-valuemax="50"
|
||||
aria-valuemin="0"
|
||||
aria-valuenow="2"
|
||||
class="ant-slider-handle"
|
||||
role="slider"
|
||||
style="left:4%;transform:translateX(-50%)"
|
||||
tabindex="0"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
>
|
||||
<div
|
||||
class="ant-row"
|
||||
>
|
||||
<div
|
||||
class="ant-col ant-col-6"
|
||||
>
|
||||
<span
|
||||
class="ant-typography"
|
||||
>
|
||||
Vertical offset:
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="ant-col ant-col-12"
|
||||
>
|
||||
<div
|
||||
class="ant-slider ant-slider-horizontal"
|
||||
>
|
||||
<div
|
||||
class="ant-slider-rail"
|
||||
/>
|
||||
<div
|
||||
class="ant-slider-track"
|
||||
style="left:0%;width:4%"
|
||||
/>
|
||||
<div
|
||||
class="ant-slider-step"
|
||||
/>
|
||||
<div
|
||||
aria-disabled="false"
|
||||
aria-orientation="horizontal"
|
||||
aria-valuemax="50"
|
||||
aria-valuemin="0"
|
||||
aria-valuenow="2"
|
||||
class="ant-slider-handle"
|
||||
role="slider"
|
||||
style="left:4%;transform:translateX(-50%)"
|
||||
tabindex="0"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`renders components/tour/demo/indicator.tsx correctly 1`] = `
|
||||
Array [
|
||||
<button
|
||||
|
||||
@ -430,6 +430,169 @@ exports[`Tour custom step pre btn & next btn className & style 1`] = `
|
||||
|
||||
exports[`Tour rtl render component should be rendered correctly in RTL direction 1`] = `null`;
|
||||
|
||||
exports[`Tour should support gap.offset 1`] = `
|
||||
<body>
|
||||
<div>
|
||||
<button
|
||||
type="button"
|
||||
>
|
||||
Show
|
||||
</button>
|
||||
<div
|
||||
class="ant-tour ant-tour-placement-bottom"
|
||||
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1001;"
|
||||
>
|
||||
<div
|
||||
class="ant-tour-arrow"
|
||||
style="position: absolute; top: 0px; left: 0px;"
|
||||
/>
|
||||
<div
|
||||
class="ant-tour-content"
|
||||
>
|
||||
<div
|
||||
class="ant-tour-inner"
|
||||
>
|
||||
<button
|
||||
class="ant-tour-close"
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
aria-label="close"
|
||||
class="anticon anticon-close ant-tour-close-icon"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="close"
|
||||
fill="currentColor"
|
||||
fill-rule="evenodd"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M799.86 166.31c.02 0 .04.02.08.06l57.69 57.7c.04.03.05.05.06.08a.12.12 0 010 .06c0 .03-.02.05-.06.09L569.93 512l287.7 287.7c.04.04.05.06.06.09a.12.12 0 010 .07c0 .02-.02.04-.06.08l-57.7 57.69c-.03.04-.05.05-.07.06a.12.12 0 01-.07 0c-.03 0-.05-.02-.09-.06L512 569.93l-287.7 287.7c-.04.04-.06.05-.09.06a.12.12 0 01-.07 0c-.02 0-.04-.02-.08-.06l-57.69-57.7c-.04-.03-.05-.05-.06-.07a.12.12 0 010-.07c0-.03.02-.05.06-.09L454.07 512l-287.7-287.7c-.04-.04-.05-.06-.06-.09a.12.12 0 010-.07c0-.02.02-.04.06-.08l57.7-57.69c.03-.04.05-.05.07-.06a.12.12 0 01.07 0c.03 0 .05.02.09.06L512 454.07l287.7-287.7c.04-.04.06-.05.09-.06a.12.12 0 01.07 0z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</button>
|
||||
<div
|
||||
class="ant-tour-header"
|
||||
>
|
||||
<div
|
||||
class="ant-tour-title"
|
||||
>
|
||||
Show in Center
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-tour-description"
|
||||
>
|
||||
Here is the content of Tour.
|
||||
</div>
|
||||
<div
|
||||
class="ant-tour-footer"
|
||||
>
|
||||
<div
|
||||
class="ant-tour-buttons"
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-primary ant-btn-sm ant-tour-next-btn"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
Finish
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div
|
||||
class="ant-tour-mask"
|
||||
style="position: fixed; left: 0px; right: 0px; top: 0px; bottom: 0px; z-index: 1001; pointer-events: none;"
|
||||
>
|
||||
<svg
|
||||
style="width: 100%; height: 100%;"
|
||||
>
|
||||
<defs>
|
||||
<mask
|
||||
id="ant-tour-mask-test-id"
|
||||
>
|
||||
<rect
|
||||
fill="white"
|
||||
height="100vh"
|
||||
width="100vw"
|
||||
x="0"
|
||||
y="0"
|
||||
/>
|
||||
<rect
|
||||
class="ant-tour-placeholder-animated"
|
||||
fill="black"
|
||||
height="200"
|
||||
rx="2"
|
||||
width="250"
|
||||
x="90"
|
||||
y="190"
|
||||
/>
|
||||
</mask>
|
||||
</defs>
|
||||
<rect
|
||||
fill="rgba(0,0,0,0.5)"
|
||||
height="100%"
|
||||
mask="url(#ant-tour-mask-test-id)"
|
||||
width="100%"
|
||||
x="0"
|
||||
y="0"
|
||||
/>
|
||||
<rect
|
||||
fill="transparent"
|
||||
height="190"
|
||||
pointer-events="auto"
|
||||
width="100%"
|
||||
x="0"
|
||||
y="0"
|
||||
/>
|
||||
<rect
|
||||
fill="transparent"
|
||||
height="100%"
|
||||
pointer-events="auto"
|
||||
width="90"
|
||||
x="0"
|
||||
y="0"
|
||||
/>
|
||||
<rect
|
||||
fill="transparent"
|
||||
height="calc(100vh - 390px)"
|
||||
pointer-events="auto"
|
||||
width="100%"
|
||||
x="0"
|
||||
y="390"
|
||||
/>
|
||||
<rect
|
||||
fill="transparent"
|
||||
height="100%"
|
||||
pointer-events="auto"
|
||||
width="calc(100vw - 340px)"
|
||||
x="340"
|
||||
y="0"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div
|
||||
class="ant-tour-target-placeholder"
|
||||
style="left: 90px; top: 190px; width: 250px; height: 200px; position: fixed; pointer-events: none;"
|
||||
/>
|
||||
</div>
|
||||
</body>
|
||||
`;
|
||||
|
||||
exports[`Tour single 1`] = `
|
||||
<body>
|
||||
<div>
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
/* eslint-disable react/no-unstable-nested-components */
|
||||
import React, { useEffect, useRef } from 'react';
|
||||
import { spyElementPrototypes } from 'rc-util/lib/test/domHook';
|
||||
|
||||
import Tour from '..';
|
||||
import mountTest from '../../../tests/shared/mountTest';
|
||||
@ -7,6 +8,24 @@ import rtlTest from '../../../tests/shared/rtlTest';
|
||||
import { fireEvent, render, screen } from '../../../tests/utils';
|
||||
import type { TourProps } from '../interface';
|
||||
|
||||
const mockBtnRect = (
|
||||
rect: { x: number; y: number; width: number; height: number },
|
||||
scrollIntoViewCb?: () => void,
|
||||
) => {
|
||||
spyElementPrototypes(HTMLButtonElement, {
|
||||
getBoundingClientRect: {
|
||||
get(): any {
|
||||
return () => ({ ...rect, left: rect.x, top: rect.y });
|
||||
},
|
||||
},
|
||||
scrollIntoView: {
|
||||
get(): any {
|
||||
scrollIntoViewCb?.();
|
||||
return (val: boolean | ScrollIntoViewOptions) => val;
|
||||
},
|
||||
},
|
||||
});
|
||||
};
|
||||
describe('Tour', () => {
|
||||
mountTest(Tour);
|
||||
rtlTest(Tour);
|
||||
@ -590,6 +609,86 @@ describe('Tour', () => {
|
||||
expect(onClose).toHaveBeenLastCalledWith(1);
|
||||
});
|
||||
|
||||
it('should support gap.radius', () => {
|
||||
const App: React.FC<{ gap: TourProps['gap'] }> = ({ gap }) => {
|
||||
const ref = useRef<HTMLButtonElement>(null);
|
||||
const [show, setShow] = React.useState<boolean>();
|
||||
const steps: TourProps['steps'] = [
|
||||
{
|
||||
title: 'Show in Center',
|
||||
description: 'Here is the content of Tour.',
|
||||
target: () => ref.current!,
|
||||
},
|
||||
];
|
||||
return (
|
||||
<>
|
||||
<button type="button" onClick={() => setShow(true)} ref={ref}>
|
||||
Show
|
||||
</button>
|
||||
|
||||
<Tour open={show} steps={steps} gap={gap} />
|
||||
</>
|
||||
);
|
||||
};
|
||||
const { rerender, baseElement } = render(<App gap={{ radius: 4 }} />);
|
||||
fireEvent.click(screen.getByRole('button', { name: 'Show' }));
|
||||
|
||||
expect(baseElement.querySelector('.ant-tour-placeholder-animated')).toBeTruthy();
|
||||
expect(baseElement.querySelector('.ant-tour-placeholder-animated')).toHaveAttribute('rx', '4');
|
||||
rerender(<App gap={{ radius: 0 }} />);
|
||||
fireEvent.click(screen.getByRole('button', { name: 'Show' }));
|
||||
expect(baseElement.querySelector('.ant-tour-placeholder-animated')).toBeTruthy();
|
||||
expect(baseElement.querySelector('.ant-tour-placeholder-animated')).toHaveAttribute('rx', '0');
|
||||
});
|
||||
it('should support gap.offset', () => {
|
||||
const gap = { offset: 10 };
|
||||
const pos = { x: 100, y: 200, width: 230, height: 180 };
|
||||
mockBtnRect(pos);
|
||||
const App: React.FC = () => {
|
||||
const ref = useRef<HTMLButtonElement>(null);
|
||||
const [show, setShow] = React.useState<boolean>();
|
||||
const steps: TourProps['steps'] = [
|
||||
{
|
||||
title: 'Show in Center',
|
||||
description: 'Here is the content of Tour.',
|
||||
target: () => ref.current!,
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<>
|
||||
<button type="button" onClick={() => setShow(true)} ref={ref}>
|
||||
Show
|
||||
</button>
|
||||
|
||||
<Tour steps={steps} gap={gap} open={show} />
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
const { baseElement } = render(<App />);
|
||||
const targetBtn = screen.getByRole('button', { name: 'Show' });
|
||||
fireEvent.click(targetBtn);
|
||||
|
||||
expect(baseElement.querySelector('.ant-tour-placeholder-animated')).toHaveAttribute(
|
||||
'width',
|
||||
String(pos.width + gap.offset * 2),
|
||||
);
|
||||
expect(baseElement.querySelector('.ant-tour-placeholder-animated')).toHaveAttribute(
|
||||
'height',
|
||||
String(pos.height + gap.offset * 2),
|
||||
);
|
||||
expect(baseElement.querySelector('.ant-tour-placeholder-animated')).toHaveAttribute(
|
||||
'x',
|
||||
String(pos.x - gap.offset),
|
||||
);
|
||||
expect(baseElement.querySelector('.ant-tour-placeholder-animated')).toHaveAttribute(
|
||||
'y',
|
||||
String(pos.y - gap.offset),
|
||||
);
|
||||
|
||||
expect(baseElement).toMatchSnapshot();
|
||||
});
|
||||
// This test is for PurePanel which means safe to remove.
|
||||
describe('PurePanel', () => {
|
||||
const PurePanel = Tour._InternalPanelDoNotUseOrYouWillBeFired;
|
||||
|
||||
11
components/tour/demo/gap.md
Normal file
11
components/tour/demo/gap.md
Normal file
@ -0,0 +1,11 @@
|
||||
## zh-CN
|
||||
|
||||
使用 `gap` 参数来控制高亮区域的边距和圆角。
|
||||
|
||||
- `5.9.0` 之前不支持单独设置两个方向上的边距和数组类型的 `offset` 参数。
|
||||
|
||||
## en-US
|
||||
|
||||
Using `gap` to control the radius of highlight area and the offset between highlight area and the element.
|
||||
|
||||
- Setting offset in two directions individually and `offset` with array type is not supported until `5.9.0`.
|
||||
100
components/tour/demo/gap.tsx
Normal file
100
components/tour/demo/gap.tsx
Normal file
@ -0,0 +1,100 @@
|
||||
import React, { useRef, useState } from 'react';
|
||||
import { Button, Col, Row, Slider, Space, Tour, Typography } from 'antd';
|
||||
import type { TourProps } from 'antd';
|
||||
|
||||
const { Text } = Typography;
|
||||
|
||||
const App: React.FC = () => {
|
||||
const tourNodeRef = useRef(null);
|
||||
const [radius, setRadius] = useState(8);
|
||||
const [offsetX, setOffsetX] = useState(2);
|
||||
const [offsetY, setOffsetY] = useState(2);
|
||||
const [offset, setOffset] = useState(2);
|
||||
const [open, setOpen] = useState(false);
|
||||
const [offsetDirection, setOffsetDirection] = useState<'both' | 'individual'>('individual');
|
||||
|
||||
const steps: TourProps['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: () => tourNodeRef.current,
|
||||
},
|
||||
];
|
||||
|
||||
const offsetGap =
|
||||
offsetDirection === 'both'
|
||||
? { offset }
|
||||
: {
|
||||
offset: [offsetX, offsetY] as [number, number],
|
||||
};
|
||||
return (
|
||||
<div ref={tourNodeRef}>
|
||||
<Button type="primary" onClick={() => setOpen(true)}>
|
||||
Begin Tour
|
||||
</Button>
|
||||
<Space style={{ display: 'flex', marginTop: 12 }} direction="vertical">
|
||||
<Row>
|
||||
<Col span={6}>
|
||||
<Text>Radius:</Text>
|
||||
</Col>
|
||||
<Col span={12}>
|
||||
<Slider value={radius} onChange={(val) => val && setRadius(val)} />
|
||||
</Col>
|
||||
</Row>
|
||||
<Row>
|
||||
<Col span={6}>
|
||||
<Text> offset:</Text>
|
||||
</Col>
|
||||
<Col span={12}>
|
||||
<Slider
|
||||
value={offset}
|
||||
max={50}
|
||||
onChange={(val) => val && setOffset(val)}
|
||||
onFocus={() => setOffsetDirection('both')}
|
||||
/>
|
||||
</Col>
|
||||
</Row>
|
||||
<Row>
|
||||
<Col span={6}>
|
||||
<Text>Horizontal offset:</Text>
|
||||
</Col>
|
||||
<Col span={12}>
|
||||
<Slider
|
||||
value={offsetX}
|
||||
max={50}
|
||||
onChange={(val) => val && setOffsetX(val)}
|
||||
onFocus={() => setOffsetDirection('individual')}
|
||||
/>
|
||||
</Col>
|
||||
</Row>
|
||||
<Row>
|
||||
<Col span={6}>
|
||||
<Text>Vertical offset:</Text>
|
||||
</Col>
|
||||
<Col span={12}>
|
||||
<Slider
|
||||
value={offsetY}
|
||||
max={50}
|
||||
onChange={(val) => val && setOffsetY(val)}
|
||||
onFocus={() => setOffsetDirection('individual')}
|
||||
/>
|
||||
</Col>
|
||||
</Row>
|
||||
</Space>
|
||||
<Tour
|
||||
open={open}
|
||||
onClose={() => setOpen(false)}
|
||||
steps={steps}
|
||||
gap={{ ...offsetGap, radius }}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default App;
|
||||
@ -22,6 +22,7 @@ Use when you want to guide users through a product.
|
||||
<code src="./demo/placement.tsx">Placement</code>
|
||||
<code src="./demo/mask.tsx">Custom mask style</code>
|
||||
<code src="./demo/indicator.tsx">Custom indicator</code>
|
||||
<code src="./demo/gap.tsx">Custom highlighted area style</code>
|
||||
<code src="./demo/render-panel.tsx" debug>\_InternalPanelDoNotUseOrYouWillBeFired</code>
|
||||
|
||||
## API
|
||||
@ -35,6 +36,7 @@ Common props ref：[Common props](/docs/react/common-props)
|
||||
| arrow | Whether to show the arrow, including the configuration whether to point to the center of the element | `boolean`\|`{ pointAtCenter: boolean}` | `true` | |
|
||||
| closeIcon | Customize close icon | `React.ReactNode` | `true` | 5.9.0 |
|
||||
| disabledInteraction | Disable interaction on highlighted area. | `boolean` | `false` | 5.13.0 |
|
||||
| gap | Control the radius of the highlighted area and the offset between highlighted area and the element. | `{ offset?: number \| [number, number]; radius?: number }` | `{ offset?: 6 ; radius?: 2 }` | 5.0.0 (array type `offset`: 5.9.0) |
|
||||
| placement | Position of the guide card relative to the target element | `center` `left` `leftTop` `leftBottom` `right` `rightTop` `rightBottom` `top` `topLeft` `topRight` `bottom` `bottomLeft` `bottomRight` | `bottom` | |
|
||||
| onClose | Callback function on shutdown | `Function` | - | |
|
||||
| mask | Whether to enable masking, change mask style and fill color by pass custom props | `boolean \| { style?: React.CSSProperties; color?: string; }` | `true` | |
|
||||
|
||||
@ -23,6 +23,7 @@ tag: 5.0.0
|
||||
<code src="./demo/placement.tsx">位置</code>
|
||||
<code src="./demo/mask.tsx">自定义遮罩样式</code>
|
||||
<code src="./demo/indicator.tsx">自定义指示器</code>
|
||||
<code src="./demo/gap.tsx">自定义高亮区域的样式</code>
|
||||
<code src="./demo/render-panel.tsx" debug>\_InternalPanelDoNotUseOrYouWillBeFired</code>
|
||||
|
||||
## API
|
||||
@ -36,6 +37,7 @@ tag: 5.0.0
|
||||
| arrow | 是否显示箭头，包含是否指向元素中心的配置 | `boolean` \| `{ pointAtCenter: boolean}` | `true` | |
|
||||
| closeIcon | 自定义关闭按钮 | `React.ReactNode` | `true` | 5.9.0 |
|
||||
| disabledInteraction | 禁用高亮区域交互 | `boolean` | `false` | 5.13.0 |
|
||||
| gap | 控制高亮区域的圆角边框和显示间距 | `{ offset?: number \| [number, number]; radius?: number }` | `{ offset?: 6 ; radius?: 2 }` | 5.0.0 (数组类型的 `offset`: 5.9.0 ) |
|
||||
| placement | 引导卡片相对于目标元素的位置 | `center` `left` `leftTop` `leftBottom` `right` `rightTop` `rightBottom` `top` `topLeft` `topRight` `bottom` `bottomLeft` `bottomRight` | `bottom` | |
|
||||
| onClose | 关闭引导时的回调函数 | `Function` | - | |
|
||||
| onFinish | 引导完成时的回调 | `Function` | - | |
|
||||
|
||||
Loading…
Reference in New Issue
Block a user