feat: notification add top & bottom placement

Author: tangjinzhou

components/notification/demo/placement.vue

@@ -1,38 +1,46 @@
 <docs>
 ---
-order: 6
+order: 5
 title:
   zh-CN: 位置
   en-US: Placement
 ---
 
 ## zh-CN
 
-可以设置通知从右上角、右下角、左下角、左上角弹出。
+使用 `placement` 可以配置通知从右上角、右下角、左下角、左上角弹出。
 
 ## en-US
 
-A notification box can pop up from `topRight` or `bottomRight` or `bottomLeft` or `topLeft`.
+A notification box can appear from the `topRight`, `bottomRight`, `bottomLeft` or `topLeft` of the viewport via `placement`.
 
 </docs>
 
 <template>
   <div>
+    <a-button type="primary" @click="openNotification('top')">
+      <template #icon><BorderTopOutlined /></template>
+      top
+    </a-button>
+    <a-button type="primary" @click="openNotification('bottom')">
+      <template #icon><BorderBottomOutlined /></template>
+      bottom
+    </a-button>
     <a-button type="primary" @click="openNotification('topLeft')">
-      <radius-upleft-outlined />
+      <template #icon><radius-upleft-outlined /></template>
       topLeft
     </a-button>
     <a-button type="primary" @click="openNotification('topRight')">
-      <radius-upright-outlined />
+      <template #icon><radius-upright-outlined /></template>
       topRight
     </a-button>
     <a-divider />
     <a-button type="primary" @click="openNotification('bottomLeft')">
-      <radius-bottomleft-outlined />
+      <template #icon><radius-bottomleft-outlined /></template>
       bottomLeft
     </a-button>
     <a-button type="primary" @click="openNotification('bottomRight')">
-      <radius-bottomright-outlined />
+      <template #icon><radius-bottomright-outlined /></template>
       bottomRight
     </a-button>
   </div>
@@ -43,6 +51,8 @@ import {
   RadiusUprightOutlined,
   RadiusBottomleftOutlined,
   RadiusBottomrightOutlined,
+  BorderTopOutlined,
+  BorderBottomOutlined,
 } from '@ant-design/icons-vue';
 import { notification } from 'ant-design-vue';
 import { defineComponent } from 'vue';
@@ -53,6 +63,8 @@ export default defineComponent({
     RadiusUprightOutlined,
     RadiusBottomleftOutlined,
     RadiusBottomrightOutlined,
+    BorderTopOutlined,
+    BorderBottomOutlined,
   },
   setup() {
     const openNotification = (placement: NotificationPlacement) => {

components/notification/index.en-US.md

@@ -40,7 +40,7 @@ The properties of config are as follows:
 | icon | Customized icon | VNode \| () => VNode | - |  |
 | key | The unique identifier of the Notification | string | - |  |
 | message | The title of notification box (required) | string\| VNode \| () => VNode | - |  |
-| placement | Position of Notification, can be one of `topLeft` `topRight` `bottomLeft` `bottomRight` | string | `topRight` |  |
+| placement | Position of Notification, can be one of `top` `topLeft` `topRight` `bottom` `bottomLeft` `bottomRight` | string | `topRight` | `top` `bottom` 3.3.0 |
 | style | Customized inline style | Object \| string | - |  |
 | top | Distance from the top of the viewport, when `placement` is `topRight` or `topLeft` (unit: pixels). | string | `24px` |  |
 | onClick | Specify a function that will be called when the notification is clicked | Function | - |  |

components/notification/index.tsx

@@ -11,7 +11,13 @@ import { globalConfig } from '../config-provider';
 import type { NotificationInstance as VCNotificationInstance } from '../vc-notification/Notification';
 import classNames from '../_util/classNames';
 
-export type NotificationPlacement = 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight';
+export type NotificationPlacement =
+  | 'top'
+  | 'topLeft'
+  | 'topRight'
+  | 'bottom'
+  | 'bottomLeft'
+  | 'bottomRight';
 
 export type IconType = 'success' | 'info' | 'error' | 'warning';
 
@@ -76,6 +82,15 @@ function getPlacementStyle(
 ) {
   let style: CSSProperties;
   switch (placement) {
+    case 'top':
+      style = {
+        left: '50%',
+        transform: 'translateX(-50%)',
+        right: 'auto',
+        top,
+        bottom: 'auto',
+      };
+      break;
     case 'topLeft':
       style = {
         left: '0px',
@@ -90,6 +105,15 @@ function getPlacementStyle(
         bottom: 'auto',
       };
       break;
+    case 'bottom':
+      style = {
+        left: '50%',
+        transform: 'translateX(-50%)',
+        right: 'auto',
+        top: 'auto',
+        bottom,
+      };
+      break;
     case 'bottomLeft':
       style = {
         left: '0px',
@@ -177,6 +201,7 @@ export interface NotificationArgsProps {
   duration?: number | null;
   icon?: VueNode | (() => VueNode);
   placement?: NotificationPlacement;
+  maxCount?: number;
   style?: CSSProperties;
   prefixCls?: string;
   class?: string;

components/notification/index.zh-CN.md

@@ -41,7 +41,7 @@ config 参数如下：
 | icon | 自定义图标 | VNode \| () => VNode | - |  |
 | key | 当前通知唯一标志 | string | - |  |
 | message | 通知提醒标题，必选 | string \| VNode \| () => VNode | - |  |
-| placement | 弹出位置，可选 `topLeft` `topRight` `bottomLeft` `bottomRight` | string | topRight |  |
+| placement | 弹出位置，可选 `top` `topLeft` `topRight` `bottom` `bottomLeft` `bottomRight` | string | `topRight` | `top` `bottom` 3.3.0 |
 | style | 自定义内联样式 | Object \| string | - |  |
 | top | 消息从顶部弹出时，距离顶部的位置，单位像素。 | string | `24px` |  |
 | onClick | 点击通知时触发的回调函数 | Function | - |  |

components/notification/style/index.less

@@ -16,17 +16,6 @@
   z-index: @zindex-notification;
   margin-right: @notification-margin-edge;
 
-  &-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;
-    }
-  }
-
   &-close-icon {
     font-size: @font-size-base;
     cursor: pointer;
@@ -50,6 +39,12 @@
     border-radius: @border-radius-base;
     box-shadow: @shadow-2;
 
+    .@{notification-prefix-cls}-top &,
+    .@{notification-prefix-cls}-bottom & {
+      margin-right: auto;
+      margin-left: auto;
+    }
+
     .@{notification-prefix-cls}-topLeft &,
     .@{notification-prefix-cls}-bottomLeft & {
       margin-right: auto;
@@ -192,18 +187,6 @@
   }
 }
 
-@keyframes NotificationLeftFadeIn {
-  0% {
-    right: @notification-width;
-    opacity: 0;
-  }
-
-  100% {
-    right: 0;
-    opacity: 1;
-  }
-}
-
 @keyframes NotificationFadeOut {
   0% {
     max-height: 150px;
@@ -221,3 +204,4 @@
 }
 
 @import './rtl';
+@import './placement';

components/notification/style/placement.less

@@ -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;
+  }
+}