@nutui/nutui-react-taro 4.0.0-beta.5 → 4.0.0-beta.7

package/dist/es/packages/popover/style-jrkf/style.css

@@ -10,22 +10,22 @@
 .nut-popover-arrow {
   position: absolute;
   width: scale-px(8px);
-  height: scale-px(4px);
+  height: scale-px(8px);
 }
 .nut-popover-arrow .nut-icon-ArrowRadius {
   position: absolute;
-  color: var(--nutui-popover-content-background-color, #ffffff);
+  color: var(--nutui-popover-content-background-color, var(--nutui-color-surface-overlay));
   width: scale-px(8px);
-  height: scale-px(4px);
+  height: scale-px(8px);
 }
 .nut-popover-arrow-top {
-  bottom: scale-px(-4px);
+  bottom: scale-px(-8px);
 }
 .nut-popover-arrow-bottom {
-  top: scale-px(-4px);
+  top: scale-px(-8px);
 }
 .nut-popover-arrow-left {
-  right: scale-px(-6px);
+  right: scale-px(-8px);
   transform-origin: center top;
 }
 .nut-popover-arrow-left.nut-popover-arrow-left {
@@ -33,14 +33,11 @@
   transform: rotate(90deg) translateY(-50%);
 }
 .nut-popover-arrow-left.nut-popover-arrow-left-top {
-  top: scale-px(16px);
-  right: scale-px(-8px);
+  right: scale-px(-12px);
   transform: rotate(90deg) translateY(0%);
 }
 .nut-popover-arrow-left.nut-popover-arrow-left-bottom {
-  top: auto;
-  bottom: scale-px(16px);
-  right: scale-px(-8px);
+  right: scale-px(-12px);
   transform: rotate(90deg) translateY(0%);
 }
 .nut-popover-arrow-right {
@@ -48,40 +45,40 @@
 }
 .nut-popover-arrow-right.nut-popover-arrow-right {
   top: 50%;
-  left: scale-px(-6px);
+  left: scale-px(-8px);
   transform: rotate(-90deg) translateY(-50%);
 }
 .nut-popover-arrow-right.nut-popover-arrow-right-top {
-  top: scale-px(16px);
-  left: scale-px(-8px);
+  left: scale-px(-12px);
   transform: rotate(-90deg) translateY(0%);
 }
 .nut-popover-arrow-right.nut-popover-arrow-right-bottom {
-  bottom: scale-px(16px);
-  left: scale-px(-8px);
+  left: scale-px(-12px);
   transform: rotate(-90deg) translateY(0%);
 }
 .nut-popover .nut-popover-content {
   position: absolute;
-  background: var(--nutui-popover-content-background-color, #ffffff);
+  background: var(--nutui-popover-content-background-color, var(--nutui-color-surface-overlay));
   border-radius: var(--nutui-popover-border-radius, var(--nutui-radius-s));
-  font-size: var(--nutui-popover-font-size, var(--nutui-font-text));
-  color: var(--nutui-popover-text-color, var(--nutui-color-text));
-  line-height: scale-px(28px);
+  font-size: var(--nutui-popover-font-size, var(--nutui-font-text-small));
+  color: var(--nutui-popover-text-color, var(--nutui-color-text-dark));
   /* #ifndef dynamic*/
   max-height: initial;
   overflow-y: initial;
   /* #endif */
 }
 .nut-popover .nut-popover-content-group {
-  padding: 0 var(--nutui-popover-padding, var(--nutui-spacing-xl));
+  padding: 0 var(--nutui-popover-padding-horizontal, 8px);
+  overflow: visible;
 }
 .nut-popover .nut-popover-content .nut-popover-item {
+  box-sizing: border-box;
   display: flex;
   align-items: center;
   justify-content: center;
-  border-bottom: scale-px(1px) solid var(--nutui-popover-divider-color, none);
-  max-width: var(--nutui-popover-item-width, 160px);
+  min-height: var(--nutui-popover-height, 28px);
+  padding: var(--nutui-popover-padding-vertical, 6px) 0;
+  border-bottom: scale-px(1px) solid var(--nutui-popover-divider-color, rgba(255, 255, 255, 0.12));
   word-wrap: break-word;
 }
 .nut-popover .nut-popover-content .nut-popover-item:last-child {
@@ -89,29 +86,42 @@
   border-bottom: none;
 }
 .nut-popover .nut-popover-content .nut-popover-item-icon, .nut-popover .nut-popover-content .nut-popover-item-action-icon {
+  position: relative;
   display: flex;
   justify-content: center;
   align-items: center;
-  width: var(--nutui-font-text-small);
-  height: var(--nutui-font-text-small);
-  font-size: var(--nutui-font-text-small);
+  flex-shrink: 0;
+  align-self: stretch;
+  width: var(--nutui-popover-icon-size, 12px);
+  color: var(--nutui-popover-icon-color, rgba(255, 255, 255, 0.8));
+}
+.nut-popover .nut-popover-content .nut-popover-item-icon::before, .nut-popover .nut-popover-content .nut-popover-item-action-icon::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 50%;
+  width: var(--nutui-popover-action-hotspot-size, 36px);
+  transform: translateX(-50%);
 }
 .nut-popover .nut-popover-content .nut-popover-item-icon .nut-icon, .nut-popover .nut-popover-content .nut-popover-item-action-icon .nut-icon {
-  width: var(--nutui-font-text-small);
-  height: var(--nutui-font-text-small);
-  font-size: var(--nutui-font-text-small);
+  position: relative;
+  z-index: 1;
+  width: var(--nutui-popover-icon-size, 12px);
+  height: var(--nutui-popover-icon-size, 12px);
 }
 .nut-popover .nut-popover-content .nut-popover-item-icon {
   margin-right: var(--nutui-spacing-xxs);
 }
 .nut-popover .nut-popover-content .nut-popover-item-name {
-  width: calc(100% - scale-px(34px));
   word-break: keep-all;
   flex: 1;
+  min-width: 0;
+  text-align: center;
+  line-height: calc(var(--nutui-popover-height, 28px) - var(--nutui-popover-padding-vertical, 6px) * 2);
 }
 .nut-popover .nut-popover-content .nut-popover-item-action-icon {
-  color: var(--nutui-color-text);
-  margin-left: var(--nutui-spacing-base);
+  margin-left: var(--nutui-spacing-xxs);
 }
 .nut-popover .nut-popover-content .nut-popover-item.nut-popover-item-disabled {
   color: var(--nutui-popover-disable-color, var(--nutui-color-text-disabled));
@@ -129,17 +139,15 @@
   right: 0;
 }
 .nut-popover .nut-popover-content-top-right .nut-popover-arrow-top-right {
-  right: scale-px(16px);
-  bottom: scale-px(-3.5px);
-  transform: rotate(180deg) translateX(0%);
+  transform-origin: center right;
+  transform: rotate(180deg) translateX(50%);
 }
 .nut-popover .nut-popover-content-top-left {
   left: 0;
 }
 .nut-popover .nut-popover-content-top-left .nut-popover-arrow-top-left {
-  left: scale-px(16px);
-  bottom: scale-px(-3.5px);
-  transform: rotate(180deg) translateX(0%);
+  transform-origin: center left;
+  transform: rotate(180deg) translateX(-50%);
 }
 .nut-popover .nut-popover-content-bottom .nut-popover-arrow-bottom {
   left: 50%;
@@ -149,15 +157,13 @@
   right: 0;
 }
 .nut-popover .nut-popover-content-bottom-right .nut-popover-arrow-bottom-right {
-  right: scale-px(16px);
-  transform: translateX(0%);
+  transform: translateX(50%);
 }
 .nut-popover .nut-popover-content-bottom-left {
   left: 0;
 }
 .nut-popover .nut-popover-content-bottom-left .nut-popover-arrow-bottom-left {
-  left: scale-px(16px);
-  transform: translateX(0%);
+  transform: translateX(-50%);
 }
 .nut-popover .nut-popover-content-left-bottom {
   bottom: 0;
@@ -171,30 +177,40 @@
 .nut-popover .nut-popover-content-right-top {
   top: 0;
 }
+.nut-popover--status .nut-popover-content .nut-popover-item {
+  max-width: var(--nutui-popover-status-max-width, 240px);
+}
+.nut-popover--description .nut-popover-content .nut-popover-item {
+  max-width: var(--nutui-popover-description-max-width, 208px);
+}
 
-.nut-popover-dark {
-  background: var(--nutui-popover-text-color, var(--nutui-color-text));
-  color: var(--nutui-popover-content-background-color, #ffffff);
+.nut-popover-light .nut-popover-arrow .nut-icon-ArrowRadius,
+.nut-popover-light .nut-popover-arrow .nut-popover-arrow-svg {
+  color: var(--nutui-popover-light-content-background-color, #ffffff);
 }
-.nut-popover-dark .nut-popover-arrow .nut-icon-ArrowRadius {
-  color: var(--nutui-popover-text-color, var(--nutui-color-text));
+.nut-popover-light .nut-popover-content {
+  background: var(--nutui-popover-light-content-background-color, #ffffff) !important;
+  color: var(--nutui-popover-light-text-color, var(--nutui-color-surface-overlay)) !important;
 }
-.nut-popover-dark .nut-popover-content {
-  background: var(--nutui-popover-text-color, var(--nutui-color-text)) !important;
-  color: var(--nutui-popover-content-background-color, #ffffff) !important;
+.nut-popover-light .nut-popover-content .nut-popover-item {
+  border-bottom-color: var(--nutui-popover-light-divider-color, var(--nutui-color-border));
 }
-.nut-popover-dark .nut-popover-content .nut-popover-item-action-icon {
-  color: rgba(255, 255, 255, 0.8);
+.nut-popover-light .nut-popover-content .nut-popover-item-icon, .nut-popover-light .nut-popover-content .nut-popover-item-action-icon {
+  color: var(--nutui-popover-light-icon-color, rgba(17, 20, 26, 0.8));
+}
+.nut-popover-light .nut-popover-content .nut-popover-item-icon .nut-icon, .nut-popover-light .nut-popover-content .nut-popover-item-action-icon .nut-icon {
+  color: var(--nutui-popover-light-icon-color, rgba(17, 20, 26, 0.8));
 }
 
-[dir=rtl] .nut-popover .nut-popover-content .nut-popover-item-name,
-.nut-rtl .nut-popover .nut-popover-content .nut-popover-item-name {
-  margin-left: 0;
-  margin-right: scale-px(4px);
+[dir=rtl] .nut-popover .nut-popover-content .nut-popover-item-icon,
+.nut-rtl .nut-popover .nut-popover-content .nut-popover-item-icon {
+  margin-right: 0;
+  margin-left: var(--nutui-spacing-xxs);
 }
 [dir=rtl] .nut-popover .nut-popover-content .nut-popover-item-action-icon,
 .nut-rtl .nut-popover .nut-popover-content .nut-popover-item-action-icon {
-  right: auto;
+  margin-left: 0;
+  margin-right: var(--nutui-spacing-xxs);
 }
 [dir=rtl] .nut-popover .nut-popover-content-top .nut-popover-arrow-top,
 .nut-rtl .nut-popover .nut-popover-content-top .nut-popover-arrow-top {
@@ -210,7 +226,6 @@
 [dir=rtl] .nut-popover .nut-popover-content-top-right .nut-popover-arrow-top-right,
 .nut-rtl .nut-popover .nut-popover-content-top-right .nut-popover-arrow-top-right {
   right: auto;
-  left: scale-px(16px);
 }
 [dir=rtl] .nut-popover .nut-popover-content-top-left,
 .nut-rtl .nut-popover .nut-popover-content-top-left {
@@ -220,7 +235,6 @@
 [dir=rtl] .nut-popover .nut-popover-content-top-left .nut-popover-arrow-top-left,
 .nut-rtl .nut-popover .nut-popover-content-top-left .nut-popover-arrow-top-left {
   left: auto;
-  right: scale-px(16px);
 }
 [dir=rtl] .nut-popover .nut-popover-content-bottom .nut-popover-arrow-bottom,
 .nut-rtl .nut-popover .nut-popover-content-bottom .nut-popover-arrow-bottom {
@@ -236,7 +250,6 @@
 [dir=rtl] .nut-popover .nut-popover-content-bottom-right .nut-popover-arrow-bottom-right,
 .nut-rtl .nut-popover .nut-popover-content-bottom-right .nut-popover-arrow-bottom-right {
   right: auto;
-  left: scale-px(16px);
 }
 [dir=rtl] .nut-popover .nut-popover-content-bottom-left,
 .nut-rtl .nut-popover .nut-popover-content-bottom-left {
@@ -246,7 +259,6 @@
 [dir=rtl] .nut-popover .nut-popover-content-bottom-left .nut-popover-arrow-bottom-left,
 .nut-rtl .nut-popover .nut-popover-content-bottom-left .nut-popover-arrow-bottom-left {
   left: auto;
-  right: scale-px(16px);
 }
 
 .nut-popover-enter-from,

package/dist/es/packages/popup/style/style.css

@@ -135,12 +135,6 @@ page {
 .nut-popup-top.nut-popup-round {
   border-radius: 0 0 var(--nutui-popup-border-radius, var(--nutui-radius-xl, calc(12px * var(--nut-scale-f, 1)))) var(--nutui-popup-border-radius, var(--nutui-radius-xl, calc(12px * var(--nut-scale-f, 1))));
 }
-.nut-popup-slide {
-  /* 从顶部滑出 */
-  /* 从右侧滑出 */
-  /* 从底部滑出 */
-  /* 从左侧滑出 */
-}
 @keyframes popup-scale-fade-in {
   from {
     opacity: 0;
@@ -197,6 +191,9 @@ page {
   animation-name: popup-fade-out;
   animation-duration: var(--nutui-popup-animation-duration, 0.3s);
 }
+.nut-popup-slide {
+  /* 从顶部滑出 */
+}
 @keyframes popup-slide-top-enter {
   from {
     transform: translate3d(0, -100%, 0);
@@ -224,6 +221,9 @@ page {
   animation-name: popup-slide-top-exit;
   animation-duration: var(--nutui-popup-animation-duration, 0.3s);
 }
+.nut-popup-slide {
+  /* 从右侧滑出 */
+}
 @keyframes popup-slide-right-enter {
   from {
     transform: translate3d(100%, 0, 0);
@@ -251,6 +251,9 @@ page {
   animation-name: popup-slide-right-exit;
   animation-duration: var(--nutui-popup-animation-duration, 0.3s);
 }
+.nut-popup-slide {
+  /* 从底部滑出 */
+}
 @keyframes popup-slide-bottom-enter {
   from {
     transform: translate3d(0, 100%, 0);
@@ -278,6 +281,9 @@ page {
   animation-name: slide-bottom-exit;
   animation-duration: var(--nutui-popup-animation-duration, 0.3s);
 }
+.nut-popup-slide {
+  /* 从左侧滑出 */
+}
 @keyframes popup-slide-left-enter {
   from {
     transform: translate3d(-100%, 0, 0);

package/dist/es/packages/popup/style/style.harmony.css

@@ -189,12 +189,6 @@ page {
 .nut-popup-top.nut-popup-round {
   border-radius: 0 0 var(--nutui-popup-border-radius, var(--nutui-radius-xl, calc(12px * var(--nut-scale-f, 1)))) var(--nutui-popup-border-radius, var(--nutui-radius-xl, calc(12px * var(--nut-scale-f, 1))));
 }
-.nut-popup-slide {
-  /* 从顶部滑出 */
-  /* 从右侧滑出 */
-  /* 从底部滑出 */
-  /* 从左侧滑出 */
-}
 @keyframes popup-scale-fade-in {
   from {
     opacity: 0;
@@ -251,6 +245,9 @@ page {
   animation-name: popup-fade-out;
   animation-duration: var(--nutui-popup-animation-duration, 0.3s);
 }
+.nut-popup-slide {
+  /* 从顶部滑出 */
+}
 @keyframes popup-slide-top-enter {
   from {
     transform: translate3d(0, -100%, 0);
@@ -278,6 +275,9 @@ page {
   animation-name: popup-slide-top-exit;
   animation-duration: var(--nutui-popup-animation-duration, 0.3s);
 }
+.nut-popup-slide {
+  /* 从右侧滑出 */
+}
 @keyframes popup-slide-right-enter {
   from {
     transform: translate3d(100%, 0, 0);
@@ -305,6 +305,9 @@ page {
   animation-name: popup-slide-right-exit;
   animation-duration: var(--nutui-popup-animation-duration, 0.3s);
 }
+.nut-popup-slide {
+  /* 从底部滑出 */
+}
 @keyframes popup-slide-bottom-enter {
   from {
     transform: translate3d(0, 100%, 0);
@@ -332,6 +335,9 @@ page {
   animation-name: slide-bottom-exit;
   animation-duration: var(--nutui-popup-animation-duration, 0.3s);
 }
+.nut-popup-slide {
+  /* 从左侧滑出 */
+}
 @keyframes popup-slide-left-enter {
   from {
     transform: translate3d(-100%, 0, 0);

package/dist/es/packages/popup/style-jmapp/style.css

@@ -129,12 +129,6 @@
 .nut-popup-top.nut-popup-round {
   border-radius: 0 0 var(--nutui-popup-border-radius, 12px) var(--nutui-popup-border-radius, 12px);
 }
-.nut-popup-slide {
-  /* 从顶部滑出 */
-  /* 从右侧滑出 */
-  /* 从底部滑出 */
-  /* 从左侧滑出 */
-}
 @keyframes popup-scale-fade-in {
   from {
     opacity: 0;
@@ -191,6 +185,9 @@
   animation-name: popup-fade-out;
   animation-duration: var(--nutui-popup-animation-duration, 0.3s);
 }
+.nut-popup-slide {
+  /* 从顶部滑出 */
+}
 @keyframes popup-slide-top-enter {
   from {
     transform: translate3d(0, -100%, 0);
@@ -218,6 +215,9 @@
   animation-name: popup-slide-top-exit;
   animation-duration: var(--nutui-popup-animation-duration, 0.3s);
 }
+.nut-popup-slide {
+  /* 从右侧滑出 */
+}
 @keyframes popup-slide-right-enter {
   from {
     transform: translate3d(100%, 0, 0);
@@ -245,6 +245,9 @@
   animation-name: popup-slide-right-exit;
   animation-duration: var(--nutui-popup-animation-duration, 0.3s);
 }
+.nut-popup-slide {
+  /* 从底部滑出 */
+}
 @keyframes popup-slide-bottom-enter {
   from {
     transform: translate3d(0, 100%, 0);
@@ -272,6 +275,9 @@
   animation-name: slide-bottom-exit;
   animation-duration: var(--nutui-popup-animation-duration, 0.3s);
 }
+.nut-popup-slide {
+  /* 从左侧滑出 */
+}
 @keyframes popup-slide-left-enter {
   from {
     transform: translate3d(-100%, 0, 0);

package/dist/es/packages/popup/style-jrkf/style.css

@@ -129,12 +129,6 @@
 .nut-popup-top.nut-popup-round {
   border-radius: 0 0 var(--nutui-popup-border-radius, 12px) var(--nutui-popup-border-radius, 12px);
 }
-.nut-popup-slide {
-  /* 从顶部滑出 */
-  /* 从右侧滑出 */
-  /* 从底部滑出 */
-  /* 从左侧滑出 */
-}
 @keyframes popup-scale-fade-in {
   from {
     opacity: 0;
@@ -191,6 +185,9 @@
   animation-name: popup-fade-out;
   animation-duration: var(--nutui-popup-animation-duration, 0.3s);
 }
+.nut-popup-slide {
+  /* 从顶部滑出 */
+}
 @keyframes popup-slide-top-enter {
   from {
     transform: translate3d(0, -100%, 0);
@@ -218,6 +215,9 @@
   animation-name: popup-slide-top-exit;
   animation-duration: var(--nutui-popup-animation-duration, 0.3s);
 }
+.nut-popup-slide {
+  /* 从右侧滑出 */
+}
 @keyframes popup-slide-right-enter {
   from {
     transform: translate3d(100%, 0, 0);
@@ -245,6 +245,9 @@
   animation-name: popup-slide-right-exit;
   animation-duration: var(--nutui-popup-animation-duration, 0.3s);
 }
+.nut-popup-slide {
+  /* 从底部滑出 */
+}
 @keyframes popup-slide-bottom-enter {
   from {
     transform: translate3d(0, 100%, 0);
@@ -272,6 +275,9 @@
   animation-name: slide-bottom-exit;
   animation-duration: var(--nutui-popup-animation-duration, 0.3s);
 }
+.nut-popup-slide {
+  /* 从左侧滑出 */
+}
 @keyframes popup-slide-left-enter {
   from {
     transform: translate3d(-100%, 0, 0);

package/dist/es/packages/pulltorefresh/pulltorefresh.js

@@ -30,60 +30,6 @@ var defaultProps = _object_spread_props(_object_spread({}, ComponentDefaults), {
     onRefresh: function onRefresh() {}
 });
 export var PullToRefresh = function PullToRefresh(p) {
-    var doRefresh = function doRefresh() {
-        return _async_to_generator(function() {
-            var e;
-            return _ts_generator(this, function(_state) {
-                switch(_state.label){
-                    case 0:
-                        setHeight(headHeight);
-                        setStatus('refreshing');
-                        _state.label = 1;
-                    case 1:
-                        _state.trys.push([
-                            1,
-                            3,
-                            ,
-                            4
-                        ]);
-                        return [
-                            4,
-                            props.onRefresh()
-                        ];
-                    case 2:
-                        _state.sent();
-                        setStatus('complete');
-                        return [
-                            3,
-                            4
-                        ];
-                    case 3:
-                        e = _state.sent();
-                        setHeight(0);
-                        setStatus('pulling');
-                        throw e;
-                    case 4:
-                        if (!(props.completeDelay > 0)) return [
-                            3,
-                            6
-                        ];
-                        return [
-                            4,
-                            sleep(props.completeDelay)
-                        ];
-                    case 5:
-                        _state.sent();
-                        _state.label = 6;
-                    case 6:
-                        setHeight(0);
-                        setStatus('pulling');
-                        return [
-                            2
-                        ];
-                }
-            });
-        })();
-    };
     var classPrefix = 'nut-pulltorefresh';
     var locale = useConfig().locale;
     var touch = useTouch();
@@ -139,6 +85,60 @@ export var PullToRefresh = function PullToRefresh(p) {
         }
         clearTimeout(timer.current);
     };
+    function doRefresh() {
+        return _async_to_generator(function() {
+            var e;
+            return _ts_generator(this, function(_state) {
+                switch(_state.label){
+                    case 0:
+                        setHeight(headHeight);
+                        setStatus('refreshing');
+                        _state.label = 1;
+                    case 1:
+                        _state.trys.push([
+                            1,
+                            3,
+                            ,
+                            4
+                        ]);
+                        return [
+                            4,
+                            props.onRefresh()
+                        ];
+                    case 2:
+                        _state.sent();
+                        setStatus('complete');
+                        return [
+                            3,
+                            4
+                        ];
+                    case 3:
+                        e = _state.sent();
+                        setHeight(0);
+                        setStatus('pulling');
+                        throw e;
+                    case 4:
+                        if (!(props.completeDelay > 0)) return [
+                            3,
+                            6
+                        ];
+                        return [
+                            4,
+                            sleep(props.completeDelay)
+                        ];
+                    case 5:
+                        _state.sent();
+                        _state.label = 6;
+                    case 6:
+                        setHeight(0);
+                        setStatus('pulling');
+                        return [
+                            2
+                        ];
+                }
+            });
+        })();
+    }
     var handleTouchEnd = function handleTouchEnd() {
         if (props.disabled) return;
         pullingRef.current = false;

package/dist/es/packages/quickenter/style/style.harmony.css

@@ -189,12 +189,6 @@ page {
 .nut-popup-top.nut-popup-round {
   border-radius: 0 0 var(--nutui-popup-border-radius, var(--nutui-radius-xl, calc(12px * var(--nut-scale-f, 1)))) var(--nutui-popup-border-radius, var(--nutui-radius-xl, calc(12px * var(--nut-scale-f, 1))));
 }
-.nut-popup-slide {
-  /* 从顶部滑出 */
-  /* 从右侧滑出 */
-  /* 从底部滑出 */
-  /* 从左侧滑出 */
-}
 @keyframes popup-scale-fade-in {
   from {
     opacity: 0;
@@ -251,6 +245,9 @@ page {
   animation-name: popup-fade-out;
   animation-duration: var(--nutui-popup-animation-duration, 0.3s);
 }
+.nut-popup-slide {
+  /* 从顶部滑出 */
+}
 @keyframes popup-slide-top-enter {
   from {
     transform: translate3d(0, -100%, 0);
@@ -278,6 +275,9 @@ page {
   animation-name: popup-slide-top-exit;
   animation-duration: var(--nutui-popup-animation-duration, 0.3s);
 }
+.nut-popup-slide {
+  /* 从右侧滑出 */
+}
 @keyframes popup-slide-right-enter {
   from {
     transform: translate3d(100%, 0, 0);
@@ -305,6 +305,9 @@ page {
   animation-name: popup-slide-right-exit;
   animation-duration: var(--nutui-popup-animation-duration, 0.3s);
 }
+.nut-popup-slide {
+  /* 从底部滑出 */
+}
 @keyframes popup-slide-bottom-enter {
   from {
     transform: translate3d(0, 100%, 0);
@@ -332,6 +335,9 @@ page {
   animation-name: slide-bottom-exit;
   animation-duration: var(--nutui-popup-animation-duration, 0.3s);
 }
+.nut-popup-slide {
+  /* 从左侧滑出 */
+}
 @keyframes popup-slide-left-enter {
   from {
     transform: translate3d(-100%, 0, 0);