@nutui/nutui-react 3.0.20-beta.0 → 3.1.0-beta.1

package/dist/es/packages/navbar/style/navbar.scss

@@ -12,7 +12,7 @@
   font-size: $navbar-font-size;
   color: $navbar-color;
   overflow: hidden;
-  padding: 0 16px;
+  padding: 0 scale-px(16px);
 
   &-fixed {
     position: fixed;
@@ -48,9 +48,10 @@
     font-size: $navbar-title-font-size;
     font-weight: $navbar-title-font-weight;
     color: $navbar-title-font-color;
+    white-space: nowrap;
 
     &-center {
-      max-width: 129px;
+      max-width: scale-px(129px);
       justify-content: center;
     }
   }
@@ -64,31 +65,31 @@
     display: flex;
     align-items: center;
     flex-direction: row;
-    max-width: 124px;
+    max-width: scale-px(124px);
     height: 100%;
     cursor: pointer;
     /* #ifndef harmony jd h5 weapp*/
     .nut-icon,
     .nutui-iconfont {
-      width: 20px;
-      height: 20px;
-      font-size: 20px;
+      width: scale-px(20px);
+      height: scale-px(20px);
+      font-size: $font-size-2xl;
     }
 
     /* #endif */
     &-maxwidth {
       box-sizing: border-box;
-      width: calc(124px - 16px);
+      width: calc(scale-px(124px) - scale-px(16px));
     }
   }
 
   &-left {
-    padding-right: 16px;
-    gap: 16px;
+    padding-right: scale-px(16px);
+    gap: scale-px(16px);
 
     &-rtl {
       padding-right: 0;
-      padding-left: 16px;
+      padding-left: scale-px(16px);
     }
 
     &-back {
@@ -96,7 +97,7 @@
       flex-direction: row;
       align-items: center;
       justify-content: center;
-      gap: 16px;
+      gap: scale-px(16px);
     }
 
     &-hidden {
@@ -106,12 +107,12 @@
   }
 
   &-right {
-    padding-left: 16px;
+    padding-left: scale-px(16px);
     justify-content: flex-end;
-    gap: 16px;
+    gap: scale-px(16px);
 
     &-rtl {
-      padding-right: 16px;
+      padding-right: scale-px(16px);
       padding-left: 0;
     }
   }

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

@@ -1,3 +1,13 @@
+:root,
+page {
+  --nut-scale-f: 1;
+  --nut-scale-font: var(--nut-scale-f, 1);
+  --nut-scale-icon: var(--nut-scale-f, 1);
+  --nut-icon-height: calc(16px * var(--nut-scale-icon, var(--nut-scale-f, 1))) !important;
+  --nut-icon-width: calc(16px * var(--nut-scale-icon, var(--nut-scale-f, 1))) !important;
+  --nut-icon-line-height: calc(16px * var(--nut-scale-icon, var(--nut-scale-f, 1))) !important;
+}
+
 /* #ifdef harmony */
 /* #endif */
 /* #ifndef harmony */
@@ -9,14 +19,14 @@
   flex-direction: row;
   justify-content: space-between;
   align-items: center;
-  height: var(--nutui-navbar-height, 44px);
+  height: var(--nutui-navbar-height, calc(44px * var(--nut-scale-f, 1)));
   box-sizing: border-box;
   background: var(--nutui-navbar-background, #ffffff);
   box-shadow: var(--nutui-navbar-box-shadow, none);
-  font-size: var(--nutui-navbar-font-size, var(--nutui-font-size-base, 14px));
+  font-size: var(--nutui-navbar-font-size, var(--nutui-font-size-base, calc(14px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
   color: var(--nutui-navbar-color, var(--nutui-color-title, #1a1a1a));
   overflow: hidden;
-  padding: 0 16px;
+  padding: 0 calc(16px * var(--nut-scale-f, 1));
 }
 .nut-navbar-fixed {
   position: fixed;
@@ -45,12 +55,13 @@
   flex: 1;
   flex-direction: row;
   align-items: center;
-  font-size: var(--nutui-navbar-title-font-size, var(--nutui-font-size-xl, 18px));
+  font-size: var(--nutui-navbar-title-font-size, var(--nutui-font-size-xl, calc(18px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
   font-weight: var(--nutui-navbar-title-font-weight, var(--nutui-font-weight-bold, 600));
   color: var(--nutui-navbar-title-font-color, var(--nutui-color-title, #1a1a1a));
+  white-space: nowrap;
 }
 .nut-navbar-title-center {
-  max-width: 129px;
+  max-width: calc(129px * var(--nut-scale-f, 1));
   justify-content: center;
 }
 .nut-navbar-title ::-webkit-scrollbar {
@@ -60,7 +71,7 @@
   display: flex;
   align-items: center;
   flex-direction: row;
-  max-width: 124px;
+  max-width: calc(124px * var(--nut-scale-f, 1));
   height: 100%;
   cursor: pointer;
   /* #ifndef harmony jd h5 weapp*/
@@ -69,40 +80,40 @@
 .nut-navbar-left .nut-icon,
 .nut-navbar-left .nutui-iconfont, .nut-navbar-right .nut-icon,
 .nut-navbar-right .nutui-iconfont {
-  width: 20px;
-  height: 20px;
-  font-size: 20px;
+  width: calc(20px * var(--nut-scale-f, 1));
+  height: calc(20px * var(--nut-scale-f, 1));
+  font-size: var(--nutui-font-size-2xl, calc(20px * var(--nut-scale-font, var(--nut-scale-f, 1))));
 }
 .nut-navbar-left-maxwidth, .nut-navbar-right-maxwidth {
   box-sizing: border-box;
-  width: 108px;
+  width: calc(124px * var(--nut-scale-f, 1) - 16px * var(--nut-scale-f, 1));
 }
 .nut-navbar-left {
-  padding-right: 16px;
-  gap: 16px;
+  padding-right: calc(16px * var(--nut-scale-f, 1));
+  gap: calc(16px * var(--nut-scale-f, 1));
 }
 .nut-navbar-left-rtl {
   padding-right: 0;
-  padding-left: 16px;
+  padding-left: calc(16px * var(--nut-scale-f, 1));
 }
 .nut-navbar-left-back {
   display: flex;
   flex-direction: row;
   align-items: center;
   justify-content: center;
-  gap: 16px;
+  gap: calc(16px * var(--nut-scale-f, 1));
 }
 .nut-navbar-left-hidden {
   padding-left: 0;
   padding-right: 0;
 }
 .nut-navbar-right {
-  padding-left: 16px;
+  padding-left: calc(16px * var(--nut-scale-f, 1));
   justify-content: flex-end;
-  gap: 16px;
+  gap: calc(16px * var(--nut-scale-f, 1));
 }
 .nut-navbar-right-rtl {
-  padding-right: 16px;
+  padding-right: calc(16px * var(--nut-scale-f, 1));
   padding-left: 0;
 }
 .nut-navbar-rtl .nut-icon-ArrowLeft {

package/dist/es/packages/navbar/style-jmapp/navbar.scss

@@ -12,7 +12,7 @@
   font-size: $navbar-font-size;
   color: $navbar-color;
   overflow: hidden;
-  padding: 0 16px;
+  padding: 0 scale-px(16px);
 
   &-fixed {
     position: fixed;
@@ -48,9 +48,10 @@
     font-size: $navbar-title-font-size;
     font-weight: $navbar-title-font-weight;
     color: $navbar-title-font-color;
+    white-space: nowrap;
 
     &-center {
-      max-width: 129px;
+      max-width: scale-px(129px);
       justify-content: center;
     }
   }
@@ -64,31 +65,31 @@
     display: flex;
     align-items: center;
     flex-direction: row;
-    max-width: 124px;
+    max-width: scale-px(124px);
     height: 100%;
     cursor: pointer;
     /* #ifndef harmony jd h5 weapp*/
     .nut-icon,
     .nutui-iconfont {
-      width: 20px;
-      height: 20px;
-      font-size: 20px;
+      width: scale-px(20px);
+      height: scale-px(20px);
+      font-size: $font-size-2xl;
     }
 
     /* #endif */
     &-maxwidth {
       box-sizing: border-box;
-      width: calc(124px - 16px);
+      width: calc(scale-px(124px) - scale-px(16px));
     }
   }
 
   &-left {
-    padding-right: 16px;
-    gap: 16px;
+    padding-right: scale-px(16px);
+    gap: scale-px(16px);
 
     &-rtl {
       padding-right: 0;
-      padding-left: 16px;
+      padding-left: scale-px(16px);
     }
 
     &-back {
@@ -96,7 +97,7 @@
       flex-direction: row;
       align-items: center;
       justify-content: center;
-      gap: 16px;
+      gap: scale-px(16px);
     }
 
     &-hidden {
@@ -106,12 +107,12 @@
   }
 
   &-right {
-    padding-left: 16px;
+    padding-left: scale-px(16px);
     justify-content: flex-end;
-    gap: 16px;
+    gap: scale-px(16px);
 
     &-rtl {
-      padding-right: 16px;
+      padding-right: scale-px(16px);
       padding-left: 0;
     }
   }

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

@@ -16,7 +16,7 @@
   font-size: var(--nutui-navbar-font-size, var(--nutui-font-text));
   color: var(--nutui-navbar-color, var(--nutui-color-title));
   overflow: hidden;
-  padding: 0 16px;
+  padding: 0 scale-px(16px);
 }
 .nut-navbar-fixed {
   position: fixed;
@@ -48,9 +48,10 @@
   font-size: var(--nutui-navbar-title-font-size, var(--nutui-font-h1));
   font-weight: var(--nutui-navbar-title-font-weight, var(--nutui-font-weight-bold));
   color: var(--nutui-navbar-title-font-color, var(--nutui-color-title));
+  white-space: nowrap;
 }
 .nut-navbar-title-center {
-  max-width: 129px;
+  max-width: scale-px(129px);
   justify-content: center;
 }
 .nut-navbar-title ::-webkit-scrollbar {
@@ -60,7 +61,7 @@
   display: flex;
   align-items: center;
   flex-direction: row;
-  max-width: 124px;
+  max-width: scale-px(124px);
   height: 100%;
   cursor: pointer;
   /* #ifndef harmony jd h5 weapp*/
@@ -69,40 +70,40 @@
 .nut-navbar-left .nut-icon,
 .nut-navbar-left .nutui-iconfont, .nut-navbar-right .nut-icon,
 .nut-navbar-right .nutui-iconfont {
-  width: 20px;
-  height: 20px;
-  font-size: 20px;
+  width: scale-px(20px);
+  height: scale-px(20px);
+  font-size: var(--nutui-font-size-2xl, 20px);
 }
 .nut-navbar-left-maxwidth, .nut-navbar-right-maxwidth {
   box-sizing: border-box;
-  width: 108px;
+  width: calc(scale-px(124px) - scale-px(16px));
 }
 .nut-navbar-left {
-  padding-right: 16px;
-  gap: 16px;
+  padding-right: scale-px(16px);
+  gap: scale-px(16px);
 }
 .nut-navbar-left-rtl {
   padding-right: 0;
-  padding-left: 16px;
+  padding-left: scale-px(16px);
 }
 .nut-navbar-left-back {
   display: flex;
   flex-direction: row;
   align-items: center;
   justify-content: center;
-  gap: 16px;
+  gap: scale-px(16px);
 }
 .nut-navbar-left-hidden {
   padding-left: 0;
   padding-right: 0;
 }
 .nut-navbar-right {
-  padding-left: 16px;
+  padding-left: scale-px(16px);
   justify-content: flex-end;
-  gap: 16px;
+  gap: scale-px(16px);
 }
 .nut-navbar-right-rtl {
-  padding-right: 16px;
+  padding-right: scale-px(16px);
   padding-left: 0;
 }
 .nut-navbar-rtl .nut-icon-ArrowLeft {

package/dist/es/packages/navbar/style-jrkf/navbar.scss

@@ -12,7 +12,7 @@
   font-size: $navbar-font-size;
   color: $navbar-color;
   overflow: hidden;
-  padding: 0 16px;
+  padding: 0 scale-px(16px);
 
   &-fixed {
     position: fixed;
@@ -48,9 +48,10 @@
     font-size: $navbar-title-font-size;
     font-weight: $navbar-title-font-weight;
     color: $navbar-title-font-color;
+    white-space: nowrap;
 
     &-center {
-      max-width: 129px;
+      max-width: scale-px(129px);
       justify-content: center;
     }
   }
@@ -64,31 +65,31 @@
     display: flex;
     align-items: center;
     flex-direction: row;
-    max-width: 124px;
+    max-width: scale-px(124px);
     height: 100%;
     cursor: pointer;
     /* #ifndef harmony jd h5 weapp*/
     .nut-icon,
     .nutui-iconfont {
-      width: 20px;
-      height: 20px;
-      font-size: 20px;
+      width: scale-px(20px);
+      height: scale-px(20px);
+      font-size: $font-size-2xl;
     }
 
     /* #endif */
     &-maxwidth {
       box-sizing: border-box;
-      width: calc(124px - 16px);
+      width: calc(scale-px(124px) - scale-px(16px));
     }
   }
 
   &-left {
-    padding-right: 16px;
-    gap: 16px;
+    padding-right: scale-px(16px);
+    gap: scale-px(16px);
 
     &-rtl {
       padding-right: 0;
-      padding-left: 16px;
+      padding-left: scale-px(16px);
     }
 
     &-back {
@@ -96,7 +97,7 @@
       flex-direction: row;
       align-items: center;
       justify-content: center;
-      gap: 16px;
+      gap: scale-px(16px);
     }
 
     &-hidden {
@@ -106,12 +107,12 @@
   }
 
   &-right {
-    padding-left: 16px;
+    padding-left: scale-px(16px);
     justify-content: flex-end;
-    gap: 16px;
+    gap: scale-px(16px);
 
     &-rtl {
-      padding-right: 16px;
+      padding-right: scale-px(16px);
       padding-left: 0;
     }
   }

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

@@ -16,7 +16,7 @@
   font-size: var(--nutui-navbar-font-size, var(--nutui-font-text));
   color: var(--nutui-navbar-color, var(--nutui-color-title));
   overflow: hidden;
-  padding: 0 16px;
+  padding: 0 scale-px(16px);
 }
 .nut-navbar-fixed {
   position: fixed;
@@ -48,9 +48,10 @@
   font-size: var(--nutui-navbar-title-font-size, var(--nutui-font-h1));
   font-weight: var(--nutui-navbar-title-font-weight, var(--nutui-font-weight-bold));
   color: var(--nutui-navbar-title-font-color, var(--nutui-color-title));
+  white-space: nowrap;
 }
 .nut-navbar-title-center {
-  max-width: 129px;
+  max-width: scale-px(129px);
   justify-content: center;
 }
 .nut-navbar-title ::-webkit-scrollbar {
@@ -60,7 +61,7 @@
   display: flex;
   align-items: center;
   flex-direction: row;
-  max-width: 124px;
+  max-width: scale-px(124px);
   height: 100%;
   cursor: pointer;
   /* #ifndef harmony jd h5 weapp*/
@@ -69,40 +70,40 @@
 .nut-navbar-left .nut-icon,
 .nut-navbar-left .nutui-iconfont, .nut-navbar-right .nut-icon,
 .nut-navbar-right .nutui-iconfont {
-  width: 20px;
-  height: 20px;
-  font-size: 20px;
+  width: scale-px(20px);
+  height: scale-px(20px);
+  font-size: var(--nutui-font-size-2xl, 20px);
 }
 .nut-navbar-left-maxwidth, .nut-navbar-right-maxwidth {
   box-sizing: border-box;
-  width: 108px;
+  width: calc(scale-px(124px) - scale-px(16px));
 }
 .nut-navbar-left {
-  padding-right: 16px;
-  gap: 16px;
+  padding-right: scale-px(16px);
+  gap: scale-px(16px);
 }
 .nut-navbar-left-rtl {
   padding-right: 0;
-  padding-left: 16px;
+  padding-left: scale-px(16px);
 }
 .nut-navbar-left-back {
   display: flex;
   flex-direction: row;
   align-items: center;
   justify-content: center;
-  gap: 16px;
+  gap: scale-px(16px);
 }
 .nut-navbar-left-hidden {
   padding-left: 0;
   padding-right: 0;
 }
 .nut-navbar-right {
-  padding-left: 16px;
+  padding-left: scale-px(16px);
   justify-content: flex-end;
-  gap: 16px;
+  gap: scale-px(16px);
 }
 .nut-navbar-right-rtl {
-  padding-right: 16px;
+  padding-right: scale-px(16px);
   padding-left: 0;
 }
 .nut-navbar-rtl .nut-icon-ArrowLeft {

package/dist/es/packages/noticebar/noticebar.js

@@ -18,10 +18,7 @@ var defaultProps = _object_spread_props(_object_spread({}, ComponentDefaults), {
     content: '',
     closeable: false,
     wrap: false,
-    leftIcon: /*#__PURE__*/ React.createElement(Notice, {
-        width: 16,
-        height: 16
-    }),
+    leftIcon: /*#__PURE__*/ React.createElement(Notice, null),
     rightIcon: null,
     right: null,
     delay: 1,
@@ -402,8 +399,7 @@ export var NoticeBar = function(props) {
         className: "nut-noticebar-box-right-icon",
         onClick: onClickIcon
     }, rightIcon || /*#__PURE__*/ React.createElement(Close, {
-        width: 12,
-        height: 12
+        className: "nut-noticebar-box-right-icon-default"
     })) : null) : null, showNoticeBar && hasVerticalContent && isVertical ? /*#__PURE__*/ React.createElement("div", {
         className: "nut-noticebar-vertical",
         style: barStyle,
@@ -443,8 +439,7 @@ export var NoticeBar = function(props) {
             handleClickIcon(e);
         }
     }, rightIcon || (closeable ? /*#__PURE__*/ React.createElement(Close, {
-        width: 12,
-        height: 12
+        className: "nut-noticebar-box-right-icon-default"
     }) : null))) : null);
 };
 NoticeBar.displayName = 'NutNoticeBar';

package/dist/es/packages/noticebar/style/noticebar.scss

@@ -68,12 +68,17 @@
       margin-left: $noticebar-icon-gap;
 
       .nut-icon {
-        width: 12px;
-        height: 12px;
+        width: scale-px(12px);
+        height: scale-px(12px);
         color: $noticebar-color;
       }
     }
 
+    &-right-icon-default {
+      width: $icon-size-12;
+      height: $icon-size-12;
+    }
+
     &-wrap {
       display: flex;
       flex: 1;