mirror of
https://github.com/ant-design/ant-design.git
synced 2024-11-28 05:05:48 +08:00
fix: notification prevent interaction on elements which under it (#34716)
* fix: notification prevent interaction on elements which under it close #34700 * fix test case
This commit is contained in:
afc163
GitHub
parent
c7553c2ba5
commit
1935ece582
@ -188,7 +188,7 @@ Array [
|
||||
`;
|
||||
|
||||
exports[`renders ./components/notification/demo/placement.md extend context correctly 1`] = `
|
||||
<div>
|
||||
Array [
|
||||
<div
|
||||
class="ant-space ant-space-horizontal ant-space-align-center"
|
||||
>
|
||||
@ -255,11 +255,11 @@ exports[`renders ./components/notification/demo/placement.md extend context corr
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>,
|
||||
<div
|
||||
class="ant-divider ant-divider-horizontal"
|
||||
role="separator"
|
||||
/>
|
||||
/>,
|
||||
<div
|
||||
class="ant-space ant-space-horizontal ant-space-align-center"
|
||||
>
|
||||
@ -326,11 +326,11 @@ exports[`renders ./components/notification/demo/placement.md extend context corr
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>,
|
||||
<div
|
||||
class="ant-divider ant-divider-horizontal"
|
||||
role="separator"
|
||||
/>
|
||||
/>,
|
||||
<div
|
||||
class="ant-space ant-space-horizontal ant-space-align-center"
|
||||
>
|
||||
@ -397,8 +397,8 @@ exports[`renders ./components/notification/demo/placement.md extend context corr
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>,
|
||||
]
|
||||
`;
|
||||
|
||||
exports[`renders ./components/notification/demo/update.md extend context correctly 1`] = `
|
||||
|
||||
@ -188,7 +188,7 @@ Array [
|
||||
`;
|
||||
|
||||
exports[`renders ./components/notification/demo/placement.md correctly 1`] = `
|
||||
<div>
|
||||
Array [
|
||||
<div
|
||||
class="ant-space ant-space-horizontal ant-space-align-center"
|
||||
>
|
||||
@ -255,11 +255,11 @@ exports[`renders ./components/notification/demo/placement.md correctly 1`] = `
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>,
|
||||
<div
|
||||
class="ant-divider ant-divider-horizontal"
|
||||
role="separator"
|
||||
/>
|
||||
/>,
|
||||
<div
|
||||
class="ant-space ant-space-horizontal ant-space-align-center"
|
||||
>
|
||||
@ -326,11 +326,11 @@ exports[`renders ./components/notification/demo/placement.md correctly 1`] = `
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>,
|
||||
<div
|
||||
class="ant-divider ant-divider-horizontal"
|
||||
role="separator"
|
||||
/>
|
||||
/>,
|
||||
<div
|
||||
class="ant-space ant-space-horizontal ant-space-align-center"
|
||||
>
|
||||
@ -397,8 +397,8 @@ exports[`renders ./components/notification/demo/placement.md correctly 1`] = `
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>,
|
||||
]
|
||||
`;
|
||||
|
||||
exports[`renders ./components/notification/demo/update.md correctly 1`] = `
|
||||
|
||||
@ -41,8 +41,9 @@ describe('Notification.placement', () => {
|
||||
});
|
||||
style = getStyle($$('.ant-notification-top')[0]);
|
||||
expect(style.top).toBe('50px');
|
||||
expect(style.left).toBe('0px');
|
||||
expect(style.right).toBe('0px');
|
||||
expect(style.left).toBe('50%');
|
||||
expect(style.transform).toBe('translateX(-50%)');
|
||||
expect(style.right).toBe('');
|
||||
expect(style.bottom).toBe('');
|
||||
|
||||
open({
|
||||
@ -86,8 +87,9 @@ describe('Notification.placement', () => {
|
||||
});
|
||||
style = getStyle($$('.ant-notification-bottom')[0]);
|
||||
expect(style.top).toBe('');
|
||||
expect(style.left).toBe('0px');
|
||||
expect(style.right).toBe('0px');
|
||||
expect(style.left).toBe('50%');
|
||||
expect(style.transform).toBe('translateX(-50%)');
|
||||
expect(style.right).toBe('');
|
||||
expect(style.bottom).toBe('100px');
|
||||
|
||||
open({
|
||||
|
||||
@ -7,11 +7,11 @@ title:
|
||||
|
||||
## zh-CN
|
||||
|
||||
通知从右上角、右下角、左下角、左上角弹出。
|
||||
使用 `placement` 可以配置通知从右上角、右下角、左下角、左上角弹出。
|
||||
|
||||
## en-US
|
||||
|
||||
A notification box can appear from the `topRight`, `bottomRight`, `bottomLeft` or `topLeft` of the viewport.
|
||||
A notification box can appear from the `topRight`, `bottomRight`, `bottomLeft` or `topLeft` of the viewport via `placement`.
|
||||
|
||||
```jsx
|
||||
import { Button, notification, Divider, Space } from 'antd';
|
||||
@ -34,40 +34,54 @@ const openNotification = placement => {
|
||||
};
|
||||
|
||||
ReactDOM.render(
|
||||
<div>
|
||||
<>
|
||||
<Space>
|
||||
<Button type="primary" onClick={() => openNotification('top')}>
|
||||
<BorderTopOutlined />
|
||||
<Button type="primary" onClick={() => openNotification('top')} icon={<BorderTopOutlined />}>
|
||||
top
|
||||
</Button>
|
||||
<Button type="primary" onClick={() => openNotification('bottom')}>
|
||||
<BorderBottomOutlined />
|
||||
<Button
|
||||
type="primary"
|
||||
onClick={() => openNotification('bottom')}
|
||||
icon={<BorderBottomOutlined />}
|
||||
>
|
||||
bottom
|
||||
</Button>
|
||||
</Space>
|
||||
<Divider />
|
||||
<Space>
|
||||
<Button type="primary" onClick={() => openNotification('topLeft')}>
|
||||
<RadiusUpleftOutlined />
|
||||
<Button
|
||||
type="primary"
|
||||
onClick={() => openNotification('topLeft')}
|
||||
icon={<RadiusUpleftOutlined />}
|
||||
>
|
||||
topLeft
|
||||
</Button>
|
||||
<Button type="primary" onClick={() => openNotification('topRight')}>
|
||||
<RadiusUprightOutlined />
|
||||
<Button
|
||||
type="primary"
|
||||
onClick={() => openNotification('topRight')}
|
||||
icon={<RadiusUprightOutlined />}
|
||||
>
|
||||
topRight
|
||||
</Button>
|
||||
</Space>
|
||||
<Divider />
|
||||
<Space>
|
||||
<Button type="primary" onClick={() => openNotification('bottomLeft')}>
|
||||
<RadiusBottomleftOutlined />
|
||||
<Button
|
||||
type="primary"
|
||||
onClick={() => openNotification('bottomLeft')}
|
||||
icon={<RadiusBottomleftOutlined />}
|
||||
>
|
||||
bottomLeft
|
||||
</Button>
|
||||
<Button type="primary" onClick={() => openNotification('bottomRight')}>
|
||||
<RadiusBottomrightOutlined />
|
||||
<Button
|
||||
type="primary"
|
||||
onClick={() => openNotification('bottomRight')}
|
||||
icon={<RadiusBottomrightOutlined />}
|
||||
>
|
||||
bottomRight
|
||||
</Button>
|
||||
</Space>
|
||||
</div>,
|
||||
</>,
|
||||
mountNode,
|
||||
);
|
||||
```
|
||||
|
||||
@ -87,8 +87,9 @@ function getPlacementStyle(
|
||||
switch (placement) {
|
||||
case 'top':
|
||||
style = {
|
||||
left: 0,
|
||||
right: 0,
|
||||
left: '50%',
|
||||
transform: 'translateX(-50%)',
|
||||
right: 'auto',
|
||||
top,
|
||||
bottom: 'auto',
|
||||
};
|
||||
@ -109,8 +110,9 @@ function getPlacementStyle(
|
||||
break;
|
||||
case 'bottom':
|
||||
style = {
|
||||
left: 0,
|
||||
right: 0,
|
||||
left: '50%',
|
||||
transform: 'translateX(-50%)',
|
||||
right: 'auto',
|
||||
top: 'auto',
|
||||
bottom,
|
||||
};
|
||||
|
||||
@ -16,25 +16,6 @@
|
||||
z-index: @zindex-notification;
|
||||
margin-right: @notification-margin-edge;
|
||||
|
||||
&-top,
|
||||
&-bottom,
|
||||
&-topLeft,
|
||||
&-bottomLeft {
|
||||
margin-right: 0;
|
||||
margin-left: @notification-margin-edge;
|
||||
|
||||
.@{notification-prefix-cls}-fade-enter.@{notification-prefix-cls}-fade-enter-active,
|
||||
.@{notification-prefix-cls}-fade-appear.@{notification-prefix-cls}-fade-appear-active {
|
||||
animation-name: NotificationLeftFadeIn;
|
||||
}
|
||||
}
|
||||
|
||||
&-top,
|
||||
&-bottom {
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
&-close-icon {
|
||||
font-size: @font-size-base;
|
||||
cursor: pointer;
|
||||
@ -206,18 +187,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes NotificationLeftFadeIn {
|
||||
0% {
|
||||
right: @notification-width;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
100% {
|
||||
right: 0;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes NotificationFadeOut {
|
||||
0% {
|
||||
max-height: 150px;
|
||||
@ -235,3 +204,4 @@
|
||||
}
|
||||
|
||||
@import './rtl';
|
||||
@import './placement';
|
||||
|
||||
68
components/notification/style/placement.less
Normal file
68
components/notification/style/placement.less
Normal file
@ -0,0 +1,68 @@
|
||||
.@{notification-prefix-cls} {
|
||||
&-top,
|
||||
&-bottom {
|
||||
margin-right: 0;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
&-top {
|
||||
.@{notification-prefix-cls}-fade-enter.@{notification-prefix-cls}-fade-enter-active,
|
||||
.@{notification-prefix-cls}-fade-appear.@{notification-prefix-cls}-fade-appear-active {
|
||||
animation-name: NotificationTopFadeIn;
|
||||
}
|
||||
}
|
||||
|
||||
&-bottom {
|
||||
.@{notification-prefix-cls}-fade-enter.@{notification-prefix-cls}-fade-enter-active,
|
||||
.@{notification-prefix-cls}-fade-appear.@{notification-prefix-cls}-fade-appear-active {
|
||||
animation-name: NotificationBottomFadeIn;
|
||||
}
|
||||
}
|
||||
|
||||
&-topLeft,
|
||||
&-bottomLeft {
|
||||
margin-right: 0;
|
||||
margin-left: @notification-margin-edge;
|
||||
|
||||
.@{notification-prefix-cls}-fade-enter.@{notification-prefix-cls}-fade-enter-active,
|
||||
.@{notification-prefix-cls}-fade-appear.@{notification-prefix-cls}-fade-appear-active {
|
||||
animation-name: NotificationLeftFadeIn;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes NotificationTopFadeIn {
|
||||
0% {
|
||||
margin-top: -100%;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
100% {
|
||||
margin-top: 0;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes NotificationBottomFadeIn {
|
||||
0% {
|
||||
margin-bottom: -100%;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
100% {
|
||||
margin-bottom: 0;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes NotificationLeftFadeIn {
|
||||
0% {
|
||||
right: @notification-width;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
100% {
|
||||
right: 0;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user