mirror of
https://gitee.com/ant-design/ant-design.git
synced 2024-12-14 08:51:26 +08:00
2777d2c39f
* fix: Fixed an issue where the z-index setting of the pop-up component was abnormal in the pop-up container * feat: optimize code * feat: optimize code * feat: optimize code * feat: optimize code * feat: optimize code * Update components/popconfirm/index.tsx Signed-off-by: kiner-tang(文辉) <1127031143@qq.com> --------- Signed-off-by: kiner-tang(文辉) <1127031143@qq.com>
1761 lines
40 KiB
Plaintext
1761 lines
40 KiB
Plaintext
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
|
|
|
exports[`renders components/popover/demo/arrow.tsx extend context correctly 1`] = `
|
|
Array [
|
|
<div
|
|
class="ant-segmented"
|
|
style="margin-bottom: 24px;"
|
|
>
|
|
<div
|
|
class="ant-segmented-group"
|
|
>
|
|
<label
|
|
class="ant-segmented-item ant-segmented-item-selected"
|
|
>
|
|
<input
|
|
checked=""
|
|
class="ant-segmented-item-input"
|
|
type="radio"
|
|
/>
|
|
<div
|
|
class="ant-segmented-item-label"
|
|
title="Show"
|
|
>
|
|
Show
|
|
</div>
|
|
</label>
|
|
<label
|
|
class="ant-segmented-item"
|
|
>
|
|
<input
|
|
class="ant-segmented-item-input"
|
|
type="radio"
|
|
/>
|
|
<div
|
|
class="ant-segmented-item-label"
|
|
title="Hide"
|
|
>
|
|
Hide
|
|
</div>
|
|
</label>
|
|
<label
|
|
class="ant-segmented-item"
|
|
>
|
|
<input
|
|
class="ant-segmented-item-input"
|
|
type="radio"
|
|
/>
|
|
<div
|
|
class="ant-segmented-item-label"
|
|
title="Center"
|
|
>
|
|
Center
|
|
</div>
|
|
</label>
|
|
</div>
|
|
</div>,
|
|
<div
|
|
class="demo"
|
|
>
|
|
<div
|
|
style="margin-inline-start: 84px; white-space: nowrap;"
|
|
>
|
|
<button
|
|
class="ant-btn ant-btn-default"
|
|
style="width: 80px; margin: 4px;"
|
|
type="button"
|
|
>
|
|
<span>
|
|
TL
|
|
</span>
|
|
</button>
|
|
<div
|
|
class="ant-popover ant-zoom-big-appear ant-zoom-big-appear-prepare ant-zoom-big ant-popover-placement-topLeft"
|
|
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
|
|
>
|
|
<div
|
|
class="ant-popover-arrow"
|
|
style="position: absolute;"
|
|
/>
|
|
<div
|
|
class="ant-popover-content"
|
|
>
|
|
<div
|
|
class="ant-popover-inner"
|
|
role="tooltip"
|
|
>
|
|
<div
|
|
class="ant-popover-title"
|
|
>
|
|
<span>
|
|
Title
|
|
</span>
|
|
</div>
|
|
<div
|
|
class="ant-popover-inner-content"
|
|
>
|
|
<div>
|
|
<p>
|
|
Content
|
|
</p>
|
|
<p>
|
|
Content
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<button
|
|
class="ant-btn ant-btn-default"
|
|
style="width: 80px; margin: 4px;"
|
|
type="button"
|
|
>
|
|
<span>
|
|
Top
|
|
</span>
|
|
</button>
|
|
<div
|
|
class="ant-popover ant-zoom-big-appear ant-zoom-big-appear-prepare ant-zoom-big ant-popover-placement-top"
|
|
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
|
|
>
|
|
<div
|
|
class="ant-popover-arrow"
|
|
style="position: absolute; bottom: 0px; left: 0px;"
|
|
/>
|
|
<div
|
|
class="ant-popover-content"
|
|
>
|
|
<div
|
|
class="ant-popover-inner"
|
|
role="tooltip"
|
|
>
|
|
<div
|
|
class="ant-popover-title"
|
|
>
|
|
<span>
|
|
Title
|
|
</span>
|
|
</div>
|
|
<div
|
|
class="ant-popover-inner-content"
|
|
>
|
|
<div>
|
|
<p>
|
|
Content
|
|
</p>
|
|
<p>
|
|
Content
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<button
|
|
class="ant-btn ant-btn-default"
|
|
style="width: 80px; margin: 4px;"
|
|
type="button"
|
|
>
|
|
<span>
|
|
TR
|
|
</span>
|
|
</button>
|
|
<div
|
|
class="ant-popover ant-zoom-big-appear ant-zoom-big-appear-prepare ant-zoom-big ant-popover-placement-topRight"
|
|
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
|
|
>
|
|
<div
|
|
class="ant-popover-arrow"
|
|
style="position: absolute;"
|
|
/>
|
|
<div
|
|
class="ant-popover-content"
|
|
>
|
|
<div
|
|
class="ant-popover-inner"
|
|
role="tooltip"
|
|
>
|
|
<div
|
|
class="ant-popover-title"
|
|
>
|
|
<span>
|
|
Title
|
|
</span>
|
|
</div>
|
|
<div
|
|
class="ant-popover-inner-content"
|
|
>
|
|
<div>
|
|
<p>
|
|
Content
|
|
</p>
|
|
<p>
|
|
Content
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
style="width: 80px; float: inline-start;"
|
|
>
|
|
<button
|
|
class="ant-btn ant-btn-default"
|
|
style="width: 80px; margin: 4px;"
|
|
type="button"
|
|
>
|
|
<span>
|
|
LT
|
|
</span>
|
|
</button>
|
|
<div
|
|
class="ant-popover ant-zoom-big-appear ant-zoom-big-appear-prepare ant-zoom-big ant-popover-placement-leftTop"
|
|
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
|
|
>
|
|
<div
|
|
class="ant-popover-arrow"
|
|
style="position: absolute;"
|
|
/>
|
|
<div
|
|
class="ant-popover-content"
|
|
>
|
|
<div
|
|
class="ant-popover-inner"
|
|
role="tooltip"
|
|
>
|
|
<div
|
|
class="ant-popover-title"
|
|
>
|
|
<span>
|
|
Title
|
|
</span>
|
|
</div>
|
|
<div
|
|
class="ant-popover-inner-content"
|
|
>
|
|
<div>
|
|
<p>
|
|
Content
|
|
</p>
|
|
<p>
|
|
Content
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<button
|
|
class="ant-btn ant-btn-default"
|
|
style="width: 80px; margin: 4px;"
|
|
type="button"
|
|
>
|
|
<span>
|
|
Left
|
|
</span>
|
|
</button>
|
|
<div
|
|
class="ant-popover ant-zoom-big-appear ant-zoom-big-appear-prepare ant-zoom-big ant-popover-placement-left"
|
|
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
|
|
>
|
|
<div
|
|
class="ant-popover-arrow"
|
|
style="position: absolute; top: 0px; right: 0px;"
|
|
/>
|
|
<div
|
|
class="ant-popover-content"
|
|
>
|
|
<div
|
|
class="ant-popover-inner"
|
|
role="tooltip"
|
|
>
|
|
<div
|
|
class="ant-popover-title"
|
|
>
|
|
<span>
|
|
Title
|
|
</span>
|
|
</div>
|
|
<div
|
|
class="ant-popover-inner-content"
|
|
>
|
|
<div>
|
|
<p>
|
|
Content
|
|
</p>
|
|
<p>
|
|
Content
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<button
|
|
class="ant-btn ant-btn-default"
|
|
style="width: 80px; margin: 4px;"
|
|
type="button"
|
|
>
|
|
<span>
|
|
LB
|
|
</span>
|
|
</button>
|
|
<div
|
|
class="ant-popover ant-zoom-big-appear ant-zoom-big-appear-prepare ant-zoom-big ant-popover-placement-leftBottom"
|
|
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
|
|
>
|
|
<div
|
|
class="ant-popover-arrow"
|
|
style="position: absolute;"
|
|
/>
|
|
<div
|
|
class="ant-popover-content"
|
|
>
|
|
<div
|
|
class="ant-popover-inner"
|
|
role="tooltip"
|
|
>
|
|
<div
|
|
class="ant-popover-title"
|
|
>
|
|
<span>
|
|
Title
|
|
</span>
|
|
</div>
|
|
<div
|
|
class="ant-popover-inner-content"
|
|
>
|
|
<div>
|
|
<p>
|
|
Content
|
|
</p>
|
|
<p>
|
|
Content
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
style="width: 80px; margin-inline-start: 344px;"
|
|
>
|
|
<button
|
|
class="ant-btn ant-btn-default"
|
|
style="width: 80px; margin: 4px;"
|
|
type="button"
|
|
>
|
|
<span>
|
|
RT
|
|
</span>
|
|
</button>
|
|
<div
|
|
class="ant-popover ant-zoom-big-appear ant-zoom-big-appear-prepare ant-zoom-big ant-popover-placement-rightTop"
|
|
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
|
|
>
|
|
<div
|
|
class="ant-popover-arrow"
|
|
style="position: absolute;"
|
|
/>
|
|
<div
|
|
class="ant-popover-content"
|
|
>
|
|
<div
|
|
class="ant-popover-inner"
|
|
role="tooltip"
|
|
>
|
|
<div
|
|
class="ant-popover-title"
|
|
>
|
|
<span>
|
|
Title
|
|
</span>
|
|
</div>
|
|
<div
|
|
class="ant-popover-inner-content"
|
|
>
|
|
<div>
|
|
<p>
|
|
Content
|
|
</p>
|
|
<p>
|
|
Content
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<button
|
|
class="ant-btn ant-btn-default"
|
|
style="width: 80px; margin: 4px;"
|
|
type="button"
|
|
>
|
|
<span>
|
|
Right
|
|
</span>
|
|
</button>
|
|
<div
|
|
class="ant-popover ant-zoom-big-appear ant-zoom-big-appear-prepare ant-zoom-big ant-popover-placement-right"
|
|
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
|
|
>
|
|
<div
|
|
class="ant-popover-arrow"
|
|
style="position: absolute; top: 0px; left: 0px;"
|
|
/>
|
|
<div
|
|
class="ant-popover-content"
|
|
>
|
|
<div
|
|
class="ant-popover-inner"
|
|
role="tooltip"
|
|
>
|
|
<div
|
|
class="ant-popover-title"
|
|
>
|
|
<span>
|
|
Title
|
|
</span>
|
|
</div>
|
|
<div
|
|
class="ant-popover-inner-content"
|
|
>
|
|
<div>
|
|
<p>
|
|
Content
|
|
</p>
|
|
<p>
|
|
Content
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<button
|
|
class="ant-btn ant-btn-default"
|
|
style="width: 80px; margin: 4px;"
|
|
type="button"
|
|
>
|
|
<span>
|
|
RB
|
|
</span>
|
|
</button>
|
|
<div
|
|
class="ant-popover ant-zoom-big-appear ant-zoom-big-appear-prepare ant-zoom-big ant-popover-placement-rightBottom"
|
|
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
|
|
>
|
|
<div
|
|
class="ant-popover-arrow"
|
|
style="position: absolute;"
|
|
/>
|
|
<div
|
|
class="ant-popover-content"
|
|
>
|
|
<div
|
|
class="ant-popover-inner"
|
|
role="tooltip"
|
|
>
|
|
<div
|
|
class="ant-popover-title"
|
|
>
|
|
<span>
|
|
Title
|
|
</span>
|
|
</div>
|
|
<div
|
|
class="ant-popover-inner-content"
|
|
>
|
|
<div>
|
|
<p>
|
|
Content
|
|
</p>
|
|
<p>
|
|
Content
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
style="margin-inline-start: 80px; clear: both; white-space: nowrap;"
|
|
>
|
|
<button
|
|
class="ant-btn ant-btn-default"
|
|
style="width: 80px; margin: 4px;"
|
|
type="button"
|
|
>
|
|
<span>
|
|
BL
|
|
</span>
|
|
</button>
|
|
<div
|
|
class="ant-popover ant-zoom-big-appear ant-zoom-big-appear-prepare ant-zoom-big ant-popover-placement-bottomLeft"
|
|
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
|
|
>
|
|
<div
|
|
class="ant-popover-arrow"
|
|
style="position: absolute;"
|
|
/>
|
|
<div
|
|
class="ant-popover-content"
|
|
>
|
|
<div
|
|
class="ant-popover-inner"
|
|
role="tooltip"
|
|
>
|
|
<div
|
|
class="ant-popover-title"
|
|
>
|
|
<span>
|
|
Title
|
|
</span>
|
|
</div>
|
|
<div
|
|
class="ant-popover-inner-content"
|
|
>
|
|
<div>
|
|
<p>
|
|
Content
|
|
</p>
|
|
<p>
|
|
Content
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<button
|
|
class="ant-btn ant-btn-default"
|
|
style="width: 80px; margin: 4px;"
|
|
type="button"
|
|
>
|
|
<span>
|
|
Bottom
|
|
</span>
|
|
</button>
|
|
<div
|
|
class="ant-popover ant-zoom-big-appear ant-zoom-big-appear-prepare ant-zoom-big ant-popover-placement-bottom"
|
|
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
|
|
>
|
|
<div
|
|
class="ant-popover-arrow"
|
|
style="position: absolute; top: 0px; left: 0px;"
|
|
/>
|
|
<div
|
|
class="ant-popover-content"
|
|
>
|
|
<div
|
|
class="ant-popover-inner"
|
|
role="tooltip"
|
|
>
|
|
<div
|
|
class="ant-popover-title"
|
|
>
|
|
<span>
|
|
Title
|
|
</span>
|
|
</div>
|
|
<div
|
|
class="ant-popover-inner-content"
|
|
>
|
|
<div>
|
|
<p>
|
|
Content
|
|
</p>
|
|
<p>
|
|
Content
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<button
|
|
class="ant-btn ant-btn-default"
|
|
style="width: 80px; margin: 4px;"
|
|
type="button"
|
|
>
|
|
<span>
|
|
BR
|
|
</span>
|
|
</button>
|
|
<div
|
|
class="ant-popover ant-zoom-big-appear ant-zoom-big-appear-prepare ant-zoom-big ant-popover-placement-bottomRight"
|
|
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
|
|
>
|
|
<div
|
|
class="ant-popover-arrow"
|
|
style="position: absolute;"
|
|
/>
|
|
<div
|
|
class="ant-popover-content"
|
|
>
|
|
<div
|
|
class="ant-popover-inner"
|
|
role="tooltip"
|
|
>
|
|
<div
|
|
class="ant-popover-title"
|
|
>
|
|
<span>
|
|
Title
|
|
</span>
|
|
</div>
|
|
<div
|
|
class="ant-popover-inner-content"
|
|
>
|
|
<div>
|
|
<p>
|
|
Content
|
|
</p>
|
|
<p>
|
|
Content
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>,
|
|
]
|
|
`;
|
|
|
|
exports[`renders components/popover/demo/arrow.tsx extend context correctly 2`] = `[]`;
|
|
|
|
exports[`renders components/popover/demo/basic.tsx extend context correctly 1`] = `
|
|
Array [
|
|
<button
|
|
class="ant-btn ant-btn-primary"
|
|
type="button"
|
|
>
|
|
<span>
|
|
Hover me
|
|
</span>
|
|
</button>,
|
|
<div
|
|
class="ant-popover ant-zoom-big-appear ant-zoom-big-appear-prepare ant-zoom-big ant-popover-placement-top"
|
|
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
|
|
>
|
|
<div
|
|
class="ant-popover-arrow"
|
|
style="position: absolute; bottom: 0px; left: 0px;"
|
|
/>
|
|
<div
|
|
class="ant-popover-content"
|
|
>
|
|
<div
|
|
class="ant-popover-inner"
|
|
role="tooltip"
|
|
>
|
|
<div
|
|
class="ant-popover-title"
|
|
>
|
|
Title
|
|
</div>
|
|
<div
|
|
class="ant-popover-inner-content"
|
|
>
|
|
<div>
|
|
<p>
|
|
Content
|
|
</p>
|
|
<p>
|
|
Content
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>,
|
|
]
|
|
`;
|
|
|
|
exports[`renders components/popover/demo/basic.tsx extend context correctly 2`] = `[]`;
|
|
|
|
exports[`renders components/popover/demo/component-token.tsx extend context correctly 1`] = `
|
|
Array [
|
|
<div
|
|
class="ant-popover ant-popover-pure ant-popover-placement-top"
|
|
>
|
|
<div
|
|
class="ant-popover-arrow"
|
|
/>
|
|
<div
|
|
class="ant-popover-content"
|
|
>
|
|
<div
|
|
class="ant-popover-inner"
|
|
role="tooltip"
|
|
>
|
|
<div
|
|
class="ant-popover-title"
|
|
>
|
|
Title
|
|
</div>
|
|
<div
|
|
class="ant-popover-inner-content"
|
|
>
|
|
<div>
|
|
<p>
|
|
Content
|
|
</p>
|
|
<p>
|
|
Content
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>,
|
|
<div
|
|
class="ant-popover ant-popover-pure ant-popover-placement-bottomLeft"
|
|
style="width: 250px;"
|
|
>
|
|
<div
|
|
class="ant-popover-arrow"
|
|
/>
|
|
<div
|
|
class="ant-popover-content"
|
|
style="width: 250px;"
|
|
>
|
|
<div
|
|
class="ant-popover-inner"
|
|
role="tooltip"
|
|
>
|
|
<div
|
|
class="ant-popover-title"
|
|
>
|
|
Title
|
|
</div>
|
|
<div
|
|
class="ant-popover-inner-content"
|
|
>
|
|
<div>
|
|
<p>
|
|
Content
|
|
</p>
|
|
<p>
|
|
Content
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>,
|
|
]
|
|
`;
|
|
|
|
exports[`renders components/popover/demo/component-token.tsx extend context correctly 2`] = `[]`;
|
|
|
|
exports[`renders components/popover/demo/control.tsx extend context correctly 1`] = `
|
|
Array [
|
|
<button
|
|
class="ant-btn ant-btn-primary"
|
|
type="button"
|
|
>
|
|
<span>
|
|
Click me
|
|
</span>
|
|
</button>,
|
|
<div
|
|
class="ant-popover ant-zoom-big-appear ant-zoom-big-appear-prepare ant-zoom-big ant-popover-placement-top"
|
|
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
|
|
>
|
|
<div
|
|
class="ant-popover-arrow"
|
|
style="position: absolute; bottom: 0px; left: 0px;"
|
|
/>
|
|
<div
|
|
class="ant-popover-content"
|
|
>
|
|
<div
|
|
class="ant-popover-inner"
|
|
role="tooltip"
|
|
>
|
|
<div
|
|
class="ant-popover-title"
|
|
>
|
|
Title
|
|
</div>
|
|
<div
|
|
class="ant-popover-inner-content"
|
|
>
|
|
<a>
|
|
Close
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>,
|
|
]
|
|
`;
|
|
|
|
exports[`renders components/popover/demo/control.tsx extend context correctly 2`] = `[]`;
|
|
|
|
exports[`renders components/popover/demo/hover-with-click.tsx extend context correctly 1`] = `
|
|
Array [
|
|
<button
|
|
class="ant-btn ant-btn-default"
|
|
type="button"
|
|
>
|
|
<span>
|
|
Hover and click / 悬停并单击
|
|
</span>
|
|
</button>,
|
|
<div
|
|
class="ant-popover ant-zoom-big-appear ant-zoom-big-appear-prepare ant-zoom-big ant-popover-placement-top"
|
|
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 2140;"
|
|
>
|
|
<div
|
|
class="ant-popover-arrow"
|
|
style="position: absolute; bottom: 0px; left: 0px;"
|
|
/>
|
|
<div
|
|
class="ant-popover-content"
|
|
>
|
|
<div
|
|
class="ant-popover-inner"
|
|
role="tooltip"
|
|
>
|
|
<div
|
|
class="ant-popover-title"
|
|
>
|
|
Click title
|
|
</div>
|
|
<div
|
|
class="ant-popover-inner-content"
|
|
>
|
|
<div>
|
|
<div>
|
|
This is click content.
|
|
</div>
|
|
<a>
|
|
Close
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>,
|
|
<div
|
|
class="ant-popover ant-zoom-big-appear ant-zoom-big-appear-prepare ant-zoom-big ant-popover-placement-top"
|
|
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
|
|
>
|
|
<div
|
|
class="ant-popover-arrow"
|
|
style="position: absolute; bottom: 0px; left: 0px;"
|
|
/>
|
|
<div
|
|
class="ant-popover-content"
|
|
>
|
|
<div
|
|
class="ant-popover-inner"
|
|
role="tooltip"
|
|
>
|
|
<div
|
|
class="ant-popover-title"
|
|
>
|
|
Hover title
|
|
</div>
|
|
<div
|
|
class="ant-popover-inner-content"
|
|
>
|
|
<div>
|
|
This is hover content.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>,
|
|
]
|
|
`;
|
|
|
|
exports[`renders components/popover/demo/hover-with-click.tsx extend context correctly 2`] = `[]`;
|
|
|
|
exports[`renders components/popover/demo/placement.tsx extend context correctly 1`] = `
|
|
<div
|
|
class="demo"
|
|
>
|
|
<div
|
|
style="margin-inline-start: 84px; white-space: nowrap;"
|
|
>
|
|
<button
|
|
class="ant-btn ant-btn-default"
|
|
style="width: 80px; margin: 4px;"
|
|
type="button"
|
|
>
|
|
<span>
|
|
TL
|
|
</span>
|
|
</button>
|
|
<div
|
|
class="ant-popover ant-zoom-big-appear ant-zoom-big-appear-prepare ant-zoom-big ant-popover-placement-topLeft"
|
|
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
|
|
>
|
|
<div
|
|
class="ant-popover-arrow"
|
|
style="position: absolute;"
|
|
/>
|
|
<div
|
|
class="ant-popover-content"
|
|
>
|
|
<div
|
|
class="ant-popover-inner"
|
|
role="tooltip"
|
|
>
|
|
<div
|
|
class="ant-popover-title"
|
|
>
|
|
<span>
|
|
Title
|
|
</span>
|
|
</div>
|
|
<div
|
|
class="ant-popover-inner-content"
|
|
>
|
|
<div>
|
|
<p>
|
|
Content
|
|
</p>
|
|
<p>
|
|
Content
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<button
|
|
class="ant-btn ant-btn-default"
|
|
style="width: 80px; margin: 4px;"
|
|
type="button"
|
|
>
|
|
<span>
|
|
Top
|
|
</span>
|
|
</button>
|
|
<div
|
|
class="ant-popover ant-zoom-big-appear ant-zoom-big-appear-prepare ant-zoom-big ant-popover-placement-top"
|
|
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
|
|
>
|
|
<div
|
|
class="ant-popover-arrow"
|
|
style="position: absolute; bottom: 0px; left: 0px;"
|
|
/>
|
|
<div
|
|
class="ant-popover-content"
|
|
>
|
|
<div
|
|
class="ant-popover-inner"
|
|
role="tooltip"
|
|
>
|
|
<div
|
|
class="ant-popover-title"
|
|
>
|
|
<span>
|
|
Title
|
|
</span>
|
|
</div>
|
|
<div
|
|
class="ant-popover-inner-content"
|
|
>
|
|
<div>
|
|
<p>
|
|
Content
|
|
</p>
|
|
<p>
|
|
Content
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<button
|
|
class="ant-btn ant-btn-default"
|
|
style="width: 80px; margin: 4px;"
|
|
type="button"
|
|
>
|
|
<span>
|
|
TR
|
|
</span>
|
|
</button>
|
|
<div
|
|
class="ant-popover ant-zoom-big-appear ant-zoom-big-appear-prepare ant-zoom-big ant-popover-placement-topRight"
|
|
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
|
|
>
|
|
<div
|
|
class="ant-popover-arrow"
|
|
style="position: absolute;"
|
|
/>
|
|
<div
|
|
class="ant-popover-content"
|
|
>
|
|
<div
|
|
class="ant-popover-inner"
|
|
role="tooltip"
|
|
>
|
|
<div
|
|
class="ant-popover-title"
|
|
>
|
|
<span>
|
|
Title
|
|
</span>
|
|
</div>
|
|
<div
|
|
class="ant-popover-inner-content"
|
|
>
|
|
<div>
|
|
<p>
|
|
Content
|
|
</p>
|
|
<p>
|
|
Content
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
style="width: 80px; float: inline-start;"
|
|
>
|
|
<button
|
|
class="ant-btn ant-btn-default"
|
|
style="width: 80px; margin: 4px;"
|
|
type="button"
|
|
>
|
|
<span>
|
|
LT
|
|
</span>
|
|
</button>
|
|
<div
|
|
class="ant-popover ant-zoom-big-appear ant-zoom-big-appear-prepare ant-zoom-big ant-popover-placement-leftTop"
|
|
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
|
|
>
|
|
<div
|
|
class="ant-popover-arrow"
|
|
style="position: absolute;"
|
|
/>
|
|
<div
|
|
class="ant-popover-content"
|
|
>
|
|
<div
|
|
class="ant-popover-inner"
|
|
role="tooltip"
|
|
>
|
|
<div
|
|
class="ant-popover-title"
|
|
>
|
|
<span>
|
|
Title
|
|
</span>
|
|
</div>
|
|
<div
|
|
class="ant-popover-inner-content"
|
|
>
|
|
<div>
|
|
<p>
|
|
Content
|
|
</p>
|
|
<p>
|
|
Content
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<button
|
|
class="ant-btn ant-btn-default"
|
|
style="width: 80px; margin: 4px;"
|
|
type="button"
|
|
>
|
|
<span>
|
|
Left
|
|
</span>
|
|
</button>
|
|
<div
|
|
class="ant-popover ant-zoom-big-appear ant-zoom-big-appear-prepare ant-zoom-big ant-popover-placement-left"
|
|
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
|
|
>
|
|
<div
|
|
class="ant-popover-arrow"
|
|
style="position: absolute; top: 0px; right: 0px;"
|
|
/>
|
|
<div
|
|
class="ant-popover-content"
|
|
>
|
|
<div
|
|
class="ant-popover-inner"
|
|
role="tooltip"
|
|
>
|
|
<div
|
|
class="ant-popover-title"
|
|
>
|
|
<span>
|
|
Title
|
|
</span>
|
|
</div>
|
|
<div
|
|
class="ant-popover-inner-content"
|
|
>
|
|
<div>
|
|
<p>
|
|
Content
|
|
</p>
|
|
<p>
|
|
Content
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<button
|
|
class="ant-btn ant-btn-default"
|
|
style="width: 80px; margin: 4px;"
|
|
type="button"
|
|
>
|
|
<span>
|
|
LB
|
|
</span>
|
|
</button>
|
|
<div
|
|
class="ant-popover ant-zoom-big-appear ant-zoom-big-appear-prepare ant-zoom-big ant-popover-placement-leftBottom"
|
|
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
|
|
>
|
|
<div
|
|
class="ant-popover-arrow"
|
|
style="position: absolute;"
|
|
/>
|
|
<div
|
|
class="ant-popover-content"
|
|
>
|
|
<div
|
|
class="ant-popover-inner"
|
|
role="tooltip"
|
|
>
|
|
<div
|
|
class="ant-popover-title"
|
|
>
|
|
<span>
|
|
Title
|
|
</span>
|
|
</div>
|
|
<div
|
|
class="ant-popover-inner-content"
|
|
>
|
|
<div>
|
|
<p>
|
|
Content
|
|
</p>
|
|
<p>
|
|
Content
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
style="width: 80px; margin-inline-start: 344px;"
|
|
>
|
|
<button
|
|
class="ant-btn ant-btn-default"
|
|
style="width: 80px; margin: 4px;"
|
|
type="button"
|
|
>
|
|
<span>
|
|
RT
|
|
</span>
|
|
</button>
|
|
<div
|
|
class="ant-popover ant-zoom-big-appear ant-zoom-big-appear-prepare ant-zoom-big ant-popover-placement-rightTop"
|
|
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
|
|
>
|
|
<div
|
|
class="ant-popover-arrow"
|
|
style="position: absolute;"
|
|
/>
|
|
<div
|
|
class="ant-popover-content"
|
|
>
|
|
<div
|
|
class="ant-popover-inner"
|
|
role="tooltip"
|
|
>
|
|
<div
|
|
class="ant-popover-title"
|
|
>
|
|
<span>
|
|
Title
|
|
</span>
|
|
</div>
|
|
<div
|
|
class="ant-popover-inner-content"
|
|
>
|
|
<div>
|
|
<p>
|
|
Content
|
|
</p>
|
|
<p>
|
|
Content
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<button
|
|
class="ant-btn ant-btn-default"
|
|
style="width: 80px; margin: 4px;"
|
|
type="button"
|
|
>
|
|
<span>
|
|
Right
|
|
</span>
|
|
</button>
|
|
<div
|
|
class="ant-popover ant-zoom-big-appear ant-zoom-big-appear-prepare ant-zoom-big ant-popover-placement-right"
|
|
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
|
|
>
|
|
<div
|
|
class="ant-popover-arrow"
|
|
style="position: absolute; top: 0px; left: 0px;"
|
|
/>
|
|
<div
|
|
class="ant-popover-content"
|
|
>
|
|
<div
|
|
class="ant-popover-inner"
|
|
role="tooltip"
|
|
>
|
|
<div
|
|
class="ant-popover-title"
|
|
>
|
|
<span>
|
|
Title
|
|
</span>
|
|
</div>
|
|
<div
|
|
class="ant-popover-inner-content"
|
|
>
|
|
<div>
|
|
<p>
|
|
Content
|
|
</p>
|
|
<p>
|
|
Content
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<button
|
|
class="ant-btn ant-btn-default"
|
|
style="width: 80px; margin: 4px;"
|
|
type="button"
|
|
>
|
|
<span>
|
|
RB
|
|
</span>
|
|
</button>
|
|
<div
|
|
class="ant-popover ant-zoom-big-appear ant-zoom-big-appear-prepare ant-zoom-big ant-popover-placement-rightBottom"
|
|
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
|
|
>
|
|
<div
|
|
class="ant-popover-arrow"
|
|
style="position: absolute;"
|
|
/>
|
|
<div
|
|
class="ant-popover-content"
|
|
>
|
|
<div
|
|
class="ant-popover-inner"
|
|
role="tooltip"
|
|
>
|
|
<div
|
|
class="ant-popover-title"
|
|
>
|
|
<span>
|
|
Title
|
|
</span>
|
|
</div>
|
|
<div
|
|
class="ant-popover-inner-content"
|
|
>
|
|
<div>
|
|
<p>
|
|
Content
|
|
</p>
|
|
<p>
|
|
Content
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
style="margin-inline-start: 80px; clear: both; white-space: nowrap;"
|
|
>
|
|
<button
|
|
class="ant-btn ant-btn-default"
|
|
style="width: 80px; margin: 4px;"
|
|
type="button"
|
|
>
|
|
<span>
|
|
BL
|
|
</span>
|
|
</button>
|
|
<div
|
|
class="ant-popover ant-zoom-big-appear ant-zoom-big-appear-prepare ant-zoom-big ant-popover-placement-bottomLeft"
|
|
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
|
|
>
|
|
<div
|
|
class="ant-popover-arrow"
|
|
style="position: absolute;"
|
|
/>
|
|
<div
|
|
class="ant-popover-content"
|
|
>
|
|
<div
|
|
class="ant-popover-inner"
|
|
role="tooltip"
|
|
>
|
|
<div
|
|
class="ant-popover-title"
|
|
>
|
|
<span>
|
|
Title
|
|
</span>
|
|
</div>
|
|
<div
|
|
class="ant-popover-inner-content"
|
|
>
|
|
<div>
|
|
<p>
|
|
Content
|
|
</p>
|
|
<p>
|
|
Content
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<button
|
|
class="ant-btn ant-btn-default"
|
|
style="width: 80px; margin: 4px;"
|
|
type="button"
|
|
>
|
|
<span>
|
|
Bottom
|
|
</span>
|
|
</button>
|
|
<div
|
|
class="ant-popover ant-zoom-big-appear ant-zoom-big-appear-prepare ant-zoom-big ant-popover-placement-bottom"
|
|
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
|
|
>
|
|
<div
|
|
class="ant-popover-arrow"
|
|
style="position: absolute; top: 0px; left: 0px;"
|
|
/>
|
|
<div
|
|
class="ant-popover-content"
|
|
>
|
|
<div
|
|
class="ant-popover-inner"
|
|
role="tooltip"
|
|
>
|
|
<div
|
|
class="ant-popover-title"
|
|
>
|
|
<span>
|
|
Title
|
|
</span>
|
|
</div>
|
|
<div
|
|
class="ant-popover-inner-content"
|
|
>
|
|
<div>
|
|
<p>
|
|
Content
|
|
</p>
|
|
<p>
|
|
Content
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<button
|
|
class="ant-btn ant-btn-default"
|
|
style="width: 80px; margin: 4px;"
|
|
type="button"
|
|
>
|
|
<span>
|
|
BR
|
|
</span>
|
|
</button>
|
|
<div
|
|
class="ant-popover ant-zoom-big-appear ant-zoom-big-appear-prepare ant-zoom-big ant-popover-placement-bottomRight"
|
|
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
|
|
>
|
|
<div
|
|
class="ant-popover-arrow"
|
|
style="position: absolute;"
|
|
/>
|
|
<div
|
|
class="ant-popover-content"
|
|
>
|
|
<div
|
|
class="ant-popover-inner"
|
|
role="tooltip"
|
|
>
|
|
<div
|
|
class="ant-popover-title"
|
|
>
|
|
<span>
|
|
Title
|
|
</span>
|
|
</div>
|
|
<div
|
|
class="ant-popover-inner-content"
|
|
>
|
|
<div>
|
|
<p>
|
|
Content
|
|
</p>
|
|
<p>
|
|
Content
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
|
|
exports[`renders components/popover/demo/placement.tsx extend context correctly 2`] = `[]`;
|
|
|
|
exports[`renders components/popover/demo/render-panel.tsx extend context correctly 1`] = `
|
|
Array [
|
|
<div
|
|
class="ant-popover ant-popover-pure ant-popover-placement-top"
|
|
>
|
|
<div
|
|
class="ant-popover-arrow"
|
|
/>
|
|
<div
|
|
class="ant-popover-content"
|
|
>
|
|
<div
|
|
class="ant-popover-inner"
|
|
role="tooltip"
|
|
>
|
|
<div
|
|
class="ant-popover-title"
|
|
>
|
|
Title
|
|
</div>
|
|
<div
|
|
class="ant-popover-inner-content"
|
|
>
|
|
<div>
|
|
<p>
|
|
Content
|
|
</p>
|
|
<p>
|
|
Content
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>,
|
|
<div
|
|
class="ant-popover ant-popover-pure ant-popover-placement-bottomLeft"
|
|
style="width: 250px;"
|
|
>
|
|
<div
|
|
class="ant-popover-arrow"
|
|
/>
|
|
<div
|
|
class="ant-popover-content"
|
|
style="width: 250px;"
|
|
>
|
|
<div
|
|
class="ant-popover-inner"
|
|
role="tooltip"
|
|
>
|
|
<div
|
|
class="ant-popover-title"
|
|
>
|
|
Title
|
|
</div>
|
|
<div
|
|
class="ant-popover-inner-content"
|
|
>
|
|
<div>
|
|
<p>
|
|
Content
|
|
</p>
|
|
<p>
|
|
Content
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>,
|
|
]
|
|
`;
|
|
|
|
exports[`renders components/popover/demo/render-panel.tsx extend context correctly 2`] = `[]`;
|
|
|
|
exports[`renders components/popover/demo/triggerType.tsx extend context correctly 1`] = `
|
|
<div
|
|
class="ant-space ant-space-horizontal ant-space-align-center ant-space-gap-row-small ant-space-gap-col-small"
|
|
style="flex-wrap: wrap;"
|
|
>
|
|
<div
|
|
class="ant-space-item"
|
|
>
|
|
<button
|
|
class="ant-btn ant-btn-default"
|
|
type="button"
|
|
>
|
|
<span>
|
|
Hover me
|
|
</span>
|
|
</button>
|
|
<div
|
|
class="ant-popover ant-zoom-big-appear ant-zoom-big-appear-prepare ant-zoom-big ant-popover-placement-top"
|
|
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
|
|
>
|
|
<div
|
|
class="ant-popover-arrow"
|
|
style="position: absolute; bottom: 0px; left: 0px;"
|
|
/>
|
|
<div
|
|
class="ant-popover-content"
|
|
>
|
|
<div
|
|
class="ant-popover-inner"
|
|
role="tooltip"
|
|
>
|
|
<div
|
|
class="ant-popover-title"
|
|
>
|
|
Title
|
|
</div>
|
|
<div
|
|
class="ant-popover-inner-content"
|
|
>
|
|
<div>
|
|
<p>
|
|
Content
|
|
</p>
|
|
<p>
|
|
Content
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="ant-space-item"
|
|
>
|
|
<button
|
|
class="ant-btn ant-btn-default"
|
|
type="button"
|
|
>
|
|
<span>
|
|
Focus me
|
|
</span>
|
|
</button>
|
|
<div
|
|
class="ant-popover ant-zoom-big-appear ant-zoom-big-appear-prepare ant-zoom-big ant-popover-placement-top"
|
|
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
|
|
>
|
|
<div
|
|
class="ant-popover-arrow"
|
|
style="position: absolute; bottom: 0px; left: 0px;"
|
|
/>
|
|
<div
|
|
class="ant-popover-content"
|
|
>
|
|
<div
|
|
class="ant-popover-inner"
|
|
role="tooltip"
|
|
>
|
|
<div
|
|
class="ant-popover-title"
|
|
>
|
|
Title
|
|
</div>
|
|
<div
|
|
class="ant-popover-inner-content"
|
|
>
|
|
<div>
|
|
<p>
|
|
Content
|
|
</p>
|
|
<p>
|
|
Content
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="ant-space-item"
|
|
>
|
|
<button
|
|
class="ant-btn ant-btn-default"
|
|
type="button"
|
|
>
|
|
<span>
|
|
Click me
|
|
</span>
|
|
</button>
|
|
<div
|
|
class="ant-popover ant-zoom-big-appear ant-zoom-big-appear-prepare ant-zoom-big ant-popover-placement-top"
|
|
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
|
|
>
|
|
<div
|
|
class="ant-popover-arrow"
|
|
style="position: absolute; bottom: 0px; left: 0px;"
|
|
/>
|
|
<div
|
|
class="ant-popover-content"
|
|
>
|
|
<div
|
|
class="ant-popover-inner"
|
|
role="tooltip"
|
|
>
|
|
<div
|
|
class="ant-popover-title"
|
|
>
|
|
Title
|
|
</div>
|
|
<div
|
|
class="ant-popover-inner-content"
|
|
>
|
|
<div>
|
|
<p>
|
|
Content
|
|
</p>
|
|
<p>
|
|
Content
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
|
|
exports[`renders components/popover/demo/triggerType.tsx extend context correctly 2`] = `[]`;
|
|
|
|
exports[`renders components/popover/demo/wireframe.tsx extend context correctly 1`] = `
|
|
Array [
|
|
<div
|
|
class="ant-popover ant-popover-pure ant-popover-placement-top"
|
|
>
|
|
<div
|
|
class="ant-popover-arrow"
|
|
/>
|
|
<div
|
|
class="ant-popover-content"
|
|
>
|
|
<div
|
|
class="ant-popover-inner"
|
|
role="tooltip"
|
|
>
|
|
<div
|
|
class="ant-popover-title"
|
|
>
|
|
Title
|
|
</div>
|
|
<div
|
|
class="ant-popover-inner-content"
|
|
>
|
|
<div>
|
|
<p>
|
|
Content
|
|
</p>
|
|
<p>
|
|
Content
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>,
|
|
<div
|
|
class="ant-popover ant-popover-pure ant-popover-placement-bottomLeft"
|
|
style="width: 250px;"
|
|
>
|
|
<div
|
|
class="ant-popover-arrow"
|
|
/>
|
|
<div
|
|
class="ant-popover-content"
|
|
style="width: 250px;"
|
|
>
|
|
<div
|
|
class="ant-popover-inner"
|
|
role="tooltip"
|
|
>
|
|
<div
|
|
class="ant-popover-title"
|
|
>
|
|
Title
|
|
</div>
|
|
<div
|
|
class="ant-popover-inner-content"
|
|
>
|
|
<div>
|
|
<p>
|
|
Content
|
|
</p>
|
|
<p>
|
|
Content
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>,
|
|
]
|
|
`;
|
|
|
|
exports[`renders components/popover/demo/wireframe.tsx extend context correctly 2`] = `[]`;
|