mirror of
https://github.com/ant-design/ant-design.git
synced 2024-11-27 12:39:49 +08:00
demo: site & demo update (#50322)
This commit is contained in:
lijianan
GitHub
parent
09264eb1d1
commit
96a06943a5
@ -9,17 +9,22 @@ import type { ThemeType } from './IconSearch';
|
||||
|
||||
const useStyle = createStyles(({ token, css }) => ({
|
||||
anticonsList: css`
|
||||
margin: ${token.marginSM}px 0;
|
||||
margin: ${token.margin}px 0;
|
||||
overflow: hidden;
|
||||
direction: ltr;
|
||||
list-style: none;
|
||||
display: grid;
|
||||
grid-gap: ${token.margin}px;
|
||||
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
|
||||
padding: 0;
|
||||
li {
|
||||
display: inline-flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
float: left;
|
||||
width: 16.66%;
|
||||
width: 200px;
|
||||
height: 100px;
|
||||
margin: ${token.marginXXS}px 0;
|
||||
padding: ${token.paddingSM}px 0 0;
|
||||
overflow: hidden;
|
||||
color: #555;
|
||||
text-align: center;
|
||||
@ -28,10 +33,6 @@ const useStyle = createStyles(({ token, css }) => ({
|
||||
border-radius: ${token.borderRadiusSM}px;
|
||||
cursor: pointer;
|
||||
transition: all ${token.motionDurationSlow} ease-in-out;
|
||||
.rtl & {
|
||||
margin: ${token.marginXXS}px 0;
|
||||
padding: ${token.paddingSM}px 0 0;
|
||||
}
|
||||
${token.iconCls} {
|
||||
margin: ${token.marginSM}px 0 ${token.marginXS}px;
|
||||
font-size: 36px;
|
||||
@ -41,7 +42,7 @@ const useStyle = createStyles(({ token, css }) => ({
|
||||
}
|
||||
`,
|
||||
copiedCode: css`
|
||||
padding: 2px 4px;
|
||||
padding: 0 ${token.paddingXXS}px;
|
||||
font-size: ${token.fontSizeSM}px;
|
||||
background-color: ${token.colorBgLayout};
|
||||
border-radius: ${token.borderRadiusXS}px;
|
||||
|
||||
@ -36,10 +36,10 @@ const useStyle = createStyles(({ token, css }) => {
|
||||
inset-inline-start: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
color: #fff;
|
||||
line-height: 110px;
|
||||
line-height: 100px;
|
||||
color: ${token.colorTextLightSolid};
|
||||
text-align: center;
|
||||
background-color: #1677ff;
|
||||
background-color: ${token.colorPrimary};
|
||||
opacity: 0;
|
||||
transition: all ${token.motionDurationSlow} cubic-bezier(0.18, 0.89, 0.32, 1.28);
|
||||
}
|
||||
|
||||
@ -176,7 +176,7 @@ ${makeGrayPalette(index + 1)}
|
||||
|
||||
&-item &-value {
|
||||
position: relative;
|
||||
inset-inline-start: 3px;
|
||||
inset-inline-start: ${token.marginXXS}px;
|
||||
float: right;
|
||||
transform: scale(0.85);
|
||||
transform-origin: 100% 50%;
|
||||
|
||||
@ -113,17 +113,7 @@ const GlobalStyle: React.FC = () => {
|
||||
}
|
||||
|
||||
.markdown ul > li {
|
||||
margin-inline-start: ${token.marginMD}px;
|
||||
padding-inline-start: ${token.paddingXXS}px;
|
||||
list-style-type: circle;
|
||||
|
||||
.rtl & {
|
||||
margin-inline-end: ${token.marginMD}px;
|
||||
margin-inline-start: 0;
|
||||
padding-inline-end: ${token.paddingXXS}px;
|
||||
padding-inline-start: 0;
|
||||
}
|
||||
|
||||
&:empty {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@ -292,17 +292,18 @@ exports[`renders components/auto-complete/demo/certain-category.tsx extend conte
|
||||
<div
|
||||
class="ant-select-item ant-select-item-group"
|
||||
>
|
||||
<span>
|
||||
<div
|
||||
class="ant-flex ant-flex-align-center ant-flex-justify-space-between"
|
||||
>
|
||||
Libraries
|
||||
<a
|
||||
href="https://www.google.com/search?q=antd"
|
||||
rel="noopener noreferrer"
|
||||
style="float: right;"
|
||||
target="_blank"
|
||||
>
|
||||
more
|
||||
</a>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
aria-selected="false"
|
||||
@ -312,7 +313,7 @@ exports[`renders components/auto-complete/demo/certain-category.tsx extend conte
|
||||
class="ant-select-item-option-content"
|
||||
>
|
||||
<div
|
||||
style="display: flex; justify-content: space-between;"
|
||||
class="ant-flex ant-flex-align-center ant-flex-justify-space-between"
|
||||
>
|
||||
AntDesign
|
||||
<span>
|
||||
@ -354,7 +355,7 @@ exports[`renders components/auto-complete/demo/certain-category.tsx extend conte
|
||||
class="ant-select-item-option-content"
|
||||
>
|
||||
<div
|
||||
style="display: flex; justify-content: space-between;"
|
||||
class="ant-flex ant-flex-align-center ant-flex-justify-space-between"
|
||||
>
|
||||
AntDesign UI
|
||||
<span>
|
||||
@ -391,17 +392,18 @@ exports[`renders components/auto-complete/demo/certain-category.tsx extend conte
|
||||
<div
|
||||
class="ant-select-item ant-select-item-group"
|
||||
>
|
||||
<span>
|
||||
<div
|
||||
class="ant-flex ant-flex-align-center ant-flex-justify-space-between"
|
||||
>
|
||||
Solutions
|
||||
<a
|
||||
href="https://www.google.com/search?q=antd"
|
||||
rel="noopener noreferrer"
|
||||
style="float: right;"
|
||||
target="_blank"
|
||||
>
|
||||
more
|
||||
</a>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
aria-selected="false"
|
||||
@ -411,7 +413,7 @@ exports[`renders components/auto-complete/demo/certain-category.tsx extend conte
|
||||
class="ant-select-item-option-content"
|
||||
>
|
||||
<div
|
||||
style="display: flex; justify-content: space-between;"
|
||||
class="ant-flex ant-flex-align-center ant-flex-justify-space-between"
|
||||
>
|
||||
AntDesign UI FAQ
|
||||
<span>
|
||||
@ -453,7 +455,7 @@ exports[`renders components/auto-complete/demo/certain-category.tsx extend conte
|
||||
class="ant-select-item-option-content"
|
||||
>
|
||||
<div
|
||||
style="display: flex; justify-content: space-between;"
|
||||
class="ant-flex ant-flex-align-center ant-flex-justify-space-between"
|
||||
>
|
||||
AntDesign FAQ
|
||||
<span>
|
||||
@ -490,17 +492,18 @@ exports[`renders components/auto-complete/demo/certain-category.tsx extend conte
|
||||
<div
|
||||
class="ant-select-item ant-select-item-group"
|
||||
>
|
||||
<span>
|
||||
<div
|
||||
class="ant-flex ant-flex-align-center ant-flex-justify-space-between"
|
||||
>
|
||||
Articles
|
||||
<a
|
||||
href="https://www.google.com/search?q=antd"
|
||||
rel="noopener noreferrer"
|
||||
style="float: right;"
|
||||
target="_blank"
|
||||
>
|
||||
more
|
||||
</a>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
aria-selected="false"
|
||||
@ -510,7 +513,7 @@ exports[`renders components/auto-complete/demo/certain-category.tsx extend conte
|
||||
class="ant-select-item-option-content"
|
||||
>
|
||||
<div
|
||||
style="display: flex; justify-content: space-between;"
|
||||
class="ant-flex ant-flex-align-center ant-flex-justify-space-between"
|
||||
>
|
||||
AntDesign design language
|
||||
<span>
|
||||
|
||||
@ -1,49 +1,39 @@
|
||||
import React from 'react';
|
||||
import { UserOutlined } from '@ant-design/icons';
|
||||
import { AutoComplete, Input } from 'antd';
|
||||
import { AutoComplete, Flex, Input } from 'antd';
|
||||
|
||||
const renderTitle = (title: string) => (
|
||||
<span>
|
||||
{title}
|
||||
<a
|
||||
style={{ float: 'right' }}
|
||||
href="https://www.google.com/search?q=antd"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
const Title: React.FC<Readonly<{ title?: string }>> = (props) => (
|
||||
<Flex align="center" justify="space-between">
|
||||
{props.title}
|
||||
<a href="https://www.google.com/search?q=antd" target="_blank" rel="noopener noreferrer">
|
||||
more
|
||||
</a>
|
||||
</span>
|
||||
</Flex>
|
||||
);
|
||||
|
||||
const renderItem = (title: string, count: number) => ({
|
||||
value: title,
|
||||
label: (
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
}}
|
||||
>
|
||||
<Flex align="center" justify="space-between">
|
||||
{title}
|
||||
<span>
|
||||
<UserOutlined /> {count}
|
||||
</span>
|
||||
</div>
|
||||
</Flex>
|
||||
),
|
||||
});
|
||||
|
||||
const options = [
|
||||
{
|
||||
label: renderTitle('Libraries'),
|
||||
label: <Title title="Libraries" />,
|
||||
options: [renderItem('AntDesign', 10000), renderItem('AntDesign UI', 10600)],
|
||||
},
|
||||
{
|
||||
label: renderTitle('Solutions'),
|
||||
label: <Title title="Solutions" />,
|
||||
options: [renderItem('AntDesign UI FAQ', 60100), renderItem('AntDesign FAQ', 30010)],
|
||||
},
|
||||
{
|
||||
label: renderTitle('Articles'),
|
||||
label: <Title title="Articles" />,
|
||||
options: [renderItem('AntDesign design language', 100000)],
|
||||
},
|
||||
];
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@ -82,10 +82,11 @@ exports[`renders components/popconfirm/demo/locale.tsx correctly 1`] = `
|
||||
|
||||
exports[`renders components/popconfirm/demo/placement.tsx correctly 1`] = `
|
||||
<div
|
||||
class="demo"
|
||||
class="demo ant-flex ant-flex-align-center ant-flex-justify-center ant-flex-vertical"
|
||||
>
|
||||
<div
|
||||
style="margin-inline-start:80px;white-space:nowrap"
|
||||
class="ant-flex ant-flex-align-center ant-flex-justify-center"
|
||||
style="white-space:nowrap"
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
@ -116,69 +117,75 @@ exports[`renders components/popconfirm/demo/placement.tsx correctly 1`] = `
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
style="width:80px;float:inline-start"
|
||||
class="ant-flex ant-flex-align-center ant-flex-justify-space-between"
|
||||
style="width:432px"
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
style="width:80px;margin:4px"
|
||||
type="button"
|
||||
<div
|
||||
class="ant-flex ant-flex-align-center ant-flex-vertical"
|
||||
>
|
||||
<span>
|
||||
LT
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
style="width:80px;margin:4px"
|
||||
type="button"
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
style="width:80px;margin:4px"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
LT
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
style="width:80px;margin:4px"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
Left
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
style="width:80px;margin:4px"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
LB
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
class="ant-flex ant-flex-align-center ant-flex-vertical"
|
||||
>
|
||||
<span>
|
||||
Left
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
style="width:80px;margin:4px"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
LB
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
style="width:80px;margin:4px"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
RT
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
style="width:80px;margin:4px"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
Right
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
style="width:80px;margin:4px"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
RB
|
||||
</span>
|
||||
</button>
|
||||
</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>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
style="width:80px;margin:4px"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
Right
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
style="width:80px;margin:4px"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
RB
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
style="margin-inline-start:80px;clear:both;white-space:nowrap"
|
||||
class="ant-flex ant-flex-align-center ant-flex-justify-center"
|
||||
style="white-space:nowrap"
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
|
||||
@ -5,19 +5,3 @@
|
||||
## en-US
|
||||
|
||||
There are 12 `placement` options available. Use `arrow: { pointAtCenter: true }` if you want the arrow to point at the center of target.
|
||||
|
||||
<style>
|
||||
#popconfirm-demo-placement .ant-btn {
|
||||
margin-inline-start: 0;
|
||||
margin-inline-end: 8px;
|
||||
margin-bottom: 8px;
|
||||
width: 70px;
|
||||
text-align: center;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
#popconfirm-demo-placement .ant-btn-rtl {
|
||||
margin-inline-start: 8px;
|
||||
margin-inline-end: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,18 +1,14 @@
|
||||
import React from 'react';
|
||||
import { Button, ConfigProvider, Popconfirm } from 'antd';
|
||||
import { Button, ConfigProvider, Flex, Popconfirm } from 'antd';
|
||||
|
||||
const text = 'Are you sure to delete this task?';
|
||||
const description = 'Delete the task';
|
||||
const buttonWidth = 80;
|
||||
|
||||
const App: React.FC = () => (
|
||||
<ConfigProvider
|
||||
button={{
|
||||
style: { width: buttonWidth, margin: 4 },
|
||||
}}
|
||||
>
|
||||
<div className="demo">
|
||||
<div style={{ marginInlineStart: buttonWidth, whiteSpace: 'nowrap' }}>
|
||||
<ConfigProvider button={{ style: { width: buttonWidth, margin: 4 } }}>
|
||||
<Flex vertical justify="center" align="center" className="demo">
|
||||
<Flex justify="center" align="center" style={{ whiteSpace: 'nowrap' }}>
|
||||
<Popconfirm
|
||||
placement="topLeft"
|
||||
title={text}
|
||||
@ -40,66 +36,68 @@ const App: React.FC = () => (
|
||||
>
|
||||
<Button>TR</Button>
|
||||
</Popconfirm>
|
||||
</div>
|
||||
<div style={{ width: buttonWidth, float: 'inline-start' }}>
|
||||
<Popconfirm
|
||||
placement="leftTop"
|
||||
title={text}
|
||||
description={description}
|
||||
okText="Yes"
|
||||
cancelText="No"
|
||||
>
|
||||
<Button>LT</Button>
|
||||
</Popconfirm>
|
||||
<Popconfirm
|
||||
placement="left"
|
||||
title={text}
|
||||
description={description}
|
||||
okText="Yes"
|
||||
cancelText="No"
|
||||
>
|
||||
<Button>Left</Button>
|
||||
</Popconfirm>
|
||||
<Popconfirm
|
||||
placement="leftBottom"
|
||||
title={text}
|
||||
description={description}
|
||||
okText="Yes"
|
||||
cancelText="No"
|
||||
>
|
||||
<Button>LB</Button>
|
||||
</Popconfirm>
|
||||
</div>
|
||||
<div style={{ width: buttonWidth, marginInlineStart: buttonWidth * 4 + 24 }}>
|
||||
<Popconfirm
|
||||
placement="rightTop"
|
||||
title={text}
|
||||
description={description}
|
||||
okText="Yes"
|
||||
cancelText="No"
|
||||
>
|
||||
<Button>RT</Button>
|
||||
</Popconfirm>
|
||||
<Popconfirm
|
||||
placement="right"
|
||||
title={text}
|
||||
description={description}
|
||||
okText="Yes"
|
||||
cancelText="No"
|
||||
>
|
||||
<Button>Right</Button>
|
||||
</Popconfirm>
|
||||
<Popconfirm
|
||||
placement="rightBottom"
|
||||
title={text}
|
||||
description={description}
|
||||
okText="Yes"
|
||||
cancelText="No"
|
||||
>
|
||||
<Button>RB</Button>
|
||||
</Popconfirm>
|
||||
</div>
|
||||
<div style={{ marginInlineStart: buttonWidth, clear: 'both', whiteSpace: 'nowrap' }}>
|
||||
</Flex>
|
||||
<Flex style={{ width: buttonWidth * 5 + 32 }} justify="space-between" align="center">
|
||||
<Flex align="center" vertical>
|
||||
<Popconfirm
|
||||
placement="leftTop"
|
||||
title={text}
|
||||
description={description}
|
||||
okText="Yes"
|
||||
cancelText="No"
|
||||
>
|
||||
<Button>LT</Button>
|
||||
</Popconfirm>
|
||||
<Popconfirm
|
||||
placement="left"
|
||||
title={text}
|
||||
description={description}
|
||||
okText="Yes"
|
||||
cancelText="No"
|
||||
>
|
||||
<Button>Left</Button>
|
||||
</Popconfirm>
|
||||
<Popconfirm
|
||||
placement="leftBottom"
|
||||
title={text}
|
||||
description={description}
|
||||
okText="Yes"
|
||||
cancelText="No"
|
||||
>
|
||||
<Button>LB</Button>
|
||||
</Popconfirm>
|
||||
</Flex>
|
||||
<Flex align="center" vertical>
|
||||
<Popconfirm
|
||||
placement="rightTop"
|
||||
title={text}
|
||||
description={description}
|
||||
okText="Yes"
|
||||
cancelText="No"
|
||||
>
|
||||
<Button>RT</Button>
|
||||
</Popconfirm>
|
||||
<Popconfirm
|
||||
placement="right"
|
||||
title={text}
|
||||
description={description}
|
||||
okText="Yes"
|
||||
cancelText="No"
|
||||
>
|
||||
<Button>Right</Button>
|
||||
</Popconfirm>
|
||||
<Popconfirm
|
||||
placement="rightBottom"
|
||||
title={text}
|
||||
description={description}
|
||||
okText="Yes"
|
||||
cancelText="No"
|
||||
>
|
||||
<Button>RB</Button>
|
||||
</Popconfirm>
|
||||
</Flex>
|
||||
</Flex>
|
||||
<Flex justify="center" align="center" style={{ whiteSpace: 'nowrap' }}>
|
||||
<Popconfirm
|
||||
placement="bottomLeft"
|
||||
title={text}
|
||||
@ -127,8 +125,8 @@ const App: React.FC = () => (
|
||||
>
|
||||
<Button>BR</Button>
|
||||
</Popconfirm>
|
||||
</div>
|
||||
</div>
|
||||
</Flex>
|
||||
</Flex>
|
||||
</ConfigProvider>
|
||||
);
|
||||
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@ -55,10 +55,11 @@ Array [
|
||||
</div>
|
||||
</div>,
|
||||
<div
|
||||
class="demo"
|
||||
class="demo ant-flex ant-flex-align-center ant-flex-justify-center ant-flex-vertical"
|
||||
>
|
||||
<div
|
||||
style="margin-inline-start:84px;white-space:nowrap"
|
||||
class="ant-flex ant-flex-align-center ant-flex-justify-center"
|
||||
style="white-space:nowrap"
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
@ -89,69 +90,75 @@ Array [
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
style="width:80px;float:inline-start"
|
||||
class="ant-flex ant-flex-align-center ant-flex-justify-space-between"
|
||||
style="width:432px"
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
style="width:80px;margin:4px"
|
||||
type="button"
|
||||
<div
|
||||
class="ant-flex ant-flex-align-center ant-flex-vertical"
|
||||
>
|
||||
<span>
|
||||
LT
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
style="width:80px;margin:4px"
|
||||
type="button"
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
style="width:80px;margin:4px"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
LT
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
style="width:80px;margin:4px"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
Left
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
style="width:80px;margin:4px"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
LB
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
class="ant-flex ant-flex-align-center ant-flex-vertical"
|
||||
>
|
||||
<span>
|
||||
Left
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
style="width:80px;margin:4px"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
LB
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
style="width:80px;margin:4px"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
RT
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
style="width:80px;margin:4px"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
Right
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
style="width:80px;margin:4px"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
RB
|
||||
</span>
|
||||
</button>
|
||||
</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>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
style="width:80px;margin:4px"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
Right
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
style="width:80px;margin:4px"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
RB
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
style="margin-inline-start:80px;clear:both;white-space:nowrap"
|
||||
class="ant-flex ant-flex-align-center ant-flex-justify-center"
|
||||
style="white-space:nowrap"
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
@ -293,10 +300,11 @@ exports[`renders components/popover/demo/hover-with-click.tsx correctly 1`] = `
|
||||
|
||||
exports[`renders components/popover/demo/placement.tsx correctly 1`] = `
|
||||
<div
|
||||
class="demo"
|
||||
class="demo ant-flex ant-flex-align-center ant-flex-justify-center ant-flex-vertical"
|
||||
>
|
||||
<div
|
||||
style="margin-inline-start:84px;white-space:nowrap"
|
||||
class="ant-flex ant-flex-align-center ant-flex-justify-center"
|
||||
style="white-space:nowrap"
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
@ -327,69 +335,75 @@ exports[`renders components/popover/demo/placement.tsx correctly 1`] = `
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
style="width:80px;float:inline-start"
|
||||
class="ant-flex ant-flex-align-center ant-flex-justify-space-between"
|
||||
style="width:432px"
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
style="width:80px;margin:4px"
|
||||
type="button"
|
||||
<div
|
||||
class="ant-flex ant-flex-align-center ant-flex-vertical"
|
||||
>
|
||||
<span>
|
||||
LT
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
style="width:80px;margin:4px"
|
||||
type="button"
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
style="width:80px;margin:4px"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
LT
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
style="width:80px;margin:4px"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
Left
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
style="width:80px;margin:4px"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
LB
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
class="ant-flex ant-flex-align-center ant-flex-vertical"
|
||||
>
|
||||
<span>
|
||||
Left
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
style="width:80px;margin:4px"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
LB
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
style="width:80px;margin:4px"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
RT
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
style="width:80px;margin:4px"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
Right
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
style="width:80px;margin:4px"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
RB
|
||||
</span>
|
||||
</button>
|
||||
</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>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
style="width:80px;margin:4px"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
Right
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
style="width:80px;margin:4px"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
RB
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
style="margin-inline-start:80px;clear:both;white-space:nowrap"
|
||||
class="ant-flex ant-flex-align-center ant-flex-justify-center"
|
||||
style="white-space:nowrap"
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
import React, { useMemo, useState } from 'react';
|
||||
import { Button, ConfigProvider, Popover, Segmented } from 'antd';
|
||||
import { Button, ConfigProvider, Flex, Popover, Segmented } from 'antd';
|
||||
import type { PopoverProps } from 'antd';
|
||||
|
||||
const text = <span>Title</span>;
|
||||
|
||||
@ -13,9 +14,9 @@ const content = (
|
||||
);
|
||||
|
||||
const App: React.FC = () => {
|
||||
const [arrow, setArrow] = useState('Show');
|
||||
const [arrow, setArrow] = useState<'Show' | 'Hide' | 'Center'>('Show');
|
||||
|
||||
const mergedArrow = useMemo(() => {
|
||||
const mergedArrow = useMemo<PopoverProps['arrow']>(() => {
|
||||
if (arrow === 'Hide') {
|
||||
return false;
|
||||
}
|
||||
@ -33,11 +34,11 @@ const App: React.FC = () => {
|
||||
<ConfigProvider button={{ style: { width: buttonWidth, margin: 4 } }}>
|
||||
<Segmented
|
||||
options={['Show', 'Hide', 'Center']}
|
||||
onChange={(val: string) => setArrow(val)}
|
||||
onChange={(val: 'Show' | 'Hide' | 'Center') => setArrow(val)}
|
||||
style={{ marginBottom: 24 }}
|
||||
/>
|
||||
<div className="demo">
|
||||
<div style={{ marginInlineStart: buttonWidth + 4, whiteSpace: 'nowrap' }}>
|
||||
<Flex vertical justify="center" align="center" className="demo">
|
||||
<Flex justify="center" align="center" style={{ whiteSpace: 'nowrap' }}>
|
||||
<Popover placement="topLeft" title={text} content={content} arrow={mergedArrow}>
|
||||
<Button>TL</Button>
|
||||
</Popover>
|
||||
@ -47,30 +48,32 @@ const App: React.FC = () => {
|
||||
<Popover placement="topRight" title={text} content={content} arrow={mergedArrow}>
|
||||
<Button>TR</Button>
|
||||
</Popover>
|
||||
</div>
|
||||
<div style={{ width: buttonWidth, float: 'inline-start' }}>
|
||||
<Popover placement="leftTop" title={text} content={content} arrow={mergedArrow}>
|
||||
<Button>LT</Button>
|
||||
</Popover>
|
||||
<Popover placement="left" title={text} content={content} arrow={mergedArrow}>
|
||||
<Button>Left</Button>
|
||||
</Popover>
|
||||
<Popover placement="leftBottom" title={text} content={content} arrow={mergedArrow}>
|
||||
<Button>LB</Button>
|
||||
</Popover>
|
||||
</div>
|
||||
<div style={{ width: buttonWidth, marginInlineStart: buttonWidth * 4 + 24 }}>
|
||||
<Popover placement="rightTop" title={text} content={content} arrow={mergedArrow}>
|
||||
<Button>RT</Button>
|
||||
</Popover>
|
||||
<Popover placement="right" title={text} content={content} arrow={mergedArrow}>
|
||||
<Button>Right</Button>
|
||||
</Popover>
|
||||
<Popover placement="rightBottom" title={text} content={content} arrow={mergedArrow}>
|
||||
<Button>RB</Button>
|
||||
</Popover>
|
||||
</div>
|
||||
<div style={{ marginInlineStart: buttonWidth, clear: 'both', whiteSpace: 'nowrap' }}>
|
||||
</Flex>
|
||||
<Flex style={{ width: buttonWidth * 5 + 32 }} justify="space-between" align="center">
|
||||
<Flex align="center" vertical>
|
||||
<Popover placement="leftTop" title={text} content={content} arrow={mergedArrow}>
|
||||
<Button>LT</Button>
|
||||
</Popover>
|
||||
<Popover placement="left" title={text} content={content} arrow={mergedArrow}>
|
||||
<Button>Left</Button>
|
||||
</Popover>
|
||||
<Popover placement="leftBottom" title={text} content={content} arrow={mergedArrow}>
|
||||
<Button>LB</Button>
|
||||
</Popover>
|
||||
</Flex>
|
||||
<Flex align="center" vertical>
|
||||
<Popover placement="rightTop" title={text} content={content} arrow={mergedArrow}>
|
||||
<Button>RT</Button>
|
||||
</Popover>
|
||||
<Popover placement="right" title={text} content={content} arrow={mergedArrow}>
|
||||
<Button>Right</Button>
|
||||
</Popover>
|
||||
<Popover placement="rightBottom" title={text} content={content} arrow={mergedArrow}>
|
||||
<Button>RB</Button>
|
||||
</Popover>
|
||||
</Flex>
|
||||
</Flex>
|
||||
<Flex justify="center" align="center" style={{ whiteSpace: 'nowrap' }}>
|
||||
<Popover placement="bottomLeft" title={text} content={content} arrow={mergedArrow}>
|
||||
<Button>BL</Button>
|
||||
</Popover>
|
||||
@ -80,8 +83,8 @@ const App: React.FC = () => {
|
||||
<Popover placement="bottomRight" title={text} content={content} arrow={mergedArrow}>
|
||||
<Button>BR</Button>
|
||||
</Popover>
|
||||
</div>
|
||||
</div>
|
||||
</Flex>
|
||||
</Flex>
|
||||
</ConfigProvider>
|
||||
);
|
||||
};
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import React from 'react';
|
||||
import { Button, ConfigProvider, Popover } from 'antd';
|
||||
import { Button, ConfigProvider, Flex, Popover } from 'antd';
|
||||
|
||||
const text = <span>Title</span>;
|
||||
|
||||
@ -13,13 +13,9 @@ const content = (
|
||||
const buttonWidth = 80;
|
||||
|
||||
const App: React.FC = () => (
|
||||
<ConfigProvider
|
||||
button={{
|
||||
style: { width: buttonWidth, margin: 4 },
|
||||
}}
|
||||
>
|
||||
<div className="demo">
|
||||
<div style={{ marginInlineStart: buttonWidth + 4, whiteSpace: 'nowrap' }}>
|
||||
<ConfigProvider button={{ style: { width: buttonWidth, margin: 4 } }}>
|
||||
<Flex vertical justify="center" align="center" className="demo">
|
||||
<Flex justify="center" align="center" style={{ whiteSpace: 'nowrap' }}>
|
||||
<Popover placement="topLeft" title={text} content={content}>
|
||||
<Button>TL</Button>
|
||||
</Popover>
|
||||
@ -29,30 +25,32 @@ const App: React.FC = () => (
|
||||
<Popover placement="topRight" title={text} content={content}>
|
||||
<Button>TR</Button>
|
||||
</Popover>
|
||||
</div>
|
||||
<div style={{ width: buttonWidth, float: 'inline-start' }}>
|
||||
<Popover placement="leftTop" title={text} content={content}>
|
||||
<Button>LT</Button>
|
||||
</Popover>
|
||||
<Popover placement="left" title={text} content={content}>
|
||||
<Button>Left</Button>
|
||||
</Popover>
|
||||
<Popover placement="leftBottom" title={text} content={content}>
|
||||
<Button>LB</Button>
|
||||
</Popover>
|
||||
</div>
|
||||
<div style={{ width: buttonWidth, marginInlineStart: buttonWidth * 4 + 24 }}>
|
||||
<Popover placement="rightTop" title={text} content={content}>
|
||||
<Button>RT</Button>
|
||||
</Popover>
|
||||
<Popover placement="right" title={text} content={content}>
|
||||
<Button>Right</Button>
|
||||
</Popover>
|
||||
<Popover placement="rightBottom" title={text} content={content}>
|
||||
<Button>RB</Button>
|
||||
</Popover>
|
||||
</div>
|
||||
<div style={{ marginInlineStart: buttonWidth, clear: 'both', whiteSpace: 'nowrap' }}>
|
||||
</Flex>
|
||||
<Flex style={{ width: buttonWidth * 5 + 32 }} justify="space-between" align="center">
|
||||
<Flex align="center" vertical>
|
||||
<Popover placement="leftTop" title={text} content={content}>
|
||||
<Button>LT</Button>
|
||||
</Popover>
|
||||
<Popover placement="left" title={text} content={content}>
|
||||
<Button>Left</Button>
|
||||
</Popover>
|
||||
<Popover placement="leftBottom" title={text} content={content}>
|
||||
<Button>LB</Button>
|
||||
</Popover>
|
||||
</Flex>
|
||||
<Flex align="center" vertical>
|
||||
<Popover placement="rightTop" title={text} content={content}>
|
||||
<Button>RT</Button>
|
||||
</Popover>
|
||||
<Popover placement="right" title={text} content={content}>
|
||||
<Button>Right</Button>
|
||||
</Popover>
|
||||
<Popover placement="rightBottom" title={text} content={content}>
|
||||
<Button>RB</Button>
|
||||
</Popover>
|
||||
</Flex>
|
||||
</Flex>
|
||||
<Flex justify="center" align="center" style={{ whiteSpace: 'nowrap' }}>
|
||||
<Popover placement="bottomLeft" title={text} content={content}>
|
||||
<Button>BL</Button>
|
||||
</Popover>
|
||||
@ -62,8 +60,8 @@ const App: React.FC = () => (
|
||||
<Popover placement="bottomRight" title={text} content={content}>
|
||||
<Button>BR</Button>
|
||||
</Popover>
|
||||
</div>
|
||||
</div>
|
||||
</Flex>
|
||||
</Flex>
|
||||
</ConfigProvider>
|
||||
);
|
||||
|
||||
|
||||
@ -55,10 +55,11 @@ Array [
|
||||
</div>
|
||||
</div>,
|
||||
<div
|
||||
class="demo"
|
||||
class="demo ant-flex ant-flex-align-center ant-flex-justify-center ant-flex-vertical"
|
||||
>
|
||||
<div
|
||||
style="margin-inline-start: 80px; white-space: nowrap;"
|
||||
class="ant-flex ant-flex-align-center ant-flex-justify-center"
|
||||
style="white-space: nowrap;"
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
@ -152,195 +153,201 @@ Array [
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
style="width: 80px; float: inline-start;"
|
||||
class="ant-flex ant-flex-align-center ant-flex-justify-space-between"
|
||||
style="width: 432px;"
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
style="width: 80px; margin: 4px;"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
LT
|
||||
</span>
|
||||
</button>
|
||||
<div
|
||||
class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-tooltip-placement-leftTop"
|
||||
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
|
||||
class="ant-flex ant-flex-align-center ant-flex-vertical"
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
style="width: 80px; margin: 4px;"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
LT
|
||||
</span>
|
||||
</button>
|
||||
<div
|
||||
class="ant-tooltip-arrow"
|
||||
style="position: absolute;"
|
||||
/>
|
||||
<div
|
||||
class="ant-tooltip-content"
|
||||
class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-tooltip-placement-leftTop"
|
||||
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
|
||||
>
|
||||
<div
|
||||
class="ant-tooltip-inner"
|
||||
role="tooltip"
|
||||
class="ant-tooltip-arrow"
|
||||
style="position: absolute;"
|
||||
/>
|
||||
<div
|
||||
class="ant-tooltip-content"
|
||||
>
|
||||
<span>
|
||||
prompt text
|
||||
</span>
|
||||
<div
|
||||
class="ant-tooltip-inner"
|
||||
role="tooltip"
|
||||
>
|
||||
<span>
|
||||
prompt text
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
style="width: 80px; margin: 4px;"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
Left
|
||||
</span>
|
||||
</button>
|
||||
<div
|
||||
class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-tooltip-placement-left"
|
||||
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
|
||||
>
|
||||
<div
|
||||
class="ant-tooltip-arrow"
|
||||
style="position: absolute; top: 0px; right: 0px;"
|
||||
/>
|
||||
<div
|
||||
class="ant-tooltip-content"
|
||||
>
|
||||
<div
|
||||
class="ant-tooltip-inner"
|
||||
role="tooltip"
|
||||
>
|
||||
<span>
|
||||
prompt text
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
style="width: 80px; margin: 4px;"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
LB
|
||||
</span>
|
||||
</button>
|
||||
<div
|
||||
class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-tooltip-placement-leftBottom"
|
||||
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
|
||||
>
|
||||
<div
|
||||
class="ant-tooltip-arrow"
|
||||
style="position: absolute;"
|
||||
/>
|
||||
<div
|
||||
class="ant-tooltip-content"
|
||||
>
|
||||
<div
|
||||
class="ant-tooltip-inner"
|
||||
role="tooltip"
|
||||
>
|
||||
<span>
|
||||
prompt text
|
||||
</span>
|
||||
</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-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-tooltip-placement-left"
|
||||
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
|
||||
class="ant-flex ant-flex-align-center ant-flex-vertical"
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
style="width: 80px; margin: 4px;"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
RT
|
||||
</span>
|
||||
</button>
|
||||
<div
|
||||
class="ant-tooltip-arrow"
|
||||
style="position: absolute; top: 0px; right: 0px;"
|
||||
/>
|
||||
<div
|
||||
class="ant-tooltip-content"
|
||||
class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-tooltip-placement-rightTop"
|
||||
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
|
||||
>
|
||||
<div
|
||||
class="ant-tooltip-inner"
|
||||
role="tooltip"
|
||||
class="ant-tooltip-arrow"
|
||||
style="position: absolute;"
|
||||
/>
|
||||
<div
|
||||
class="ant-tooltip-content"
|
||||
>
|
||||
<span>
|
||||
prompt text
|
||||
</span>
|
||||
<div
|
||||
class="ant-tooltip-inner"
|
||||
role="tooltip"
|
||||
>
|
||||
<span>
|
||||
prompt text
|
||||
</span>
|
||||
</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-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-tooltip-placement-leftBottom"
|
||||
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
style="width: 80px; margin: 4px;"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
Right
|
||||
</span>
|
||||
</button>
|
||||
<div
|
||||
class="ant-tooltip-arrow"
|
||||
style="position: absolute;"
|
||||
/>
|
||||
<div
|
||||
class="ant-tooltip-content"
|
||||
class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-tooltip-placement-right"
|
||||
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
|
||||
>
|
||||
<div
|
||||
class="ant-tooltip-inner"
|
||||
role="tooltip"
|
||||
class="ant-tooltip-arrow"
|
||||
style="position: absolute; top: 0px; left: 0px;"
|
||||
/>
|
||||
<div
|
||||
class="ant-tooltip-content"
|
||||
>
|
||||
<span>
|
||||
prompt text
|
||||
</span>
|
||||
<div
|
||||
class="ant-tooltip-inner"
|
||||
role="tooltip"
|
||||
>
|
||||
<span>
|
||||
prompt text
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
style="width: 80px; margin: 4px;"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
RB
|
||||
</span>
|
||||
</button>
|
||||
<div
|
||||
class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-tooltip-placement-rightBottom"
|
||||
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
|
||||
>
|
||||
<div
|
||||
class="ant-tooltip-arrow"
|
||||
style="position: absolute;"
|
||||
/>
|
||||
<div
|
||||
class="ant-tooltip-content"
|
||||
>
|
||||
<div
|
||||
class="ant-tooltip-inner"
|
||||
role="tooltip"
|
||||
>
|
||||
<span>
|
||||
prompt text
|
||||
</span>
|
||||
</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-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-tooltip-placement-rightTop"
|
||||
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
|
||||
>
|
||||
<div
|
||||
class="ant-tooltip-arrow"
|
||||
style="position: absolute;"
|
||||
/>
|
||||
<div
|
||||
class="ant-tooltip-content"
|
||||
>
|
||||
<div
|
||||
class="ant-tooltip-inner"
|
||||
role="tooltip"
|
||||
>
|
||||
<span>
|
||||
prompt text
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
style="width: 80px; margin: 4px;"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
Right
|
||||
</span>
|
||||
</button>
|
||||
<div
|
||||
class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-tooltip-placement-right"
|
||||
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
|
||||
>
|
||||
<div
|
||||
class="ant-tooltip-arrow"
|
||||
style="position: absolute; top: 0px; left: 0px;"
|
||||
/>
|
||||
<div
|
||||
class="ant-tooltip-content"
|
||||
>
|
||||
<div
|
||||
class="ant-tooltip-inner"
|
||||
role="tooltip"
|
||||
>
|
||||
<span>
|
||||
prompt text
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
style="width: 80px; margin: 4px;"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
RB
|
||||
</span>
|
||||
</button>
|
||||
<div
|
||||
class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-tooltip-placement-rightBottom"
|
||||
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
|
||||
>
|
||||
<div
|
||||
class="ant-tooltip-arrow"
|
||||
style="position: absolute;"
|
||||
/>
|
||||
<div
|
||||
class="ant-tooltip-content"
|
||||
>
|
||||
<div
|
||||
class="ant-tooltip-inner"
|
||||
role="tooltip"
|
||||
>
|
||||
<span>
|
||||
prompt text
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
style="margin-inline-start: 80px; clear: both; white-space: nowrap;"
|
||||
class="ant-flex ant-flex-align-center ant-flex-justify-center"
|
||||
style="white-space: nowrap;"
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
@ -1675,10 +1682,11 @@ exports[`renders components/tooltip/demo/disabled-children.tsx extend context co
|
||||
|
||||
exports[`renders components/tooltip/demo/placement.tsx extend context correctly 1`] = `
|
||||
<div
|
||||
class="demo"
|
||||
class="demo ant-flex ant-flex-align-center ant-flex-justify-center ant-flex-vertical"
|
||||
>
|
||||
<div
|
||||
style="margin-inline-start: 80px; white-space: nowrap;"
|
||||
class="ant-flex ant-flex-align-center ant-flex-justify-center"
|
||||
style="white-space: nowrap;"
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
@ -1772,195 +1780,201 @@ exports[`renders components/tooltip/demo/placement.tsx extend context correctly
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
style="width: 80px; float: inline-start;"
|
||||
class="ant-flex ant-flex-align-center ant-flex-justify-space-between"
|
||||
style="width: 432px;"
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
style="width: 80px; margin: 4px;"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
LT
|
||||
</span>
|
||||
</button>
|
||||
<div
|
||||
class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-tooltip-placement-leftTop"
|
||||
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
|
||||
class="ant-flex ant-flex-align-center ant-flex-vertical"
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
style="width: 80px; margin: 4px;"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
LT
|
||||
</span>
|
||||
</button>
|
||||
<div
|
||||
class="ant-tooltip-arrow"
|
||||
style="position: absolute;"
|
||||
/>
|
||||
<div
|
||||
class="ant-tooltip-content"
|
||||
class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-tooltip-placement-leftTop"
|
||||
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
|
||||
>
|
||||
<div
|
||||
class="ant-tooltip-inner"
|
||||
role="tooltip"
|
||||
class="ant-tooltip-arrow"
|
||||
style="position: absolute;"
|
||||
/>
|
||||
<div
|
||||
class="ant-tooltip-content"
|
||||
>
|
||||
<span>
|
||||
prompt text
|
||||
</span>
|
||||
<div
|
||||
class="ant-tooltip-inner"
|
||||
role="tooltip"
|
||||
>
|
||||
<span>
|
||||
prompt text
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
style="width: 80px; margin: 4px;"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
Left
|
||||
</span>
|
||||
</button>
|
||||
<div
|
||||
class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-tooltip-placement-left"
|
||||
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
|
||||
>
|
||||
<div
|
||||
class="ant-tooltip-arrow"
|
||||
style="position: absolute; top: 0px; right: 0px;"
|
||||
/>
|
||||
<div
|
||||
class="ant-tooltip-content"
|
||||
>
|
||||
<div
|
||||
class="ant-tooltip-inner"
|
||||
role="tooltip"
|
||||
>
|
||||
<span>
|
||||
prompt text
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
style="width: 80px; margin: 4px;"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
LB
|
||||
</span>
|
||||
</button>
|
||||
<div
|
||||
class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-tooltip-placement-leftBottom"
|
||||
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
|
||||
>
|
||||
<div
|
||||
class="ant-tooltip-arrow"
|
||||
style="position: absolute;"
|
||||
/>
|
||||
<div
|
||||
class="ant-tooltip-content"
|
||||
>
|
||||
<div
|
||||
class="ant-tooltip-inner"
|
||||
role="tooltip"
|
||||
>
|
||||
<span>
|
||||
prompt text
|
||||
</span>
|
||||
</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-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-tooltip-placement-left"
|
||||
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
|
||||
class="ant-flex ant-flex-align-center ant-flex-vertical"
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
style="width: 80px; margin: 4px;"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
RT
|
||||
</span>
|
||||
</button>
|
||||
<div
|
||||
class="ant-tooltip-arrow"
|
||||
style="position: absolute; top: 0px; right: 0px;"
|
||||
/>
|
||||
<div
|
||||
class="ant-tooltip-content"
|
||||
class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-tooltip-placement-rightTop"
|
||||
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
|
||||
>
|
||||
<div
|
||||
class="ant-tooltip-inner"
|
||||
role="tooltip"
|
||||
class="ant-tooltip-arrow"
|
||||
style="position: absolute;"
|
||||
/>
|
||||
<div
|
||||
class="ant-tooltip-content"
|
||||
>
|
||||
<span>
|
||||
prompt text
|
||||
</span>
|
||||
<div
|
||||
class="ant-tooltip-inner"
|
||||
role="tooltip"
|
||||
>
|
||||
<span>
|
||||
prompt text
|
||||
</span>
|
||||
</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-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-tooltip-placement-leftBottom"
|
||||
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
style="width: 80px; margin: 4px;"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
Right
|
||||
</span>
|
||||
</button>
|
||||
<div
|
||||
class="ant-tooltip-arrow"
|
||||
style="position: absolute;"
|
||||
/>
|
||||
<div
|
||||
class="ant-tooltip-content"
|
||||
class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-tooltip-placement-right"
|
||||
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
|
||||
>
|
||||
<div
|
||||
class="ant-tooltip-inner"
|
||||
role="tooltip"
|
||||
class="ant-tooltip-arrow"
|
||||
style="position: absolute; top: 0px; left: 0px;"
|
||||
/>
|
||||
<div
|
||||
class="ant-tooltip-content"
|
||||
>
|
||||
<span>
|
||||
prompt text
|
||||
</span>
|
||||
<div
|
||||
class="ant-tooltip-inner"
|
||||
role="tooltip"
|
||||
>
|
||||
<span>
|
||||
prompt text
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
style="width: 80px; margin: 4px;"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
RB
|
||||
</span>
|
||||
</button>
|
||||
<div
|
||||
class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-tooltip-placement-rightBottom"
|
||||
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
|
||||
>
|
||||
<div
|
||||
class="ant-tooltip-arrow"
|
||||
style="position: absolute;"
|
||||
/>
|
||||
<div
|
||||
class="ant-tooltip-content"
|
||||
>
|
||||
<div
|
||||
class="ant-tooltip-inner"
|
||||
role="tooltip"
|
||||
>
|
||||
<span>
|
||||
prompt text
|
||||
</span>
|
||||
</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-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-tooltip-placement-rightTop"
|
||||
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
|
||||
>
|
||||
<div
|
||||
class="ant-tooltip-arrow"
|
||||
style="position: absolute;"
|
||||
/>
|
||||
<div
|
||||
class="ant-tooltip-content"
|
||||
>
|
||||
<div
|
||||
class="ant-tooltip-inner"
|
||||
role="tooltip"
|
||||
>
|
||||
<span>
|
||||
prompt text
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
style="width: 80px; margin: 4px;"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
Right
|
||||
</span>
|
||||
</button>
|
||||
<div
|
||||
class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-tooltip-placement-right"
|
||||
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
|
||||
>
|
||||
<div
|
||||
class="ant-tooltip-arrow"
|
||||
style="position: absolute; top: 0px; left: 0px;"
|
||||
/>
|
||||
<div
|
||||
class="ant-tooltip-content"
|
||||
>
|
||||
<div
|
||||
class="ant-tooltip-inner"
|
||||
role="tooltip"
|
||||
>
|
||||
<span>
|
||||
prompt text
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
style="width: 80px; margin: 4px;"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
RB
|
||||
</span>
|
||||
</button>
|
||||
<div
|
||||
class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-tooltip-placement-rightBottom"
|
||||
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
|
||||
>
|
||||
<div
|
||||
class="ant-tooltip-arrow"
|
||||
style="position: absolute;"
|
||||
/>
|
||||
<div
|
||||
class="ant-tooltip-content"
|
||||
>
|
||||
<div
|
||||
class="ant-tooltip-inner"
|
||||
role="tooltip"
|
||||
>
|
||||
<span>
|
||||
prompt text
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
style="margin-inline-start: 80px; clear: both; white-space: nowrap;"
|
||||
class="ant-flex ant-flex-align-center ant-flex-justify-center"
|
||||
style="white-space: nowrap;"
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
|
||||
@ -55,10 +55,11 @@ Array [
|
||||
</div>
|
||||
</div>,
|
||||
<div
|
||||
class="demo"
|
||||
class="demo ant-flex ant-flex-align-center ant-flex-justify-center ant-flex-vertical"
|
||||
>
|
||||
<div
|
||||
style="margin-inline-start:80px;white-space:nowrap"
|
||||
class="ant-flex ant-flex-align-center ant-flex-justify-center"
|
||||
style="white-space:nowrap"
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
@ -89,69 +90,75 @@ Array [
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
style="width:80px;float:inline-start"
|
||||
class="ant-flex ant-flex-align-center ant-flex-justify-space-between"
|
||||
style="width:432px"
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
style="width:80px;margin:4px"
|
||||
type="button"
|
||||
<div
|
||||
class="ant-flex ant-flex-align-center ant-flex-vertical"
|
||||
>
|
||||
<span>
|
||||
LT
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
style="width:80px;margin:4px"
|
||||
type="button"
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
style="width:80px;margin:4px"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
LT
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
style="width:80px;margin:4px"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
Left
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
style="width:80px;margin:4px"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
LB
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
class="ant-flex ant-flex-align-center ant-flex-vertical"
|
||||
>
|
||||
<span>
|
||||
Left
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
style="width:80px;margin:4px"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
LB
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
style="width:80px;margin:4px"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
RT
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
style="width:80px;margin:4px"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
Right
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
style="width:80px;margin:4px"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
RB
|
||||
</span>
|
||||
</button>
|
||||
</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>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
style="width:80px;margin:4px"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
Right
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
style="width:80px;margin:4px"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
RB
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
style="margin-inline-start:80px;clear:both;white-space:nowrap"
|
||||
class="ant-flex ant-flex-align-center ant-flex-justify-center"
|
||||
style="white-space:nowrap"
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
@ -750,10 +757,11 @@ exports[`renders components/tooltip/demo/disabled-children.tsx correctly 1`] = `
|
||||
|
||||
exports[`renders components/tooltip/demo/placement.tsx correctly 1`] = `
|
||||
<div
|
||||
class="demo"
|
||||
class="demo ant-flex ant-flex-align-center ant-flex-justify-center ant-flex-vertical"
|
||||
>
|
||||
<div
|
||||
style="margin-inline-start:80px;white-space:nowrap"
|
||||
class="ant-flex ant-flex-align-center ant-flex-justify-center"
|
||||
style="white-space:nowrap"
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
@ -784,69 +792,75 @@ exports[`renders components/tooltip/demo/placement.tsx correctly 1`] = `
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
style="width:80px;float:inline-start"
|
||||
class="ant-flex ant-flex-align-center ant-flex-justify-space-between"
|
||||
style="width:432px"
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
style="width:80px;margin:4px"
|
||||
type="button"
|
||||
<div
|
||||
class="ant-flex ant-flex-align-center ant-flex-vertical"
|
||||
>
|
||||
<span>
|
||||
LT
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
style="width:80px;margin:4px"
|
||||
type="button"
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
style="width:80px;margin:4px"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
LT
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
style="width:80px;margin:4px"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
Left
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
style="width:80px;margin:4px"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
LB
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
class="ant-flex ant-flex-align-center ant-flex-vertical"
|
||||
>
|
||||
<span>
|
||||
Left
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
style="width:80px;margin:4px"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
LB
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
style="width:80px;margin:4px"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
RT
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
style="width:80px;margin:4px"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
Right
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
style="width:80px;margin:4px"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
RB
|
||||
</span>
|
||||
</button>
|
||||
</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>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
style="width:80px;margin:4px"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
Right
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
style="width:80px;margin:4px"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
RB
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
style="margin-inline-start:80px;clear:both;white-space:nowrap"
|
||||
class="ant-flex ant-flex-align-center ant-flex-justify-center"
|
||||
style="white-space:nowrap"
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
|
||||
@ -1,14 +1,15 @@
|
||||
import React, { useMemo, useState } from 'react';
|
||||
import { Button, ConfigProvider, Segmented, Tooltip } from 'antd';
|
||||
import { Button, ConfigProvider, Flex, Segmented, Tooltip } from 'antd';
|
||||
import type { TooltipProps } from 'antd';
|
||||
|
||||
const text = <span>prompt text</span>;
|
||||
|
||||
const buttonWidth = 80;
|
||||
|
||||
const App: React.FC = () => {
|
||||
const [arrow, setArrow] = useState('Show');
|
||||
const [arrow, setArrow] = useState<'Show' | 'Hide' | 'Center'>('Show');
|
||||
|
||||
const mergedArrow = useMemo(() => {
|
||||
const mergedArrow = useMemo<TooltipProps['arrow']>(() => {
|
||||
if (arrow === 'Hide') {
|
||||
return false;
|
||||
}
|
||||
@ -27,11 +28,11 @@ const App: React.FC = () => {
|
||||
<Segmented
|
||||
value={arrow}
|
||||
options={['Show', 'Hide', 'Center']}
|
||||
onChange={(val: string) => setArrow(val)}
|
||||
onChange={(val: 'Show' | 'Hide' | 'Center') => setArrow(val)}
|
||||
style={{ marginBottom: 24 }}
|
||||
/>
|
||||
<div className="demo">
|
||||
<div style={{ marginInlineStart: buttonWidth, whiteSpace: 'nowrap' }}>
|
||||
<Flex vertical justify="center" align="center" className="demo">
|
||||
<Flex justify="center" align="center" style={{ whiteSpace: 'nowrap' }}>
|
||||
<Tooltip placement="topLeft" title={text} arrow={mergedArrow}>
|
||||
<Button>TL</Button>
|
||||
</Tooltip>
|
||||
@ -41,30 +42,32 @@ const App: React.FC = () => {
|
||||
<Tooltip placement="topRight" title={text} arrow={mergedArrow}>
|
||||
<Button>TR</Button>
|
||||
</Tooltip>
|
||||
</div>
|
||||
<div style={{ width: buttonWidth, float: 'inline-start' }}>
|
||||
<Tooltip placement="leftTop" title={text} arrow={mergedArrow}>
|
||||
<Button>LT</Button>
|
||||
</Tooltip>
|
||||
<Tooltip placement="left" title={text} arrow={mergedArrow}>
|
||||
<Button>Left</Button>
|
||||
</Tooltip>
|
||||
<Tooltip placement="leftBottom" title={text} arrow={mergedArrow}>
|
||||
<Button>LB</Button>
|
||||
</Tooltip>
|
||||
</div>
|
||||
<div style={{ width: buttonWidth, marginInlineStart: buttonWidth * 4 + 24 }}>
|
||||
<Tooltip placement="rightTop" title={text} arrow={mergedArrow}>
|
||||
<Button>RT</Button>
|
||||
</Tooltip>
|
||||
<Tooltip placement="right" title={text} arrow={mergedArrow}>
|
||||
<Button>Right</Button>
|
||||
</Tooltip>
|
||||
<Tooltip placement="rightBottom" title={text} arrow={mergedArrow}>
|
||||
<Button>RB</Button>
|
||||
</Tooltip>
|
||||
</div>
|
||||
<div style={{ marginInlineStart: buttonWidth, clear: 'both', whiteSpace: 'nowrap' }}>
|
||||
</Flex>
|
||||
<Flex style={{ width: buttonWidth * 5 + 32 }} justify="space-between" align="center">
|
||||
<Flex align="center" vertical>
|
||||
<Tooltip placement="leftTop" title={text} arrow={mergedArrow}>
|
||||
<Button>LT</Button>
|
||||
</Tooltip>
|
||||
<Tooltip placement="left" title={text} arrow={mergedArrow}>
|
||||
<Button>Left</Button>
|
||||
</Tooltip>
|
||||
<Tooltip placement="leftBottom" title={text} arrow={mergedArrow}>
|
||||
<Button>LB</Button>
|
||||
</Tooltip>
|
||||
</Flex>
|
||||
<Flex align="center" vertical>
|
||||
<Tooltip placement="rightTop" title={text} arrow={mergedArrow}>
|
||||
<Button>RT</Button>
|
||||
</Tooltip>
|
||||
<Tooltip placement="right" title={text} arrow={mergedArrow}>
|
||||
<Button>Right</Button>
|
||||
</Tooltip>
|
||||
<Tooltip placement="rightBottom" title={text} arrow={mergedArrow}>
|
||||
<Button>RB</Button>
|
||||
</Tooltip>
|
||||
</Flex>
|
||||
</Flex>
|
||||
<Flex justify="center" align="center" style={{ whiteSpace: 'nowrap' }}>
|
||||
<Tooltip placement="bottomLeft" title={text} arrow={mergedArrow}>
|
||||
<Button>BL</Button>
|
||||
</Tooltip>
|
||||
@ -74,8 +77,8 @@ const App: React.FC = () => {
|
||||
<Tooltip placement="bottomRight" title={text} arrow={mergedArrow}>
|
||||
<Button>BR</Button>
|
||||
</Tooltip>
|
||||
</div>
|
||||
</div>
|
||||
</Flex>
|
||||
</Flex>
|
||||
</ConfigProvider>
|
||||
);
|
||||
};
|
||||
|
||||
@ -1,18 +1,14 @@
|
||||
import React from 'react';
|
||||
import { Button, ConfigProvider, Tooltip } from 'antd';
|
||||
import { Button, ConfigProvider, Flex, Tooltip } from 'antd';
|
||||
|
||||
const text = <span>prompt text</span>;
|
||||
|
||||
const buttonWidth = 80;
|
||||
|
||||
const App: React.FC = () => (
|
||||
<ConfigProvider
|
||||
button={{
|
||||
style: { width: buttonWidth, margin: 4 },
|
||||
}}
|
||||
>
|
||||
<div className="demo">
|
||||
<div style={{ marginInlineStart: buttonWidth, whiteSpace: 'nowrap' }}>
|
||||
<ConfigProvider button={{ style: { width: buttonWidth, margin: 4 } }}>
|
||||
<Flex vertical justify="center" align="center" className="demo">
|
||||
<Flex justify="center" align="center" style={{ whiteSpace: 'nowrap' }}>
|
||||
<Tooltip placement="topLeft" title={text}>
|
||||
<Button>TL</Button>
|
||||
</Tooltip>
|
||||
@ -22,30 +18,32 @@ const App: React.FC = () => (
|
||||
<Tooltip placement="topRight" title={text}>
|
||||
<Button>TR</Button>
|
||||
</Tooltip>
|
||||
</div>
|
||||
<div style={{ width: buttonWidth, float: 'inline-start' }}>
|
||||
<Tooltip placement="leftTop" title={text}>
|
||||
<Button>LT</Button>
|
||||
</Tooltip>
|
||||
<Tooltip placement="left" title={text}>
|
||||
<Button>Left</Button>
|
||||
</Tooltip>
|
||||
<Tooltip placement="leftBottom" title={text}>
|
||||
<Button>LB</Button>
|
||||
</Tooltip>
|
||||
</div>
|
||||
<div style={{ width: buttonWidth, marginInlineStart: buttonWidth * 4 + 24 }}>
|
||||
<Tooltip placement="rightTop" title={text}>
|
||||
<Button>RT</Button>
|
||||
</Tooltip>
|
||||
<Tooltip placement="right" title={text}>
|
||||
<Button>Right</Button>
|
||||
</Tooltip>
|
||||
<Tooltip placement="rightBottom" title={text}>
|
||||
<Button>RB</Button>
|
||||
</Tooltip>
|
||||
</div>
|
||||
<div style={{ marginInlineStart: buttonWidth, clear: 'both', whiteSpace: 'nowrap' }}>
|
||||
</Flex>
|
||||
<Flex style={{ width: buttonWidth * 5 + 32 }} justify="space-between" align="center">
|
||||
<Flex align="center" vertical>
|
||||
<Tooltip placement="leftTop" title={text}>
|
||||
<Button>LT</Button>
|
||||
</Tooltip>
|
||||
<Tooltip placement="left" title={text}>
|
||||
<Button>Left</Button>
|
||||
</Tooltip>
|
||||
<Tooltip placement="leftBottom" title={text}>
|
||||
<Button>LB</Button>
|
||||
</Tooltip>
|
||||
</Flex>
|
||||
<Flex align="center" vertical>
|
||||
<Tooltip placement="rightTop" title={text}>
|
||||
<Button>RT</Button>
|
||||
</Tooltip>
|
||||
<Tooltip placement="right" title={text}>
|
||||
<Button>Right</Button>
|
||||
</Tooltip>
|
||||
<Tooltip placement="rightBottom" title={text}>
|
||||
<Button>RB</Button>
|
||||
</Tooltip>
|
||||
</Flex>
|
||||
</Flex>
|
||||
<Flex justify="center" align="center" style={{ whiteSpace: 'nowrap' }}>
|
||||
<Tooltip placement="bottomLeft" title={text}>
|
||||
<Button>BL</Button>
|
||||
</Tooltip>
|
||||
@ -55,8 +53,8 @@ const App: React.FC = () => (
|
||||
<Tooltip placement="bottomRight" title={text}>
|
||||
<Button>BR</Button>
|
||||
</Tooltip>
|
||||
</div>
|
||||
</div>
|
||||
</Flex>
|
||||
</Flex>
|
||||
</ConfigProvider>
|
||||
);
|
||||
|
||||
|
||||
@ -458,7 +458,7 @@ exports[`renders components/transfer/demo/advanced.tsx extend context correctly
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-default ant-btn-sm"
|
||||
style="float: left; margin: 5px;"
|
||||
style="display: flex; margin: 8px; margin-inline-end: auto;"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
@ -989,7 +989,7 @@ exports[`renders components/transfer/demo/advanced.tsx extend context correctly
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-default ant-btn-sm"
|
||||
style="float: right; margin: 5px;"
|
||||
style="display: flex; margin: 8px; margin-inline-start: auto;"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
|
||||
@ -186,7 +186,7 @@ exports[`renders components/transfer/demo/advanced.tsx correctly 1`] = `
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-default ant-btn-sm"
|
||||
style="float:left;margin:5px"
|
||||
style="display:flex;margin:8px;margin-inline-end:auto"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
@ -445,7 +445,7 @@ exports[`renders components/transfer/demo/advanced.tsx correctly 1`] = `
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-default ant-btn-sm"
|
||||
style="float:right;margin:5px"
|
||||
style="display:flex;margin:8px;margin-inline-start:auto"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
|
||||
@ -43,13 +43,21 @@ const App: React.FC = () => {
|
||||
const renderFooter: TransferProps['footer'] = (_, info) => {
|
||||
if (info?.direction === 'left') {
|
||||
return (
|
||||
<Button size="small" style={{ float: 'left', margin: 5 }} onClick={getMock}>
|
||||
<Button
|
||||
size="small"
|
||||
style={{ display: 'flex', margin: 8, marginInlineEnd: 'auto' }}
|
||||
onClick={getMock}
|
||||
>
|
||||
Left button reload
|
||||
</Button>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<Button size="small" style={{ float: 'right', margin: 5 }} onClick={getMock}>
|
||||
<Button
|
||||
size="small"
|
||||
style={{ display: 'flex', margin: 8, marginInlineStart: 'auto' }}
|
||||
onClick={getMock}
|
||||
>
|
||||
Right button reload
|
||||
</Button>
|
||||
);
|
||||
|
||||
@ -3826,596 +3826,299 @@ exports[`renders components/upload/demo/picture-circle.tsx extend context correc
|
||||
exports[`renders components/upload/demo/picture-circle.tsx extend context correctly 2`] = `[]`;
|
||||
|
||||
exports[`renders components/upload/demo/picture-style.tsx extend context correctly 1`] = `
|
||||
Array [
|
||||
<span
|
||||
class="ant-upload-wrapper"
|
||||
<span
|
||||
class="ant-upload-wrapper"
|
||||
>
|
||||
<div
|
||||
class="ant-upload ant-upload-select"
|
||||
>
|
||||
<span
|
||||
class="ant-upload"
|
||||
>
|
||||
<input
|
||||
accept=""
|
||||
style="display: none;"
|
||||
type="file"
|
||||
/>
|
||||
<button
|
||||
class="ant-btn ant-btn-primary"
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
class="ant-btn-icon"
|
||||
>
|
||||
<span
|
||||
aria-label="upload"
|
||||
class="anticon anticon-upload"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="upload"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M400 317.7h73.9V656c0 4.4 3.6 8 8 8h60c4.4 0 8-3.6 8-8V317.7H624c6.7 0 10.4-7.7 6.3-12.9L518.3 163a8 8 0 00-12.6 0l-112 141.7c-4.1 5.3-.4 13 6.3 13zM878 626h-60c-4.4 0-8 3.6-8 8v154H214V634c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v198c0 17.7 14.3 32 32 32h684c17.7 0 32-14.3 32-32V634c0-4.4-3.6-8-8-8z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
<span>
|
||||
Upload
|
||||
</span>
|
||||
</button>
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="ant-upload-list ant-upload-list-picture"
|
||||
>
|
||||
<div
|
||||
class="ant-upload ant-upload-select"
|
||||
class="ant-upload-list-item-container"
|
||||
>
|
||||
<span
|
||||
class="ant-upload"
|
||||
<div
|
||||
class="ant-upload-list-item ant-upload-list-item-uploading"
|
||||
>
|
||||
<input
|
||||
accept=""
|
||||
style="display: none;"
|
||||
type="file"
|
||||
/>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
type="button"
|
||||
<div
|
||||
class="ant-upload-list-item-thumbnail"
|
||||
>
|
||||
<span
|
||||
class="ant-btn-icon"
|
||||
aria-label="loading"
|
||||
class="anticon anticon-loading anticon-spin"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="loading"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="0 0 1024 1024"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
<span
|
||||
class="ant-upload-list-item-name"
|
||||
title="xxx.png"
|
||||
>
|
||||
xxx.png
|
||||
</span>
|
||||
<span
|
||||
class="ant-upload-list-item-actions picture"
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-text ant-btn-sm ant-btn-icon-only ant-upload-list-item-action"
|
||||
title="Remove file"
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
aria-label="upload"
|
||||
class="anticon anticon-upload"
|
||||
role="img"
|
||||
class="ant-btn-icon"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="upload"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
<span
|
||||
aria-label="delete"
|
||||
class="anticon anticon-delete"
|
||||
role="img"
|
||||
tabindex="-1"
|
||||
>
|
||||
<path
|
||||
d="M400 317.7h73.9V656c0 4.4 3.6 8 8 8h60c4.4 0 8-3.6 8-8V317.7H624c6.7 0 10.4-7.7 6.3-12.9L518.3 163a8 8 0 00-12.6 0l-112 141.7c-4.1 5.3-.4 13 6.3 13zM878 626h-60c-4.4 0-8 3.6-8 8v154H214V634c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v198c0 17.7 14.3 32 32 32h684c17.7 0 32-14.3 32-32V634c0-4.4-3.6-8-8-8z"
|
||||
/>
|
||||
</svg>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="delete"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M360 184h-8c4.4 0 8-3.6 8-8v8h304v-8c0 4.4 3.6 8 8 8h-8v72h72v-80c0-35.3-28.7-64-64-64H352c-35.3 0-64 28.7-64 64v80h72v-72zm504 72H160c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h60.4l24.7 523c1.6 34.1 29.8 61 63.9 61h454c34.2 0 62.3-26.8 63.9-61l24.7-523H888c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zM731.3 840H292.7l-24.2-512h487l-24.2 512z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
<span>
|
||||
Upload
|
||||
</span>
|
||||
</button>
|
||||
</span>
|
||||
</button>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-upload-list ant-upload-list-picture"
|
||||
class="ant-upload-list-item-container"
|
||||
>
|
||||
<div
|
||||
class="ant-upload-list-item-container"
|
||||
class="ant-upload-list-item ant-upload-list-item-done"
|
||||
>
|
||||
<div
|
||||
class="ant-upload-list-item ant-upload-list-item-uploading"
|
||||
<a
|
||||
class="ant-upload-list-item-thumbnail"
|
||||
href="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
<div
|
||||
class="ant-upload-list-item-thumbnail"
|
||||
>
|
||||
<span
|
||||
aria-label="loading"
|
||||
class="anticon anticon-loading anticon-spin"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="loading"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="0 0 1024 1024"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
<span
|
||||
class="ant-upload-list-item-name"
|
||||
title="xxx.png"
|
||||
>
|
||||
xxx.png
|
||||
</span>
|
||||
<span
|
||||
class="ant-upload-list-item-actions picture"
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-text ant-btn-sm ant-btn-icon-only ant-upload-list-item-action"
|
||||
title="Remove file"
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
class="ant-btn-icon"
|
||||
>
|
||||
<span
|
||||
aria-label="delete"
|
||||
class="anticon anticon-delete"
|
||||
role="img"
|
||||
tabindex="-1"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="delete"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M360 184h-8c4.4 0 8-3.6 8-8v8h304v-8c0 4.4 3.6 8 8 8h-8v72h72v-80c0-35.3-28.7-64-64-64H352c-35.3 0-64 28.7-64 64v80h72v-72zm504 72H160c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h60.4l24.7 523c1.6 34.1 29.8 61 63.9 61h454c34.2 0 62.3-26.8 63.9-61l24.7-523H888c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zM731.3 840H292.7l-24.2-512h487l-24.2 512z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
</button>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-upload-list-item-container"
|
||||
>
|
||||
<div
|
||||
class="ant-upload-list-item ant-upload-list-item-done"
|
||||
>
|
||||
<a
|
||||
class="ant-upload-list-item-thumbnail"
|
||||
href="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
<img
|
||||
alt="yyy.png"
|
||||
class="ant-upload-list-item-image"
|
||||
src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
|
||||
/>
|
||||
</a>
|
||||
<a
|
||||
class="ant-upload-list-item-name"
|
||||
href="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
title="yyy.png"
|
||||
>
|
||||
yyy.png
|
||||
</a>
|
||||
<span
|
||||
class="ant-upload-list-item-actions picture"
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-text ant-btn-sm ant-btn-icon-only ant-upload-list-item-action"
|
||||
title="Remove file"
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
class="ant-btn-icon"
|
||||
>
|
||||
<span
|
||||
aria-label="delete"
|
||||
class="anticon anticon-delete"
|
||||
role="img"
|
||||
tabindex="-1"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="delete"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M360 184h-8c4.4 0 8-3.6 8-8v8h304v-8c0 4.4 3.6 8 8 8h-8v72h72v-80c0-35.3-28.7-64-64-64H352c-35.3 0-64 28.7-64 64v80h72v-72zm504 72H160c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h60.4l24.7 523c1.6 34.1 29.8 61 63.9 61h454c34.2 0 62.3-26.8 63.9-61l24.7-523H888c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zM731.3 840H292.7l-24.2-512h487l-24.2 512z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
</button>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-upload-list-item-container"
|
||||
>
|
||||
<div
|
||||
class="ant-upload-list-item ant-upload-list-item-error"
|
||||
>
|
||||
<div
|
||||
class="ant-upload-list-item-thumbnail ant-upload-list-item-file"
|
||||
>
|
||||
<span
|
||||
aria-label="picture"
|
||||
class="anticon anticon-picture"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="picture"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M928 160H96c-17.7 0-32 14.3-32 32v640c0 17.7 14.3 32 32 32h832c17.7 0 32-14.3 32-32V192c0-17.7-14.3-32-32-32zm-40 632H136v-39.9l138.5-164.3 150.1 178L658.1 489 888 761.6V792zm0-129.8L664.2 396.8c-3.2-3.8-9-3.8-12.2 0L424.6 666.4l-144-170.7c-3.2-3.8-9-3.8-12.2 0L136 652.7V232h752v430.2z"
|
||||
fill="#1677ff"
|
||||
/>
|
||||
<path
|
||||
d="M424.6 765.8l-150.1-178L136 752.1V792h752v-30.4L658.1 489z"
|
||||
fill="#e6f4ff"
|
||||
/>
|
||||
<path
|
||||
d="M136 652.7l132.4-157c3.2-3.8 9-3.8 12.2 0l144 170.7L652 396.8c3.2-3.8 9-3.8 12.2 0L888 662.2V232H136v420.7zM304 280a88 88 0 110 176 88 88 0 010-176z"
|
||||
fill="#e6f4ff"
|
||||
/>
|
||||
<path
|
||||
d="M276 368a28 28 0 1056 0 28 28 0 10-56 0z"
|
||||
fill="#e6f4ff"
|
||||
/>
|
||||
<path
|
||||
d="M304 456a88 88 0 100-176 88 88 0 000 176zm0-116c15.5 0 28 12.5 28 28s-12.5 28-28 28-28-12.5-28-28 12.5-28 28-28z"
|
||||
fill="#1677ff"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
<span
|
||||
class="ant-upload-list-item-name"
|
||||
title="zzz.png"
|
||||
>
|
||||
zzz.png
|
||||
</span>
|
||||
<span
|
||||
class="ant-upload-list-item-actions picture"
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-text ant-btn-sm ant-btn-icon-only ant-upload-list-item-action"
|
||||
title="Remove file"
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
class="ant-btn-icon"
|
||||
>
|
||||
<span
|
||||
aria-label="delete"
|
||||
class="anticon anticon-delete"
|
||||
role="img"
|
||||
tabindex="-1"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="delete"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M360 184h-8c4.4 0 8-3.6 8-8v8h304v-8c0 4.4 3.6 8 8 8h-8v72h72v-80c0-35.3-28.7-64-64-64H352c-35.3 0-64 28.7-64 64v80h72v-72zm504 72H160c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h60.4l24.7 523c1.6 34.1 29.8 61 63.9 61h454c34.2 0 62.3-26.8 63.9-61l24.7-523H888c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zM731.3 840H292.7l-24.2-512h487l-24.2 512z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
</button>
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast 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;"
|
||||
<img
|
||||
alt="yyy.png"
|
||||
class="ant-upload-list-item-image"
|
||||
src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
|
||||
/>
|
||||
<div
|
||||
class="ant-tooltip-content"
|
||||
</a>
|
||||
<a
|
||||
class="ant-upload-list-item-name"
|
||||
href="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
title="yyy.png"
|
||||
>
|
||||
yyy.png
|
||||
</a>
|
||||
<span
|
||||
class="ant-upload-list-item-actions picture"
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-text ant-btn-sm ant-btn-icon-only ant-upload-list-item-action"
|
||||
title="Remove file"
|
||||
type="button"
|
||||
>
|
||||
<div
|
||||
class="ant-tooltip-inner"
|
||||
role="tooltip"
|
||||
<span
|
||||
class="ant-btn-icon"
|
||||
>
|
||||
Upload error
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<span
|
||||
aria-label="delete"
|
||||
class="anticon anticon-delete"
|
||||
role="img"
|
||||
tabindex="-1"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="delete"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M360 184h-8c4.4 0 8-3.6 8-8v8h304v-8c0 4.4 3.6 8 8 8h-8v72h72v-80c0-35.3-28.7-64-64-64H352c-35.3 0-64 28.7-64 64v80h72v-72zm504 72H160c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h60.4l24.7 523c1.6 34.1 29.8 61 63.9 61h454c34.2 0 62.3-26.8 63.9-61l24.7-523H888c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zM731.3 840H292.7l-24.2-512h487l-24.2 512z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
</button>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</span>,
|
||||
<br />,
|
||||
<br />,
|
||||
<span
|
||||
class="ant-upload-wrapper upload-list-inline"
|
||||
>
|
||||
<div
|
||||
class="ant-upload ant-upload-select"
|
||||
class="ant-upload-list-item-container"
|
||||
>
|
||||
<span
|
||||
class="ant-upload"
|
||||
<div
|
||||
class="ant-upload-list-item ant-upload-list-item-error"
|
||||
>
|
||||
<input
|
||||
accept=""
|
||||
style="display: none;"
|
||||
type="file"
|
||||
<div
|
||||
class="ant-upload-list-item-thumbnail ant-upload-list-item-file"
|
||||
>
|
||||
<span
|
||||
aria-label="picture"
|
||||
class="anticon anticon-picture"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="picture"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M928 160H96c-17.7 0-32 14.3-32 32v640c0 17.7 14.3 32 32 32h832c17.7 0 32-14.3 32-32V192c0-17.7-14.3-32-32-32zm-40 632H136v-39.9l138.5-164.3 150.1 178L658.1 489 888 761.6V792zm0-129.8L664.2 396.8c-3.2-3.8-9-3.8-12.2 0L424.6 666.4l-144-170.7c-3.2-3.8-9-3.8-12.2 0L136 652.7V232h752v430.2z"
|
||||
fill="#1677ff"
|
||||
/>
|
||||
<path
|
||||
d="M424.6 765.8l-150.1-178L136 752.1V792h752v-30.4L658.1 489z"
|
||||
fill="#e6f4ff"
|
||||
/>
|
||||
<path
|
||||
d="M136 652.7l132.4-157c3.2-3.8 9-3.8 12.2 0l144 170.7L652 396.8c3.2-3.8 9-3.8 12.2 0L888 662.2V232H136v420.7zM304 280a88 88 0 110 176 88 88 0 010-176z"
|
||||
fill="#e6f4ff"
|
||||
/>
|
||||
<path
|
||||
d="M276 368a28 28 0 1056 0 28 28 0 10-56 0z"
|
||||
fill="#e6f4ff"
|
||||
/>
|
||||
<path
|
||||
d="M304 456a88 88 0 100-176 88 88 0 000 176zm0-116c15.5 0 28 12.5 28 28s-12.5 28-28 28-28-12.5-28-28 12.5-28 28-28z"
|
||||
fill="#1677ff"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
<span
|
||||
class="ant-upload-list-item-name"
|
||||
title="zzz.png"
|
||||
>
|
||||
zzz.png
|
||||
</span>
|
||||
<span
|
||||
class="ant-upload-list-item-actions picture"
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-text ant-btn-sm ant-btn-icon-only ant-upload-list-item-action"
|
||||
title="Remove file"
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
class="ant-btn-icon"
|
||||
>
|
||||
<span
|
||||
aria-label="delete"
|
||||
class="anticon anticon-delete"
|
||||
role="img"
|
||||
tabindex="-1"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="delete"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M360 184h-8c4.4 0 8-3.6 8-8v8h304v-8c0 4.4 3.6 8 8 8h-8v72h72v-80c0-35.3-28.7-64-64-64H352c-35.3 0-64 28.7-64 64v80h72v-72zm504 72H160c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h60.4l24.7 523c1.6 34.1 29.8 61 63.9 61h454c34.2 0 62.3-26.8 63.9-61l24.7-523H888c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zM731.3 840H292.7l-24.2-512h487l-24.2 512z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
</button>
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast 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;"
|
||||
/>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
class="ant-btn-icon"
|
||||
>
|
||||
<span
|
||||
aria-label="upload"
|
||||
class="anticon anticon-upload"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="upload"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M400 317.7h73.9V656c0 4.4 3.6 8 8 8h60c4.4 0 8-3.6 8-8V317.7H624c6.7 0 10.4-7.7 6.3-12.9L518.3 163a8 8 0 00-12.6 0l-112 141.7c-4.1 5.3-.4 13 6.3 13zM878 626h-60c-4.4 0-8 3.6-8 8v154H214V634c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v198c0 17.7 14.3 32 32 32h684c17.7 0 32-14.3 32-32V634c0-4.4-3.6-8-8-8z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
<span>
|
||||
Upload
|
||||
</span>
|
||||
</button>
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="ant-upload-list ant-upload-list-picture"
|
||||
>
|
||||
<div
|
||||
class="ant-upload-list-item-container"
|
||||
>
|
||||
<div
|
||||
class="ant-upload-list-item ant-upload-list-item-uploading"
|
||||
class="ant-tooltip-content"
|
||||
>
|
||||
<div
|
||||
class="ant-upload-list-item-thumbnail"
|
||||
class="ant-tooltip-inner"
|
||||
role="tooltip"
|
||||
>
|
||||
<span
|
||||
aria-label="loading"
|
||||
class="anticon anticon-loading anticon-spin"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="loading"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="0 0 1024 1024"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
<span
|
||||
class="ant-upload-list-item-name"
|
||||
title="xxx.png"
|
||||
>
|
||||
xxx.png
|
||||
</span>
|
||||
<span
|
||||
class="ant-upload-list-item-actions picture"
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-text ant-btn-sm ant-btn-icon-only ant-upload-list-item-action"
|
||||
title="Remove file"
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
class="ant-btn-icon"
|
||||
>
|
||||
<span
|
||||
aria-label="delete"
|
||||
class="anticon anticon-delete"
|
||||
role="img"
|
||||
tabindex="-1"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="delete"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M360 184h-8c4.4 0 8-3.6 8-8v8h304v-8c0 4.4 3.6 8 8 8h-8v72h72v-80c0-35.3-28.7-64-64-64H352c-35.3 0-64 28.7-64 64v80h72v-72zm504 72H160c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h60.4l24.7 523c1.6 34.1 29.8 61 63.9 61h454c34.2 0 62.3-26.8 63.9-61l24.7-523H888c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zM731.3 840H292.7l-24.2-512h487l-24.2 512z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
</button>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-upload-list-item-container"
|
||||
>
|
||||
<div
|
||||
class="ant-upload-list-item ant-upload-list-item-done"
|
||||
>
|
||||
<a
|
||||
class="ant-upload-list-item-thumbnail"
|
||||
href="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
<img
|
||||
alt="yyy.png"
|
||||
class="ant-upload-list-item-image"
|
||||
src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
|
||||
/>
|
||||
</a>
|
||||
<a
|
||||
class="ant-upload-list-item-name"
|
||||
href="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
title="yyy.png"
|
||||
>
|
||||
yyy.png
|
||||
</a>
|
||||
<span
|
||||
class="ant-upload-list-item-actions picture"
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-text ant-btn-sm ant-btn-icon-only ant-upload-list-item-action"
|
||||
title="Remove file"
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
class="ant-btn-icon"
|
||||
>
|
||||
<span
|
||||
aria-label="delete"
|
||||
class="anticon anticon-delete"
|
||||
role="img"
|
||||
tabindex="-1"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="delete"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M360 184h-8c4.4 0 8-3.6 8-8v8h304v-8c0 4.4 3.6 8 8 8h-8v72h72v-80c0-35.3-28.7-64-64-64H352c-35.3 0-64 28.7-64 64v80h72v-72zm504 72H160c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h60.4l24.7 523c1.6 34.1 29.8 61 63.9 61h454c34.2 0 62.3-26.8 63.9-61l24.7-523H888c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zM731.3 840H292.7l-24.2-512h487l-24.2 512z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
</button>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-upload-list-item-container"
|
||||
>
|
||||
<div
|
||||
class="ant-upload-list-item ant-upload-list-item-error"
|
||||
>
|
||||
<div
|
||||
class="ant-upload-list-item-thumbnail ant-upload-list-item-file"
|
||||
>
|
||||
<span
|
||||
aria-label="picture"
|
||||
class="anticon anticon-picture"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="picture"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M928 160H96c-17.7 0-32 14.3-32 32v640c0 17.7 14.3 32 32 32h832c17.7 0 32-14.3 32-32V192c0-17.7-14.3-32-32-32zm-40 632H136v-39.9l138.5-164.3 150.1 178L658.1 489 888 761.6V792zm0-129.8L664.2 396.8c-3.2-3.8-9-3.8-12.2 0L424.6 666.4l-144-170.7c-3.2-3.8-9-3.8-12.2 0L136 652.7V232h752v430.2z"
|
||||
fill="#1677ff"
|
||||
/>
|
||||
<path
|
||||
d="M424.6 765.8l-150.1-178L136 752.1V792h752v-30.4L658.1 489z"
|
||||
fill="#e6f4ff"
|
||||
/>
|
||||
<path
|
||||
d="M136 652.7l132.4-157c3.2-3.8 9-3.8 12.2 0l144 170.7L652 396.8c3.2-3.8 9-3.8 12.2 0L888 662.2V232H136v420.7zM304 280a88 88 0 110 176 88 88 0 010-176z"
|
||||
fill="#e6f4ff"
|
||||
/>
|
||||
<path
|
||||
d="M276 368a28 28 0 1056 0 28 28 0 10-56 0z"
|
||||
fill="#e6f4ff"
|
||||
/>
|
||||
<path
|
||||
d="M304 456a88 88 0 100-176 88 88 0 000 176zm0-116c15.5 0 28 12.5 28 28s-12.5 28-28 28-28-12.5-28-28 12.5-28 28-28z"
|
||||
fill="#1677ff"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
<span
|
||||
class="ant-upload-list-item-name"
|
||||
title="zzz.png"
|
||||
>
|
||||
zzz.png
|
||||
</span>
|
||||
<span
|
||||
class="ant-upload-list-item-actions picture"
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-text ant-btn-sm ant-btn-icon-only ant-upload-list-item-action"
|
||||
title="Remove file"
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
class="ant-btn-icon"
|
||||
>
|
||||
<span
|
||||
aria-label="delete"
|
||||
class="anticon anticon-delete"
|
||||
role="img"
|
||||
tabindex="-1"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="delete"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M360 184h-8c4.4 0 8-3.6 8-8v8h304v-8c0 4.4 3.6 8 8 8h-8v72h72v-80c0-35.3-28.7-64-64-64H352c-35.3 0-64 28.7-64 64v80h72v-72zm504 72H160c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h60.4l24.7 523c1.6 34.1 29.8 61 63.9 61h454c34.2 0 62.3-26.8 63.9-61l24.7-523H888c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zM731.3 840H292.7l-24.2-512h487l-24.2 512z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
</button>
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast 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"
|
||||
>
|
||||
Upload error
|
||||
</div>
|
||||
Upload error
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</span>,
|
||||
]
|
||||
</div>
|
||||
</span>
|
||||
`;
|
||||
|
||||
exports[`renders components/upload/demo/picture-style.tsx extend context correctly 2`] = `[]`;
|
||||
|
||||
@ -3591,558 +3591,280 @@ exports[`renders components/upload/demo/picture-circle.tsx correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`renders components/upload/demo/picture-style.tsx correctly 1`] = `
|
||||
Array [
|
||||
<span
|
||||
class="ant-upload-wrapper"
|
||||
<span
|
||||
class="ant-upload-wrapper"
|
||||
>
|
||||
<div
|
||||
class="ant-upload ant-upload-select"
|
||||
>
|
||||
<span
|
||||
class="ant-upload"
|
||||
>
|
||||
<input
|
||||
accept=""
|
||||
style="display:none"
|
||||
type="file"
|
||||
/>
|
||||
<button
|
||||
class="ant-btn ant-btn-primary"
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
class="ant-btn-icon"
|
||||
>
|
||||
<span
|
||||
aria-label="upload"
|
||||
class="anticon anticon-upload"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="upload"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M400 317.7h73.9V656c0 4.4 3.6 8 8 8h60c4.4 0 8-3.6 8-8V317.7H624c6.7 0 10.4-7.7 6.3-12.9L518.3 163a8 8 0 00-12.6 0l-112 141.7c-4.1 5.3-.4 13 6.3 13zM878 626h-60c-4.4 0-8 3.6-8 8v154H214V634c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v198c0 17.7 14.3 32 32 32h684c17.7 0 32-14.3 32-32V634c0-4.4-3.6-8-8-8z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
<span>
|
||||
Upload
|
||||
</span>
|
||||
</button>
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="ant-upload-list ant-upload-list-picture"
|
||||
>
|
||||
<div
|
||||
class="ant-upload ant-upload-select"
|
||||
class="ant-upload-list-item-container"
|
||||
>
|
||||
<span
|
||||
class="ant-upload"
|
||||
<div
|
||||
class="ant-upload-list-item ant-upload-list-item-uploading"
|
||||
>
|
||||
<input
|
||||
accept=""
|
||||
style="display:none"
|
||||
type="file"
|
||||
/>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
type="button"
|
||||
<div
|
||||
class="ant-upload-list-item-thumbnail"
|
||||
>
|
||||
<span
|
||||
class="ant-btn-icon"
|
||||
aria-label="loading"
|
||||
class="anticon anticon-loading anticon-spin"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="loading"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="0 0 1024 1024"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
<span
|
||||
class="ant-upload-list-item-name"
|
||||
title="xxx.png"
|
||||
>
|
||||
xxx.png
|
||||
</span>
|
||||
<span
|
||||
class="ant-upload-list-item-actions picture"
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-text ant-btn-sm ant-btn-icon-only ant-upload-list-item-action"
|
||||
title="Remove file"
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
aria-label="upload"
|
||||
class="anticon anticon-upload"
|
||||
role="img"
|
||||
class="ant-btn-icon"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="upload"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
<span
|
||||
aria-label="delete"
|
||||
class="anticon anticon-delete"
|
||||
role="img"
|
||||
tabindex="-1"
|
||||
>
|
||||
<path
|
||||
d="M400 317.7h73.9V656c0 4.4 3.6 8 8 8h60c4.4 0 8-3.6 8-8V317.7H624c6.7 0 10.4-7.7 6.3-12.9L518.3 163a8 8 0 00-12.6 0l-112 141.7c-4.1 5.3-.4 13 6.3 13zM878 626h-60c-4.4 0-8 3.6-8 8v154H214V634c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v198c0 17.7 14.3 32 32 32h684c17.7 0 32-14.3 32-32V634c0-4.4-3.6-8-8-8z"
|
||||
/>
|
||||
</svg>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="delete"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M360 184h-8c4.4 0 8-3.6 8-8v8h304v-8c0 4.4 3.6 8 8 8h-8v72h72v-80c0-35.3-28.7-64-64-64H352c-35.3 0-64 28.7-64 64v80h72v-72zm504 72H160c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h60.4l24.7 523c1.6 34.1 29.8 61 63.9 61h454c34.2 0 62.3-26.8 63.9-61l24.7-523H888c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zM731.3 840H292.7l-24.2-512h487l-24.2 512z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
<span>
|
||||
Upload
|
||||
</span>
|
||||
</button>
|
||||
</span>
|
||||
</button>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-upload-list ant-upload-list-picture"
|
||||
class="ant-upload-list-item-container"
|
||||
>
|
||||
<div
|
||||
class="ant-upload-list-item-container"
|
||||
class="ant-upload-list-item ant-upload-list-item-done"
|
||||
>
|
||||
<div
|
||||
class="ant-upload-list-item ant-upload-list-item-uploading"
|
||||
<a
|
||||
class="ant-upload-list-item-thumbnail"
|
||||
href="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
<div
|
||||
class="ant-upload-list-item-thumbnail"
|
||||
<img
|
||||
alt="yyy.png"
|
||||
class="ant-upload-list-item-image"
|
||||
src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
|
||||
/>
|
||||
</a>
|
||||
<a
|
||||
class="ant-upload-list-item-name"
|
||||
href="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
title="yyy.png"
|
||||
>
|
||||
yyy.png
|
||||
</a>
|
||||
<span
|
||||
class="ant-upload-list-item-actions picture"
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-text ant-btn-sm ant-btn-icon-only ant-upload-list-item-action"
|
||||
title="Remove file"
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
aria-label="loading"
|
||||
class="anticon anticon-loading anticon-spin"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="loading"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="0 0 1024 1024"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
<span
|
||||
class="ant-upload-list-item-name"
|
||||
title="xxx.png"
|
||||
>
|
||||
xxx.png
|
||||
</span>
|
||||
<span
|
||||
class="ant-upload-list-item-actions picture"
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-text ant-btn-sm ant-btn-icon-only ant-upload-list-item-action"
|
||||
title="Remove file"
|
||||
type="button"
|
||||
class="ant-btn-icon"
|
||||
>
|
||||
<span
|
||||
class="ant-btn-icon"
|
||||
aria-label="delete"
|
||||
class="anticon anticon-delete"
|
||||
role="img"
|
||||
tabindex="-1"
|
||||
>
|
||||
<span
|
||||
aria-label="delete"
|
||||
class="anticon anticon-delete"
|
||||
role="img"
|
||||
tabindex="-1"
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="delete"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="delete"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M360 184h-8c4.4 0 8-3.6 8-8v8h304v-8c0 4.4 3.6 8 8 8h-8v72h72v-80c0-35.3-28.7-64-64-64H352c-35.3 0-64 28.7-64 64v80h72v-72zm504 72H160c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h60.4l24.7 523c1.6 34.1 29.8 61 63.9 61h454c34.2 0 62.3-26.8 63.9-61l24.7-523H888c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zM731.3 840H292.7l-24.2-512h487l-24.2 512z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
<path
|
||||
d="M360 184h-8c4.4 0 8-3.6 8-8v8h304v-8c0 4.4 3.6 8 8 8h-8v72h72v-80c0-35.3-28.7-64-64-64H352c-35.3 0-64 28.7-64 64v80h72v-72zm504 72H160c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h60.4l24.7 523c1.6 34.1 29.8 61 63.9 61h454c34.2 0 62.3-26.8 63.9-61l24.7-523H888c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zM731.3 840H292.7l-24.2-512h487l-24.2 512z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</button>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-upload-list-item-container"
|
||||
>
|
||||
<div
|
||||
class="ant-upload-list-item ant-upload-list-item-done"
|
||||
>
|
||||
<a
|
||||
class="ant-upload-list-item-thumbnail"
|
||||
href="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
<img
|
||||
alt="yyy.png"
|
||||
class="ant-upload-list-item-image"
|
||||
src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
|
||||
/>
|
||||
</a>
|
||||
<a
|
||||
class="ant-upload-list-item-name"
|
||||
href="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
title="yyy.png"
|
||||
>
|
||||
yyy.png
|
||||
</a>
|
||||
<span
|
||||
class="ant-upload-list-item-actions picture"
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-text ant-btn-sm ant-btn-icon-only ant-upload-list-item-action"
|
||||
title="Remove file"
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
class="ant-btn-icon"
|
||||
>
|
||||
<span
|
||||
aria-label="delete"
|
||||
class="anticon anticon-delete"
|
||||
role="img"
|
||||
tabindex="-1"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="delete"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M360 184h-8c4.4 0 8-3.6 8-8v8h304v-8c0 4.4 3.6 8 8 8h-8v72h72v-80c0-35.3-28.7-64-64-64H352c-35.3 0-64 28.7-64 64v80h72v-72zm504 72H160c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h60.4l24.7 523c1.6 34.1 29.8 61 63.9 61h454c34.2 0 62.3-26.8 63.9-61l24.7-523H888c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zM731.3 840H292.7l-24.2-512h487l-24.2 512z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
</button>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-upload-list-item-container"
|
||||
>
|
||||
<div
|
||||
class="ant-upload-list-item ant-upload-list-item-error"
|
||||
>
|
||||
<div
|
||||
class="ant-upload-list-item-thumbnail ant-upload-list-item-file"
|
||||
>
|
||||
<span
|
||||
aria-label="picture"
|
||||
class="anticon anticon-picture"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="picture"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M928 160H96c-17.7 0-32 14.3-32 32v640c0 17.7 14.3 32 32 32h832c17.7 0 32-14.3 32-32V192c0-17.7-14.3-32-32-32zm-40 632H136v-39.9l138.5-164.3 150.1 178L658.1 489 888 761.6V792zm0-129.8L664.2 396.8c-3.2-3.8-9-3.8-12.2 0L424.6 666.4l-144-170.7c-3.2-3.8-9-3.8-12.2 0L136 652.7V232h752v430.2z"
|
||||
fill="#1677ff"
|
||||
/>
|
||||
<path
|
||||
d="M424.6 765.8l-150.1-178L136 752.1V792h752v-30.4L658.1 489z"
|
||||
fill="#e6f4ff"
|
||||
/>
|
||||
<path
|
||||
d="M136 652.7l132.4-157c3.2-3.8 9-3.8 12.2 0l144 170.7L652 396.8c3.2-3.8 9-3.8 12.2 0L888 662.2V232H136v420.7zM304 280a88 88 0 110 176 88 88 0 010-176z"
|
||||
fill="#e6f4ff"
|
||||
/>
|
||||
<path
|
||||
d="M276 368a28 28 0 1056 0 28 28 0 10-56 0z"
|
||||
fill="#e6f4ff"
|
||||
/>
|
||||
<path
|
||||
d="M304 456a88 88 0 100-176 88 88 0 000 176zm0-116c15.5 0 28 12.5 28 28s-12.5 28-28 28-28-12.5-28-28 12.5-28 28-28z"
|
||||
fill="#1677ff"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
<span
|
||||
class="ant-upload-list-item-name"
|
||||
title="zzz.png"
|
||||
>
|
||||
zzz.png
|
||||
</span>
|
||||
<span
|
||||
class="ant-upload-list-item-actions picture"
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-text ant-btn-sm ant-btn-icon-only ant-upload-list-item-action"
|
||||
title="Remove file"
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
class="ant-btn-icon"
|
||||
>
|
||||
<span
|
||||
aria-label="delete"
|
||||
class="anticon anticon-delete"
|
||||
role="img"
|
||||
tabindex="-1"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="delete"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M360 184h-8c4.4 0 8-3.6 8-8v8h304v-8c0 4.4 3.6 8 8 8h-8v72h72v-80c0-35.3-28.7-64-64-64H352c-35.3 0-64 28.7-64 64v80h72v-72zm504 72H160c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h60.4l24.7 523c1.6 34.1 29.8 61 63.9 61h454c34.2 0 62.3-26.8 63.9-61l24.7-523H888c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zM731.3 840H292.7l-24.2-512h487l-24.2 512z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
</button>
|
||||
</span>
|
||||
</div>
|
||||
</button>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</span>,
|
||||
<br />,
|
||||
<br />,
|
||||
<span
|
||||
class="ant-upload-wrapper upload-list-inline"
|
||||
>
|
||||
<div
|
||||
class="ant-upload ant-upload-select"
|
||||
>
|
||||
<span
|
||||
class="ant-upload"
|
||||
>
|
||||
<input
|
||||
accept=""
|
||||
style="display:none"
|
||||
type="file"
|
||||
/>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
class="ant-btn-icon"
|
||||
>
|
||||
<span
|
||||
aria-label="upload"
|
||||
class="anticon anticon-upload"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="upload"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M400 317.7h73.9V656c0 4.4 3.6 8 8 8h60c4.4 0 8-3.6 8-8V317.7H624c6.7 0 10.4-7.7 6.3-12.9L518.3 163a8 8 0 00-12.6 0l-112 141.7c-4.1 5.3-.4 13 6.3 13zM878 626h-60c-4.4 0-8 3.6-8 8v154H214V634c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v198c0 17.7 14.3 32 32 32h684c17.7 0 32-14.3 32-32V634c0-4.4-3.6-8-8-8z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
<span>
|
||||
Upload
|
||||
</span>
|
||||
</button>
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="ant-upload-list ant-upload-list-picture"
|
||||
class="ant-upload-list-item-container"
|
||||
>
|
||||
<div
|
||||
class="ant-upload-list-item-container"
|
||||
class="ant-upload-list-item ant-upload-list-item-error"
|
||||
>
|
||||
<div
|
||||
class="ant-upload-list-item ant-upload-list-item-uploading"
|
||||
class="ant-upload-list-item-thumbnail ant-upload-list-item-file"
|
||||
>
|
||||
<div
|
||||
class="ant-upload-list-item-thumbnail"
|
||||
<span
|
||||
aria-label="picture"
|
||||
class="anticon anticon-picture"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="picture"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M928 160H96c-17.7 0-32 14.3-32 32v640c0 17.7 14.3 32 32 32h832c17.7 0 32-14.3 32-32V192c0-17.7-14.3-32-32-32zm-40 632H136v-39.9l138.5-164.3 150.1 178L658.1 489 888 761.6V792zm0-129.8L664.2 396.8c-3.2-3.8-9-3.8-12.2 0L424.6 666.4l-144-170.7c-3.2-3.8-9-3.8-12.2 0L136 652.7V232h752v430.2z"
|
||||
fill="#1677ff"
|
||||
/>
|
||||
<path
|
||||
d="M424.6 765.8l-150.1-178L136 752.1V792h752v-30.4L658.1 489z"
|
||||
fill="#e6f4ff"
|
||||
/>
|
||||
<path
|
||||
d="M136 652.7l132.4-157c3.2-3.8 9-3.8 12.2 0l144 170.7L652 396.8c3.2-3.8 9-3.8 12.2 0L888 662.2V232H136v420.7zM304 280a88 88 0 110 176 88 88 0 010-176z"
|
||||
fill="#e6f4ff"
|
||||
/>
|
||||
<path
|
||||
d="M276 368a28 28 0 1056 0 28 28 0 10-56 0z"
|
||||
fill="#e6f4ff"
|
||||
/>
|
||||
<path
|
||||
d="M304 456a88 88 0 100-176 88 88 0 000 176zm0-116c15.5 0 28 12.5 28 28s-12.5 28-28 28-28-12.5-28-28 12.5-28 28-28z"
|
||||
fill="#1677ff"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
<span
|
||||
class="ant-upload-list-item-name"
|
||||
title="zzz.png"
|
||||
>
|
||||
zzz.png
|
||||
</span>
|
||||
<span
|
||||
class="ant-upload-list-item-actions picture"
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-text ant-btn-sm ant-btn-icon-only ant-upload-list-item-action"
|
||||
title="Remove file"
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
aria-label="loading"
|
||||
class="anticon anticon-loading anticon-spin"
|
||||
role="img"
|
||||
class="ant-btn-icon"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="loading"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="0 0 1024 1024"
|
||||
width="1em"
|
||||
<span
|
||||
aria-label="delete"
|
||||
class="anticon anticon-delete"
|
||||
role="img"
|
||||
tabindex="-1"
|
||||
>
|
||||
<path
|
||||
d="M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z"
|
||||
/>
|
||||
</svg>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="delete"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M360 184h-8c4.4 0 8-3.6 8-8v8h304v-8c0 4.4 3.6 8 8 8h-8v72h72v-80c0-35.3-28.7-64-64-64H352c-35.3 0-64 28.7-64 64v80h72v-72zm504 72H160c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h60.4l24.7 523c1.6 34.1 29.8 61 63.9 61h454c34.2 0 62.3-26.8 63.9-61l24.7-523H888c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zM731.3 840H292.7l-24.2-512h487l-24.2 512z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<span
|
||||
class="ant-upload-list-item-name"
|
||||
title="xxx.png"
|
||||
>
|
||||
xxx.png
|
||||
</span>
|
||||
<span
|
||||
class="ant-upload-list-item-actions picture"
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-text ant-btn-sm ant-btn-icon-only ant-upload-list-item-action"
|
||||
title="Remove file"
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
class="ant-btn-icon"
|
||||
>
|
||||
<span
|
||||
aria-label="delete"
|
||||
class="anticon anticon-delete"
|
||||
role="img"
|
||||
tabindex="-1"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="delete"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M360 184h-8c4.4 0 8-3.6 8-8v8h304v-8c0 4.4 3.6 8 8 8h-8v72h72v-80c0-35.3-28.7-64-64-64H352c-35.3 0-64 28.7-64 64v80h72v-72zm504 72H160c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h60.4l24.7 523c1.6 34.1 29.8 61 63.9 61h454c34.2 0 62.3-26.8 63.9-61l24.7-523H888c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zM731.3 840H292.7l-24.2-512h487l-24.2 512z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
</button>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-upload-list-item-container"
|
||||
>
|
||||
<div
|
||||
class="ant-upload-list-item ant-upload-list-item-done"
|
||||
>
|
||||
<a
|
||||
class="ant-upload-list-item-thumbnail"
|
||||
href="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
<img
|
||||
alt="yyy.png"
|
||||
class="ant-upload-list-item-image"
|
||||
src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
|
||||
/>
|
||||
</a>
|
||||
<a
|
||||
class="ant-upload-list-item-name"
|
||||
href="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
title="yyy.png"
|
||||
>
|
||||
yyy.png
|
||||
</a>
|
||||
<span
|
||||
class="ant-upload-list-item-actions picture"
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-text ant-btn-sm ant-btn-icon-only ant-upload-list-item-action"
|
||||
title="Remove file"
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
class="ant-btn-icon"
|
||||
>
|
||||
<span
|
||||
aria-label="delete"
|
||||
class="anticon anticon-delete"
|
||||
role="img"
|
||||
tabindex="-1"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="delete"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M360 184h-8c4.4 0 8-3.6 8-8v8h304v-8c0 4.4 3.6 8 8 8h-8v72h72v-80c0-35.3-28.7-64-64-64H352c-35.3 0-64 28.7-64 64v80h72v-72zm504 72H160c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h60.4l24.7 523c1.6 34.1 29.8 61 63.9 61h454c34.2 0 62.3-26.8 63.9-61l24.7-523H888c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zM731.3 840H292.7l-24.2-512h487l-24.2 512z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
</button>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-upload-list-item-container"
|
||||
>
|
||||
<div
|
||||
class="ant-upload-list-item ant-upload-list-item-error"
|
||||
>
|
||||
<div
|
||||
class="ant-upload-list-item-thumbnail ant-upload-list-item-file"
|
||||
>
|
||||
<span
|
||||
aria-label="picture"
|
||||
class="anticon anticon-picture"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="picture"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M928 160H96c-17.7 0-32 14.3-32 32v640c0 17.7 14.3 32 32 32h832c17.7 0 32-14.3 32-32V192c0-17.7-14.3-32-32-32zm-40 632H136v-39.9l138.5-164.3 150.1 178L658.1 489 888 761.6V792zm0-129.8L664.2 396.8c-3.2-3.8-9-3.8-12.2 0L424.6 666.4l-144-170.7c-3.2-3.8-9-3.8-12.2 0L136 652.7V232h752v430.2z"
|
||||
fill="#1677ff"
|
||||
/>
|
||||
<path
|
||||
d="M424.6 765.8l-150.1-178L136 752.1V792h752v-30.4L658.1 489z"
|
||||
fill="#e6f4ff"
|
||||
/>
|
||||
<path
|
||||
d="M136 652.7l132.4-157c3.2-3.8 9-3.8 12.2 0l144 170.7L652 396.8c3.2-3.8 9-3.8 12.2 0L888 662.2V232H136v420.7zM304 280a88 88 0 110 176 88 88 0 010-176z"
|
||||
fill="#e6f4ff"
|
||||
/>
|
||||
<path
|
||||
d="M276 368a28 28 0 1056 0 28 28 0 10-56 0z"
|
||||
fill="#e6f4ff"
|
||||
/>
|
||||
<path
|
||||
d="M304 456a88 88 0 100-176 88 88 0 000 176zm0-116c15.5 0 28 12.5 28 28s-12.5 28-28 28-28-12.5-28-28 12.5-28 28-28z"
|
||||
fill="#1677ff"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
<span
|
||||
class="ant-upload-list-item-name"
|
||||
title="zzz.png"
|
||||
>
|
||||
zzz.png
|
||||
</span>
|
||||
<span
|
||||
class="ant-upload-list-item-actions picture"
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-text ant-btn-sm ant-btn-icon-only ant-upload-list-item-action"
|
||||
title="Remove file"
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
class="ant-btn-icon"
|
||||
>
|
||||
<span
|
||||
aria-label="delete"
|
||||
class="anticon anticon-delete"
|
||||
role="img"
|
||||
tabindex="-1"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="delete"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M360 184h-8c4.4 0 8-3.6 8-8v8h304v-8c0 4.4 3.6 8 8 8h-8v72h72v-80c0-35.3-28.7-64-64-64H352c-35.3 0-64 28.7-64 64v80h72v-72zm504 72H160c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h60.4l24.7 523c1.6 34.1 29.8 61 63.9 61h454c34.2 0 62.3-26.8 63.9-61l24.7-523H888c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zM731.3 840H292.7l-24.2-512h487l-24.2 512z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
</button>
|
||||
</span>
|
||||
</div>
|
||||
</button>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</span>,
|
||||
]
|
||||
</div>
|
||||
</span>
|
||||
`;
|
||||
|
||||
exports[`renders components/upload/demo/preview-file.tsx correctly 1`] = `
|
||||
|
||||
@ -5,16 +5,3 @@
|
||||
## en-US
|
||||
|
||||
If uploaded file is a picture, the thumbnail can be shown. `IE8/9` do not support local thumbnail show. Please use `thumbUrl` instead.
|
||||
|
||||
```css
|
||||
/* tile uploaded pictures */
|
||||
.upload-list-inline .ant-upload-list-item {
|
||||
float: left;
|
||||
width: 200px;
|
||||
margin-inline-end: 8px;
|
||||
}
|
||||
|
||||
.ant-upload-rtl.upload-list-inline .ant-upload-list-item {
|
||||
float: right;
|
||||
}
|
||||
```
|
||||
|
||||
@ -25,25 +25,15 @@ const fileList: UploadFile[] = [
|
||||
];
|
||||
|
||||
const App: React.FC = () => (
|
||||
<>
|
||||
<Upload
|
||||
action="https://660d2bd96ddfa2943b33731c.mockapi.io/api/upload"
|
||||
listType="picture"
|
||||
defaultFileList={[...fileList]}
|
||||
>
|
||||
<Button icon={<UploadOutlined />}>Upload</Button>
|
||||
</Upload>
|
||||
<br />
|
||||
<br />
|
||||
<Upload
|
||||
action="https://660d2bd96ddfa2943b33731c.mockapi.io/api/upload"
|
||||
listType="picture"
|
||||
defaultFileList={[...fileList]}
|
||||
className="upload-list-inline"
|
||||
>
|
||||
<Button icon={<UploadOutlined />}>Upload</Button>
|
||||
</Upload>
|
||||
</>
|
||||
<Upload
|
||||
action="https://660d2bd96ddfa2943b33731c.mockapi.io/api/upload"
|
||||
listType="picture"
|
||||
defaultFileList={fileList}
|
||||
>
|
||||
<Button type="primary" icon={<UploadOutlined />}>
|
||||
Upload
|
||||
</Button>
|
||||
</Upload>
|
||||
);
|
||||
|
||||
export default App;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user