mirror of
https://gitee.com/ant-design/ant-design.git
synced 2024-12-16 01:41:02 +08:00
1ef07e97ba
* feat(Image): modify layout and support closeIcon、PreviewGroup fallback * docs: modify text * style: add skip right * chore: update snapshot * fix: disabled hover * fix: lint error * style: close icon transition * docs: # link * demo: update demo * demo: add comment * demo: remove comment
321 lines
11 KiB
Plaintext
321 lines
11 KiB
Plaintext
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
|
|
|
exports[`Image Default Group preview props 1`] = `
|
|
<body>
|
|
<div>
|
|
<div
|
|
class="ant-image"
|
|
>
|
|
<img
|
|
class="ant-image-img"
|
|
src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
|
|
/>
|
|
<div
|
|
class="ant-image-mask"
|
|
>
|
|
<div
|
|
class="ant-image-mask-info"
|
|
>
|
|
<span
|
|
aria-label="eye"
|
|
class="anticon anticon-eye"
|
|
role="img"
|
|
>
|
|
<svg
|
|
aria-hidden="true"
|
|
data-icon="eye"
|
|
fill="currentColor"
|
|
focusable="false"
|
|
height="1em"
|
|
viewBox="64 64 896 896"
|
|
width="1em"
|
|
>
|
|
<path
|
|
d="M942.2 486.2C847.4 286.5 704.1 186 512 186c-192.2 0-335.4 100.5-430.2 300.3a60.3 60.3 0 000 51.5C176.6 737.5 319.9 838 512 838c192.2 0 335.4-100.5 430.2-300.3 7.7-16.2 7.7-35 0-51.5zM512 766c-161.3 0-279.4-81.8-362.7-254C232.6 339.8 350.7 258 512 258c161.3 0 279.4 81.8 362.7 254C791.5 684.2 673.4 766 512 766zm-4-430c-97.2 0-176 78.8-176 176s78.8 176 176 176 176-78.8 176-176-78.8-176-176-176zm0 288c-61.9 0-112-50.1-112-112s50.1-112 112-112 112 50.1 112 112-50.1 112-112 112z"
|
|
/>
|
|
</svg>
|
|
</span>
|
|
Preview
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="ant-image-preview-operations-wrapper ant-fade-appear ant-fade-appear-start ant-fade"
|
|
>
|
|
<button
|
|
class="ant-image-preview-close"
|
|
>
|
|
<span
|
|
aria-label="close"
|
|
class="anticon anticon-close"
|
|
role="img"
|
|
>
|
|
<svg
|
|
aria-hidden="true"
|
|
data-icon="close"
|
|
fill="currentColor"
|
|
focusable="false"
|
|
height="1em"
|
|
viewBox="64 64 896 896"
|
|
width="1em"
|
|
>
|
|
<path
|
|
d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"
|
|
/>
|
|
</svg>
|
|
</span>
|
|
</button>
|
|
<div
|
|
class="ant-image-preview-footer"
|
|
>
|
|
<div
|
|
class="ant-image-preview-progress"
|
|
>
|
|
1 / 1
|
|
</div>
|
|
<div
|
|
class="ant-image-preview-operations"
|
|
>
|
|
<div
|
|
class="ant-image-preview-operations-operation ant-image-preview-operations-operation-flipY"
|
|
>
|
|
<span
|
|
aria-label="swap"
|
|
class="anticon anticon-swap"
|
|
role="img"
|
|
>
|
|
<svg
|
|
aria-hidden="true"
|
|
data-icon="swap"
|
|
fill="currentColor"
|
|
focusable="false"
|
|
height="1em"
|
|
style="transform: rotate(90deg);"
|
|
viewBox="64 64 896 896"
|
|
width="1em"
|
|
>
|
|
<path
|
|
d="M847.9 592H152c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h605.2L612.9 851c-4.1 5.2-.4 13 6.3 13h72.5c4.9 0 9.5-2.2 12.6-6.1l168.8-214.1c16.5-21 1.6-51.8-25.2-51.8zM872 356H266.8l144.3-183c4.1-5.2.4-13-6.3-13h-72.5c-4.9 0-9.5 2.2-12.6 6.1L150.9 380.2c-16.5 21-1.6 51.8 25.1 51.8h696c4.4 0 8-3.6 8-8v-60c0-4.4-3.6-8-8-8z"
|
|
/>
|
|
</svg>
|
|
</span>
|
|
</div>
|
|
<div
|
|
class="ant-image-preview-operations-operation ant-image-preview-operations-operation-flipX"
|
|
>
|
|
<span
|
|
aria-label="swap"
|
|
class="anticon anticon-swap"
|
|
role="img"
|
|
>
|
|
<svg
|
|
aria-hidden="true"
|
|
data-icon="swap"
|
|
fill="currentColor"
|
|
focusable="false"
|
|
height="1em"
|
|
viewBox="64 64 896 896"
|
|
width="1em"
|
|
>
|
|
<path
|
|
d="M847.9 592H152c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h605.2L612.9 851c-4.1 5.2-.4 13 6.3 13h72.5c4.9 0 9.5-2.2 12.6-6.1l168.8-214.1c16.5-21 1.6-51.8-25.2-51.8zM872 356H266.8l144.3-183c4.1-5.2.4-13-6.3-13h-72.5c-4.9 0-9.5 2.2-12.6 6.1L150.9 380.2c-16.5 21-1.6 51.8 25.1 51.8h696c4.4 0 8-3.6 8-8v-60c0-4.4-3.6-8-8-8z"
|
|
/>
|
|
</svg>
|
|
</span>
|
|
</div>
|
|
<div
|
|
class="ant-image-preview-operations-operation ant-image-preview-operations-operation-rotateLeft"
|
|
>
|
|
<span
|
|
aria-label="rotate-left"
|
|
class="anticon anticon-rotate-left"
|
|
role="img"
|
|
>
|
|
<svg
|
|
aria-hidden="true"
|
|
data-icon="rotate-left"
|
|
fill="currentColor"
|
|
focusable="false"
|
|
height="1em"
|
|
viewBox="64 64 896 896"
|
|
width="1em"
|
|
>
|
|
<defs>
|
|
<style />
|
|
</defs>
|
|
<path
|
|
d="M672 418H144c-17.7 0-32 14.3-32 32v414c0 17.7 14.3 32 32 32h528c17.7 0 32-14.3 32-32V450c0-17.7-14.3-32-32-32zm-44 402H188V494h440v326z"
|
|
/>
|
|
<path
|
|
d="M819.3 328.5c-78.8-100.7-196-153.6-314.6-154.2l-.2-64c0-6.5-7.6-10.1-12.6-6.1l-128 101c-4 3.1-3.9 9.1 0 12.3L492 318.6c5.1 4 12.7.4 12.6-6.1v-63.9c12.9.1 25.9.9 38.8 2.5 42.1 5.2 82.1 18.2 119 38.7 38.1 21.2 71.2 49.7 98.4 84.3 27.1 34.7 46.7 73.7 58.1 115.8a325.95 325.95 0 016.5 140.9h74.9c14.8-103.6-11.3-213-81-302.3z"
|
|
/>
|
|
</svg>
|
|
</span>
|
|
</div>
|
|
<div
|
|
class="ant-image-preview-operations-operation ant-image-preview-operations-operation-rotateRight"
|
|
>
|
|
<span
|
|
aria-label="rotate-right"
|
|
class="anticon anticon-rotate-right"
|
|
role="img"
|
|
>
|
|
<svg
|
|
aria-hidden="true"
|
|
data-icon="rotate-right"
|
|
fill="currentColor"
|
|
focusable="false"
|
|
height="1em"
|
|
viewBox="64 64 896 896"
|
|
width="1em"
|
|
>
|
|
<defs>
|
|
<style />
|
|
</defs>
|
|
<path
|
|
d="M480.5 251.2c13-1.6 25.9-2.4 38.8-2.5v63.9c0 6.5 7.5 10.1 12.6 6.1L660 217.6c4-3.2 4-9.2 0-12.3l-128-101c-5.1-4-12.6-.4-12.6 6.1l-.2 64c-118.6.5-235.8 53.4-314.6 154.2A399.75 399.75 0 00123.5 631h74.9c-.9-5.3-1.7-10.7-2.4-16.1-5.1-42.1-2.1-84.1 8.9-124.8 11.4-42.2 31-81.1 58.1-115.8 27.2-34.7 60.3-63.2 98.4-84.3 37-20.6 76.9-33.6 119.1-38.8z"
|
|
/>
|
|
<path
|
|
d="M880 418H352c-17.7 0-32 14.3-32 32v414c0 17.7 14.3 32 32 32h528c17.7 0 32-14.3 32-32V450c0-17.7-14.3-32-32-32zm-44 402H396V494h440v326z"
|
|
/>
|
|
</svg>
|
|
</span>
|
|
</div>
|
|
<div
|
|
class="ant-image-preview-operations-operation ant-image-preview-operations-operation-zoomOut ant-image-preview-operations-operation-disabled"
|
|
>
|
|
<span
|
|
aria-label="zoom-out"
|
|
class="anticon anticon-zoom-out"
|
|
role="img"
|
|
>
|
|
<svg
|
|
aria-hidden="true"
|
|
data-icon="zoom-out"
|
|
fill="currentColor"
|
|
focusable="false"
|
|
height="1em"
|
|
viewBox="64 64 896 896"
|
|
width="1em"
|
|
>
|
|
<path
|
|
d="M637 443H325c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h312c4.4 0 8-3.6 8-8v-60c0-4.4-3.6-8-8-8zm284 424L775 721c122.1-148.9 113.6-369.5-26-509-148-148.1-388.4-148.1-537 0-148.1 148.6-148.1 389 0 537 139.5 139.6 360.1 148.1 509 26l146 146c3.2 2.8 8.3 2.8 11 0l43-43c2.8-2.7 2.8-7.8 0-11zM696 696c-118.8 118.7-311.2 118.7-430 0-118.7-118.8-118.7-311.2 0-430 118.8-118.7 311.2-118.7 430 0 118.7 118.8 118.7 311.2 0 430z"
|
|
/>
|
|
</svg>
|
|
</span>
|
|
</div>
|
|
<div
|
|
class="ant-image-preview-operations-operation ant-image-preview-operations-operation-zoomIn"
|
|
>
|
|
<span
|
|
aria-label="zoom-in"
|
|
class="anticon anticon-zoom-in"
|
|
role="img"
|
|
>
|
|
<svg
|
|
aria-hidden="true"
|
|
data-icon="zoom-in"
|
|
fill="currentColor"
|
|
focusable="false"
|
|
height="1em"
|
|
viewBox="64 64 896 896"
|
|
width="1em"
|
|
>
|
|
<path
|
|
d="M637 443H519V309c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v134H325c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h118v134c0 4.4 3.6 8 8 8h60c4.4 0 8-3.6 8-8V519h118c4.4 0 8-3.6 8-8v-60c0-4.4-3.6-8-8-8zm284 424L775 721c122.1-148.9 113.6-369.5-26-509-148-148.1-388.4-148.1-537 0-148.1 148.6-148.1 389 0 537 139.5 139.6 360.1 148.1 509 26l146 146c3.2 2.8 8.3 2.8 11 0l43-43c2.8-2.7 2.8-7.8 0-11zM696 696c-118.8 118.7-311.2 118.7-430 0-118.7-118.8-118.7-311.2 0-430 118.8-118.7 311.2-118.7 430 0 118.7 118.8 118.7 311.2 0 430z"
|
|
/>
|
|
</svg>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div
|
|
class="ant-image-preview-root"
|
|
>
|
|
<div
|
|
class="ant-image-preview-mask ant-fade-appear ant-fade-appear-start ant-fade"
|
|
/>
|
|
<div
|
|
class="ant-image-preview-wrap"
|
|
tabindex="-1"
|
|
>
|
|
<div
|
|
aria-modal="true"
|
|
class="ant-image-preview ant-zoom-appear ant-zoom-appear-prepare ant-zoom"
|
|
role="dialog"
|
|
>
|
|
<div
|
|
aria-hidden="true"
|
|
style="width: 0px; height: 0px; overflow: hidden; outline: none;"
|
|
tabindex="0"
|
|
/>
|
|
<div
|
|
class="ant-image-preview-content"
|
|
>
|
|
<div
|
|
class="ant-image-preview-body"
|
|
>
|
|
<div
|
|
class="ant-image-preview-img-wrapper"
|
|
>
|
|
<img
|
|
class="ant-image-preview-img"
|
|
src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
|
|
style="transform: translate3d(0px, 0px, 0) scale3d(1, 1, 1) rotate(0deg);"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
aria-hidden="true"
|
|
style="width: 0px; height: 0px; overflow: hidden; outline: none;"
|
|
tabindex="0"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
`;
|
|
|
|
exports[`Image rtl render component should be rendered correctly in RTL direction 1`] = `
|
|
<div
|
|
class="ant-image"
|
|
>
|
|
<img
|
|
class="ant-image-img"
|
|
/>
|
|
<div
|
|
class="ant-image-mask"
|
|
>
|
|
<div
|
|
class="ant-image-mask-info"
|
|
>
|
|
<span
|
|
aria-label="eye"
|
|
class="anticon anticon-eye"
|
|
role="img"
|
|
>
|
|
<svg
|
|
aria-hidden="true"
|
|
data-icon="eye"
|
|
fill="currentColor"
|
|
focusable="false"
|
|
height="1em"
|
|
viewBox="64 64 896 896"
|
|
width="1em"
|
|
>
|
|
<path
|
|
d="M942.2 486.2C847.4 286.5 704.1 186 512 186c-192.2 0-335.4 100.5-430.2 300.3a60.3 60.3 0 000 51.5C176.6 737.5 319.9 838 512 838c192.2 0 335.4-100.5 430.2-300.3 7.7-16.2 7.7-35 0-51.5zM512 766c-161.3 0-279.4-81.8-362.7-254C232.6 339.8 350.7 258 512 258c161.3 0 279.4 81.8 362.7 254C791.5 684.2 673.4 766 512 766zm-4-430c-97.2 0-176 78.8-176 176s78.8 176 176 176 176-78.8 176-176-78.8-176-176-176zm0 288c-61.9 0-112-50.1-112-112s50.1-112 112-112 112 50.1 112 112-50.1 112-112 112z"
|
|
/>
|
|
</svg>
|
|
</span>
|
|
Preview
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`;
|