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.
1826 lines
39 KiB
1826 lines
39 KiB
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
|
|
|
exports[`renders components/popover/demo/arrow.tsx extend context correctly 1`] = `
|
|
<div
|
|
class="demo"
|
|
>
|
|
<div
|
|
class="ant-segmented"
|
|
>
|
|
<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="ant-divider ant-divider-horizontal ant-divider-with-text ant-divider-with-text-center"
|
|
role="separator"
|
|
>
|
|
<span
|
|
class="ant-divider-inner-text"
|
|
>
|
|
Content
|
|
</span>
|
|
</div>
|
|
<div
|
|
style="margin-left: 70px; white-space: nowrap;"
|
|
>
|
|
<button
|
|
class="ant-btn ant-btn-default"
|
|
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"
|
|
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"
|
|
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: 70px; float: left;"
|
|
>
|
|
<button
|
|
class="ant-btn ant-btn-default"
|
|
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"
|
|
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"
|
|
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: 70px; margin-left: 304px;"
|
|
>
|
|
<button
|
|
class="ant-btn ant-btn-default"
|
|
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"
|
|
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"
|
|
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-left: 70px; clear: both; white-space: nowrap;"
|
|
>
|
|
<button
|
|
class="ant-btn ant-btn-default"
|
|
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"
|
|
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"
|
|
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-point-at-center.tsx extend context correctly 1`] = `
|
|
<div
|
|
class="ant-space ant-space-horizontal ant-space-align-center"
|
|
style="flex-wrap: wrap; margin-bottom: -8px;"
|
|
>
|
|
<div
|
|
class="ant-space-item"
|
|
style="margin-right: 8px; padding-bottom: 8px;"
|
|
>
|
|
<button
|
|
class="ant-btn ant-btn-default"
|
|
type="button"
|
|
>
|
|
<span>
|
|
Align edge / 边缘对齐
|
|
</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"
|
|
>
|
|
Title
|
|
</div>
|
|
<div
|
|
class="ant-popover-inner-content"
|
|
>
|
|
<p>
|
|
Content
|
|
</p>
|
|
<p>
|
|
Content
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="ant-space-item"
|
|
style="padding-bottom: 8px;"
|
|
>
|
|
<button
|
|
class="ant-btn ant-btn-default"
|
|
type="button"
|
|
>
|
|
<span>
|
|
Arrow points to center / 箭头指向中心
|
|
</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"
|
|
>
|
|
Title
|
|
</div>
|
|
<div
|
|
class="ant-popover-inner-content"
|
|
>
|
|
<p>
|
|
Content
|
|
</p>
|
|
<p>
|
|
Content
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
|
|
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/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/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/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;"
|
|
>
|
|
<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/placement.tsx extend context correctly 1`] = `
|
|
<div>
|
|
<div
|
|
style="margin-left: 70px; white-space: nowrap;"
|
|
>
|
|
<button
|
|
class="ant-btn ant-btn-default"
|
|
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"
|
|
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"
|
|
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: 70px; float: left;"
|
|
>
|
|
<button
|
|
class="ant-btn ant-btn-default"
|
|
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"
|
|
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"
|
|
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: 70px; margin-left: 304px;"
|
|
>
|
|
<button
|
|
class="ant-btn ant-btn-default"
|
|
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"
|
|
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"
|
|
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-left: 70px; clear: both; white-space: nowrap;"
|
|
>
|
|
<button
|
|
class="ant-btn ant-btn-default"
|
|
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>
|