@arco-design/mobile-react 2.28.1 → 2.29.0

package/tokens/app/arcodesign/default/index.js

@@ -803,7 +803,23 @@ var tokens = {
   "divider-left-width": "0.56rem",
   "divider-right-width": "0.56rem",
   "divider-content-padding": "0.24rem",
-  "divider-padding": "0.32rem"
+  "divider-padding": "0.32rem",
+  "skeleton-border-radius": "0",
+  "skeleton-background-color": "#F2F3F5",
+  "skeleton-gradient-animation-color": "rgba(255, 255, 255, 0.6)",
+  "skeleton-breath-opacity": "0.4",
+  "skeleton-gradient-animation-timing-function": "cubic-bezier(0.42, 0, 0.58, 1)",
+  "skeleton-gradient-animation-duration": "1.5s",
+  "skeleton-breath-animation-duration": "1.5s",
+  "skeleton-title-height": "0.32rem",
+  "skeleton-paragraph-height": "0.32rem",
+  "skeleton-paragraph-margin-top": "0.24rem",
+  "skeleton-avatar-size": "0.64rem",
+  "skeleton-grid-icon-size": "0.64rem",
+  "skeleton-grid-text-width": "1.28rem",
+  "skeleton-grid-text-height": "0.32rem",
+  "skeleton-medium-gutter": "0.16rem",
+  "skeleton-large-gutter": "0.4rem"
 };
 var _default = tokens;
 exports["default"] = _default;

package/tokens/app/arcodesign/default/index.json

@@ -6629,6 +6629,196 @@
             "en": "Size of the rounded corners of the square SearchBar"
         }
     },
+    "skeletonAvatarSize": {
+        "cssKey": "skeleton-avatar-size",
+        "desc": "骨架屏头像大小",
+        "override": "",
+        "value": "~`pxtorem(32)`",
+        "jsValue": "@getRem@32",
+        "staticValue": "0.64rem",
+        "localeDesc": {
+            "ch": "骨架屏头像大小",
+            "en": "Skeleton avatar size"
+        }
+    },
+    "skeletonBackgroundColor": {
+        "cssKey": "skeleton-background-color",
+        "desc": "骨架屏元素背景色",
+        "override": "",
+        "value": "#F2F3F5",
+        "jsValue": "#F2F3F5",
+        "staticValue": "#F2F3F5",
+        "localeDesc": {
+            "ch": "骨架屏元素背景色",
+            "en": "Skeleton element background color"
+        }
+    },
+    "skeletonBorderRadius": {
+        "cssKey": "skeleton-border-radius",
+        "desc": "骨架屏元素圆角",
+        "override": "",
+        "value": "~`pxtorem(0)`",
+        "jsValue": "@getRem@0",
+        "staticValue": "0",
+        "localeDesc": {
+            "ch": "骨架屏元素圆角",
+            "en": "Skeleton element border radius"
+        }
+    },
+    "skeletonBreathAnimationDuration": {
+        "cssKey": "skeleton-breath-animation-duration",
+        "desc": "骨架屏呼吸动效时间",
+        "override": "",
+        "value": "1.5s",
+        "jsValue": "1.5s",
+        "staticValue": "1.5s",
+        "localeDesc": {
+            "ch": "骨架屏呼吸动效时间",
+            "en": "Skeleton element breath animation duration"
+        }
+    },
+    "skeletonBreathOpacity": {
+        "cssKey": "skeleton-breath-opacity",
+        "desc": "骨架屏呼吸动效透明度",
+        "override": "",
+        "value": "0.4",
+        "jsValue": "0.4",
+        "staticValue": "0.4",
+        "localeDesc": {
+            "ch": "骨架屏呼吸动效透明度",
+            "en": "Skeleton element breath animation opacity"
+        }
+    },
+    "skeletonGradientAnimationColor": {
+        "cssKey": "skeleton-gradient-animation-color",
+        "desc": "骨架屏扫光动效高亮色",
+        "override": "",
+        "value": "rgba(255, 255, 255, 0.6)",
+        "jsValue": "rgba(255, 255, 255, 0.6)",
+        "staticValue": "rgba(255, 255, 255, 0.6)",
+        "localeDesc": {
+            "ch": "骨架屏扫光动效高亮色",
+            "en": "Skeleton element gradient animation highlight color"
+        }
+    },
+    "skeletonGradientAnimationDuration": {
+        "cssKey": "skeleton-gradient-animation-duration",
+        "desc": "骨架屏扫光动效时间",
+        "override": "",
+        "value": "1.5s",
+        "jsValue": "1.5s",
+        "staticValue": "1.5s",
+        "localeDesc": {
+            "ch": "骨架屏扫光动效时间",
+            "en": "Skeleton element gradient animation duration"
+        }
+    },
+    "skeletonGradientAnimationTimingFunction": {
+        "cssKey": "skeleton-gradient-animation-timing-function",
+        "desc": "骨架屏扫光动效曲线",
+        "override": "",
+        "value": "cubic-bezier(0.42, 0, 0.58, 1)",
+        "jsValue": "cubic-bezier(0.42, 0, 0.58, 1)",
+        "staticValue": "cubic-bezier(0.42, 0, 0.58, 1)",
+        "localeDesc": {
+            "ch": "骨架屏扫光动效曲线",
+            "en": "Skeleton element gradient animation timing function"
+        }
+    },
+    "skeletonGridIconSize": {
+        "cssKey": "skeleton-grid-icon-size",
+        "desc": "骨架屏金刚位图标区宽度",
+        "override": "",
+        "value": "~`pxtorem(32)`",
+        "jsValue": "@getRem@32",
+        "staticValue": "0.64rem",
+        "localeDesc": {
+            "ch": "骨架屏金刚位图标区宽度",
+            "en": "Skeleton grid item icon width"
+        }
+    },
+    "skeletonGridTextHeight": {
+        "cssKey": "skeleton-grid-text-height",
+        "desc": "骨架屏金刚位文字区高度",
+        "override": "",
+        "value": "~`pxtorem(16)`",
+        "jsValue": "@getRem@16",
+        "staticValue": "0.32rem",
+        "localeDesc": {
+            "ch": "骨架屏金刚位文字区高度",
+            "en": "Skeleton grid item text height"
+        }
+    },
+    "skeletonGridTextWidth": {
+        "cssKey": "skeleton-grid-text-width",
+        "desc": "骨架屏金刚位文字区宽度",
+        "override": "",
+        "value": "~`pxtorem(64)`",
+        "jsValue": "@getRem@64",
+        "staticValue": "1.28rem",
+        "localeDesc": {
+            "ch": "骨架屏金刚位文字区宽度",
+            "en": "Skeleton grid item text width"
+        }
+    },
+    "skeletonLargeGutter": {
+        "cssKey": "skeleton-large-gutter",
+        "desc": "骨架屏元素外边距，大尺寸",
+        "override": "",
+        "value": "~`pxtorem(20)`",
+        "jsValue": "@getRem@20",
+        "staticValue": "0.4rem",
+        "localeDesc": {
+            "ch": "骨架屏元素外边距，大尺寸"
+        }
+    },
+    "skeletonMediumGutter": {
+        "cssKey": "skeleton-medium-gutter",
+        "desc": "骨架屏元素外边距，中尺寸",
+        "override": "",
+        "value": "~`pxtorem(8)`",
+        "jsValue": "@getRem@8",
+        "staticValue": "0.16rem",
+        "localeDesc": {
+            "ch": "骨架屏元素外边距，中尺寸"
+        }
+    },
+    "skeletonParagraphHeight": {
+        "cssKey": "skeleton-paragraph-height",
+        "desc": "骨架屏段落行高度",
+        "override": "",
+        "value": "~`pxtorem(16)`",
+        "jsValue": "@getRem@16",
+        "staticValue": "0.32rem",
+        "localeDesc": {
+            "ch": "骨架屏段落行高度",
+            "en": "Skeleton paragraph line height"
+        }
+    },
+    "skeletonParagraphMarginTop": {
+        "cssKey": "skeleton-paragraph-margin-top",
+        "desc": "骨架屏各段落行间距",
+        "override": "",
+        "value": "~`pxtorem(12)`",
+        "jsValue": "@getRem@12",
+        "staticValue": "0.24rem",
+        "localeDesc": {
+            "ch": "骨架屏各段落行间距",
+            "en": "Margin top between skeleton paragraph lines"
+        }
+    },
+    "skeletonTitleHeight": {
+        "cssKey": "skeleton-title-height",
+        "desc": "骨架屏标题高度",
+        "override": "",
+        "value": "~`pxtorem(16)`",
+        "jsValue": "@getRem@16",
+        "staticValue": "0.32rem",
+        "localeDesc": {
+            "ch": "骨架屏标题高度",
+            "en": "Skeleton title height"
+        }
+    },
     "sliderHasMarkPaddingBottom": {
         "cssKey": "slider-has-mark-padding-bottom",
         "desc": "slider 有标记时的底部内边距",

package/tokens/app/arcodesign/default/index.less

@@ -792,4 +792,20 @@
 @divider-right-width: ~`pxtorem(28)`;
 @divider-content-padding: ~`pxtorem(12)`;
 @divider-padding: ~`pxtorem(16)`;
+@skeleton-border-radius: ~`pxtorem(0)`;
+@skeleton-background-color: #F2F3F5;
+@skeleton-gradient-animation-color: rgba(255, 255, 255, 0.6);
+@skeleton-breath-opacity: 0.4;
+@skeleton-gradient-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
+@skeleton-gradient-animation-duration: 1.5s;
+@skeleton-breath-animation-duration: 1.5s;
+@skeleton-title-height: ~`pxtorem(16)`;
+@skeleton-paragraph-height: ~`pxtorem(16)`;
+@skeleton-paragraph-margin-top: ~`pxtorem(12)`;
+@skeleton-avatar-size: ~`pxtorem(32)`;
+@skeleton-grid-icon-size: ~`pxtorem(32)`;
+@skeleton-grid-text-width: ~`pxtorem(64)`;
+@skeleton-grid-text-height: ~`pxtorem(16)`;
+@skeleton-medium-gutter: ~`pxtorem(8)`;
+@skeleton-large-gutter: ~`pxtorem(20)`;
 

package/umd/_helpers/hooks.d.ts

@@ -13,6 +13,12 @@ export declare function useListenResize(resizeHandler: () => void, deps?: any[],
  * @desc {en} Tips: Use in scenarios where asynchronous processing is not completed after unmount. It is not recommended to replace useState without brains
  * @param initialState 初始状态
  * @param initialState {en} Initial State
+ * @example
+ * ```
+ * import { useMountedState } from '@arco-design/mobile-react/esm/_helpers/hooks';
+ *
+ * const [scrollValue, setScrollValue] = useMountedState(value);
+ * ```
  */
 export declare function useMountedState<S>(initialState: S | (() => S)): [S, React.Dispatch<React.SetStateAction<S>>];
 export declare function useSameRefState<T>(initialValue: T): [T, React.MutableRefObject<T>, (data: T) => void];
@@ -37,7 +43,7 @@ export declare function useAddListener(dom: HTMLDivElement | null, event: string
     capture: boolean;
 }): void;
 export declare function usePreventBodyScroll(visible: boolean, preventBodyScroll: boolean, initialBodyOverflow?: string): void;
-export declare const useProgress: (mountedTransition: boolean, percentage: number, duration: number, mountedBezier: BezierType, step: number) => [number, boolean];
+export declare function useProgress(mountedTransition: boolean, percentage: number, duration: number, mountedBezier: BezierType, step: number): [number, boolean];
 export declare function useSingleAndDoubleClick(onClick: (e: React.MouseEvent) => void, onDoubleClick: (e: React.MouseEvent) => void, delay?: number): (e: React.MouseEvent) => void;
 export declare function useGenSvgKey(userSetSvgKey: string): {
     svgKey: string;

package/umd/_helpers/hooks.js

@@ -22,7 +22,7 @@
   _exports.useMountedState = useMountedState;
   _exports.usePopupScroll = usePopupScroll;
   _exports.usePreventBodyScroll = usePreventBodyScroll;
-  _exports.useProgress = void 0;
+  _exports.useProgress = useProgress;
   _exports.useRefMountedState = useRefMountedState;
   _exports.useRefState = useRefState;
   _exports.useSameRefState = useSameRefState;
@@ -66,6 +66,12 @@
    * @desc {en} Tips: Use in scenarios where asynchronous processing is not completed after unmount. It is not recommended to replace useState without brains
    * @param initialState 初始状态
    * @param initialState {en} Initial State
+   * @example
+   * ```
+   * import { useMountedState } from '@arco-design/mobile-react/esm/_helpers/hooks';
+   *
+   * const [scrollValue, setScrollValue] = useMountedState(value);
+   * ```
    */
 
 
@@ -494,7 +500,7 @@
     }, [visible]);
   }
 
-  var useProgress = function useProgress(mountedTransition, percentage, duration, mountedBezier, step) {
+  function useProgress(mountedTransition, percentage, duration, mountedBezier, step) {
     var _useState8 = (0, _react.useState)(0),
         currentPercentage = _useState8[0],
         setCurrentPercentage = _useState8[1];
@@ -528,9 +534,7 @@
       percentage === 100 ? setCurrentPercentage(100) : setCurrentPercentage(count * step);
     }, [count, percentage, step]);
     return [currentPercentage, transitionControl];
-  };
-
-  _exports.useProgress = useProgress;
+  }
 
   function useSingleAndDoubleClick(onClick, onDoubleClick, delay) {
     if (delay === void 0) {

package/umd/form/form-item.js

@@ -40,15 +40,96 @@
       _this._errors = [];
       _this._touched = false;
 
+      _this.onValueChange = function (preStore, curStore) {
+        _this._touched = true;
+        var shouldUpdate = _this.props.shouldUpdate;
+
+        if (typeof shouldUpdate === 'function') {
+          shouldUpdate({
+            preStore: preStore,
+            curStore: curStore
+          }) && _this.forceUpdate();
+          return;
+        }
+
+        _this.forceUpdate();
+      };
+
+      _this.getFieldError = function () {
+        return _this._errors;
+      };
+
+      _this.isFieldTouched = function () {
+        return _this._touched;
+      };
+
+      _this.validateField = function () {
+        var validateMessages = _this.context.validateMessages;
+        var getFieldValue = _this.context.form.getFieldValue;
+        var _this$props = _this.props,
+            field = _this$props.field,
+            rules = _this$props.rules,
+            onValidateStatusChange = _this$props.onValidateStatusChange;
+        var value = getFieldValue(field);
+
+        if (rules != null && rules.length && field) {
+          var _Validator;
+
+          var fieldDom = _this.props.getFormItemRef();
+
+          var fieldValidator = new _mobileUtils.Validator((_Validator = {}, _Validator[field] = rules, _Validator), {
+            validateMessages: validateMessages
+          });
+          return new Promise(function (resolve) {
+            var _fieldValidator$valid;
+
+            fieldValidator.validate((_fieldValidator$valid = {}, _fieldValidator$valid[field] = value, _fieldValidator$valid), function (errorsMap) {
+              var _getErrorAndWarnings = (0, _utils.getErrorAndWarnings)((errorsMap == null ? void 0 : errorsMap[field]) || []),
+                  errors = _getErrorAndWarnings.errors,
+                  warnings = _getErrorAndWarnings.warnings;
+
+              _this._errors = errors;
+              onValidateStatusChange({
+                errors: _this._errors,
+                warnings: warnings
+              });
+              return resolve({
+                errors: _this._errors,
+                warnings: warnings,
+                value: value,
+                field: field,
+                dom: fieldDom
+              });
+            });
+          });
+        }
+
+        return Promise.resolve({
+          errors: [],
+          warnings: [],
+          value: value,
+          field: field,
+          dom: null
+        });
+      };
+
+      _this.setFieldData = function (value) {
+        var field = _this.props.field;
+        var setFieldValue = _this.context.form.setFieldValue;
+        setFieldValue(field, value);
+
+        _this.validateField();
+      };
+
       _this.innerTriggerFunction = function (_, value) {
         var _children$props;
 
         _this.setFieldData(value);
 
-        var _this$props = _this.props,
-            children = _this$props.children,
-            _this$props$trigger = _this$props.trigger,
-            trigger = _this$props$trigger === void 0 ? 'onChange' : _this$props$trigger;
+        var _this$props2 = _this.props,
+            children = _this$props2.children,
+            _this$props2$trigger = _this$props2.trigger,
+            trigger = _this$props2$trigger === void 0 ? 'onChange' : _this$props2$trigger;
 
         if (trigger && (_children$props = children.props) != null && _children$props[trigger]) {
           var _children$props2;
@@ -66,10 +147,10 @@
 
         _this.setFieldData(value);
 
-        var _this$props2 = _this.props,
-            children = _this$props2.children,
-            _this$props2$trigger = _this$props2.trigger,
-            trigger = _this$props2$trigger === void 0 ? 'onChange' : _this$props2$trigger;
+        var _this$props3 = _this.props,
+            children = _this$props3.children,
+            _this$props3$trigger = _this$props3.trigger,
+            trigger = _this$props3$trigger === void 0 ? 'onChange' : _this$props3$trigger;
 
         if (trigger && (_children$props3 = children.props) != null && _children$props3[trigger]) {
           var _children$props4;
@@ -82,6 +163,24 @@
         }
       };
 
+      _this.innerClearFunction = function () {
+        var _children$props5;
+
+        var children = _this.props.children;
+
+        _this.setFieldData('');
+
+        if ((_children$props5 = children.props) != null && _children$props5.onClear) {
+          var _children$props6;
+
+          for (var _len3 = arguments.length, args = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
+            args[_key3] = arguments[_key3];
+          }
+
+          (_children$props6 = children.props) == null ? void 0 : _children$props6.onClear.apply(_children$props6, args);
+        }
+      };
+
       _this.destroyField = function () {};
 
       if (props != null && props.initialValue && props.field) {
@@ -109,108 +208,10 @@
       this.destroyField();
     };
 
-    _proto.onValueChange = function onValueChange(preStore, curStore) {
-      this._touched = true;
-      var shouldUpdate = this.props.shouldUpdate;
-
-      if (typeof shouldUpdate === 'function') {
-        shouldUpdate({
-          preStore: preStore,
-          curStore: curStore
-        }) && this.forceUpdate();
-        return;
-      }
-
-      this.forceUpdate();
-    };
-
-    _proto.getFieldError = function getFieldError() {
-      return this._errors;
-    };
-
-    _proto.isFieldTouched = function isFieldTouched() {
-      return this._touched;
-    };
-
-    _proto.validateField = function validateField() {
-      var _this2 = this;
-
-      var validateMessages = this.context.validateMessages;
-      var getFieldValue = this.context.form.getFieldValue;
-      var _this$props3 = this.props,
-          field = _this$props3.field,
-          rules = _this$props3.rules,
-          onValidateStatusChange = _this$props3.onValidateStatusChange;
-      var value = getFieldValue(field);
-
-      if (rules != null && rules.length && field) {
-        var _Validator;
-
-        var fieldDom = this.props.getFormItemRef();
-        var fieldValidator = new _mobileUtils.Validator((_Validator = {}, _Validator[field] = rules, _Validator), {
-          validateMessages: validateMessages
-        });
-        return new Promise(function (resolve) {
-          var _fieldValidator$valid;
-
-          fieldValidator.validate((_fieldValidator$valid = {}, _fieldValidator$valid[field] = value, _fieldValidator$valid), function (errorsMap) {
-            var _getErrorAndWarnings = (0, _utils.getErrorAndWarnings)((errorsMap == null ? void 0 : errorsMap[field]) || []),
-                errors = _getErrorAndWarnings.errors,
-                warnings = _getErrorAndWarnings.warnings;
-
-            _this2._errors = errors;
-            onValidateStatusChange({
-              errors: _this2._errors,
-              warnings: warnings
-            });
-            return resolve({
-              errors: _this2._errors,
-              warnings: warnings,
-              value: value,
-              field: field,
-              dom: fieldDom
-            });
-          });
-        });
-      }
-
-      return Promise.resolve({
-        errors: [],
-        warnings: [],
-        value: value,
-        field: field,
-        dom: null
-      });
-    };
-
-    _proto.setFieldData = function setFieldData(value) {
-      var field = this.props.field;
-      var setFieldValue = this.context.form.setFieldValue;
-      setFieldValue(field, value);
-      this.validateField();
-    };
-
-    _proto.innerClearFunction = function innerClearFunction() {
-      var _children$props5;
-
-      var children = this.props.children;
-      this.setFieldData('');
-
-      if ((_children$props5 = children.props) != null && _children$props5.onClear) {
-        var _children$props6;
-
-        for (var _len3 = arguments.length, args = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
-          args[_key3] = arguments[_key3];
-        }
-
-        (_children$props6 = children.props) == null ? void 0 : _children$props6.onClear.apply(_children$props6, args);
-      }
-    };
-
     _proto.renderChildren = function renderChildren() {
       var _props,
           _children$type,
-          _this3 = this;
+          _this2 = this;
 
       var _this$props4 = this.props,
           children = _this$props4.children,
@@ -285,7 +286,7 @@
           props.error = this._errors;
 
           props[trigger] = function (newValue) {
-            _this3.setFieldData(newValue);
+            _this2.setFieldData(newValue);
 
             for (var _len4 = arguments.length, args = new Array(_len4 > 1 ? _len4 - 1 : 0), _key4 = 1; _key4 < _len4; _key4++) {
               args[_key4 - 1] = arguments[_key4];

package/umd/grid/style/css/index.css

@@ -113,3 +113,7 @@
   display: none;
   /* Chrome Safari */
 }
+.arco-grid .arco-image-picker {
+  width: 100%;
+  /* 兼容grid和image-picker组合使用 */
+}

package/umd/grid/style/index.less

@@ -101,3 +101,9 @@
 .@{prefix}-grid.sliding::-webkit-scrollbar {
     display: none; /* Chrome Safari */
 }
+
+.@{prefix}-grid {
+    .@{prefix}-image-picker {
+        width: 100%; /* 兼容grid和image-picker组合使用 */
+    }
+}

package/umd/index.d.ts

@@ -43,6 +43,7 @@ export { default as PullRefresh } from './pull-refresh';
 export { default as Radio } from './radio';
 export { default as Rate } from './rate';
 export { default as SearchBar } from './search-bar';
+export { default as Skeleton } from './skeleton';
 export { default as ShowMonitor } from './show-monitor';
 export { default as Slider } from './slider';
 export { default as Stepper } from './stepper';

package/umd/index.js

@@ -1,22 +1,22 @@
 (function (global, factory) {
   if (typeof define === "function" && define.amd) {
-    define(["exports", "./tabs", "./sticky", "./load-more", "./cell", "./action-sheet", "./avatar", "./badge", "./button", "./carousel", "./checkbox", "./circle-progress", "./collapse", "./context-provider", "./count-down", "./date-picker", "./dialog", "./divider", "./dropdown", "./dropdown-menu", "./ellipsis", "./form", "./grid", "./image", "./image-picker", "./image-preview", "./index-bar", "./input", "./keyboard", "./loading", "./masking", "./nav-bar", "./notice-bar", "./notify", "./pagination", "./picker", "./picker-view", "./popover", "./popup", "./popup-swiper", "./portal", "./progress", "./pull-refresh", "./radio", "./rate", "./search-bar", "./show-monitor", "./slider", "./stepper", "./steps", "./swipe-action", "./swipe-load", "./switch", "./tab-bar", "./tag", "./textarea", "./toast", "./transition"], factory);
+    define(["exports", "./tabs", "./sticky", "./load-more", "./cell", "./action-sheet", "./avatar", "./badge", "./button", "./carousel", "./checkbox", "./circle-progress", "./collapse", "./context-provider", "./count-down", "./date-picker", "./dialog", "./divider", "./dropdown", "./dropdown-menu", "./ellipsis", "./form", "./grid", "./image", "./image-picker", "./image-preview", "./index-bar", "./input", "./keyboard", "./loading", "./masking", "./nav-bar", "./notice-bar", "./notify", "./pagination", "./picker", "./picker-view", "./popover", "./popup", "./popup-swiper", "./portal", "./progress", "./pull-refresh", "./radio", "./rate", "./search-bar", "./skeleton", "./show-monitor", "./slider", "./stepper", "./steps", "./swipe-action", "./swipe-load", "./switch", "./tab-bar", "./tag", "./textarea", "./toast", "./transition"], factory);
   } else if (typeof exports !== "undefined") {
-    factory(exports, require("./tabs"), require("./sticky"), require("./load-more"), require("./cell"), require("./action-sheet"), require("./avatar"), require("./badge"), require("./button"), require("./carousel"), require("./checkbox"), require("./circle-progress"), require("./collapse"), require("./context-provider"), require("./count-down"), require("./date-picker"), require("./dialog"), require("./divider"), require("./dropdown"), require("./dropdown-menu"), require("./ellipsis"), require("./form"), require("./grid"), require("./image"), require("./image-picker"), require("./image-preview"), require("./index-bar"), require("./input"), require("./keyboard"), require("./loading"), require("./masking"), require("./nav-bar"), require("./notice-bar"), require("./notify"), require("./pagination"), require("./picker"), require("./picker-view"), require("./popover"), require("./popup"), require("./popup-swiper"), require("./portal"), require("./progress"), require("./pull-refresh"), require("./radio"), require("./rate"), require("./search-bar"), require("./show-monitor"), require("./slider"), require("./stepper"), require("./steps"), require("./swipe-action"), require("./swipe-load"), require("./switch"), require("./tab-bar"), require("./tag"), require("./textarea"), require("./toast"), require("./transition"));
+    factory(exports, require("./tabs"), require("./sticky"), require("./load-more"), require("./cell"), require("./action-sheet"), require("./avatar"), require("./badge"), require("./button"), require("./carousel"), require("./checkbox"), require("./circle-progress"), require("./collapse"), require("./context-provider"), require("./count-down"), require("./date-picker"), require("./dialog"), require("./divider"), require("./dropdown"), require("./dropdown-menu"), require("./ellipsis"), require("./form"), require("./grid"), require("./image"), require("./image-picker"), require("./image-preview"), require("./index-bar"), require("./input"), require("./keyboard"), require("./loading"), require("./masking"), require("./nav-bar"), require("./notice-bar"), require("./notify"), require("./pagination"), require("./picker"), require("./picker-view"), require("./popover"), require("./popup"), require("./popup-swiper"), require("./portal"), require("./progress"), require("./pull-refresh"), require("./radio"), require("./rate"), require("./search-bar"), require("./skeleton"), require("./show-monitor"), require("./slider"), require("./stepper"), require("./steps"), require("./swipe-action"), require("./swipe-load"), require("./switch"), require("./tab-bar"), require("./tag"), require("./textarea"), require("./toast"), require("./transition"));
   } else {
     var mod = {
       exports: {}
     };
-    factory(mod.exports, global.tabs, global.sticky, global.loadMore, global.cell, global.actionSheet, global.avatar, global.badge, global.button, global.carousel, global.checkbox, global.circleProgress, global.collapse, global.contextProvider, global.countDown, global.datePicker, global.dialog, global.divider, global.dropdown, global.dropdownMenu, global.ellipsis, global.form, global.grid, global.image, global.imagePicker, global.imagePreview, global.indexBar, global.input, global.keyboard, global.loading, global.masking, global.navBar, global.noticeBar, global.notify, global.pagination, global.picker, global.pickerView, global.popover, global.popup, global.popupSwiper, global.portal, global.progress, global.pullRefresh, global.radio, global.rate, global.searchBar, global.showMonitor, global.slider, global.stepper, global.steps, global.swipeAction, global.swipeLoad, global._switch, global.tabBar, global.tag, global.textarea, global.toast, global.transition);
+    factory(mod.exports, global.tabs, global.sticky, global.loadMore, global.cell, global.actionSheet, global.avatar, global.badge, global.button, global.carousel, global.checkbox, global.circleProgress, global.collapse, global.contextProvider, global.countDown, global.datePicker, global.dialog, global.divider, global.dropdown, global.dropdownMenu, global.ellipsis, global.form, global.grid, global.image, global.imagePicker, global.imagePreview, global.indexBar, global.input, global.keyboard, global.loading, global.masking, global.navBar, global.noticeBar, global.notify, global.pagination, global.picker, global.pickerView, global.popover, global.popup, global.popupSwiper, global.portal, global.progress, global.pullRefresh, global.radio, global.rate, global.searchBar, global.skeleton, global.showMonitor, global.slider, global.stepper, global.steps, global.swipeAction, global.swipeLoad, global._switch, global.tabBar, global.tag, global.textarea, global.toast, global.transition);
     global.index = mod.exports;
   }
-})(typeof globalThis !== "undefined" ? globalThis : typeof self !== "undefined" ? self : this, function (_exports, _tabs, _sticky, _loadMore, _cell, _actionSheet, _avatar, _badge, _button, _carousel, _checkbox, _circleProgress, _collapse, _contextProvider, _countDown, _datePicker, _dialog, _divider, _dropdown, _dropdownMenu, _ellipsis, _form, _grid, _image, _imagePicker, _imagePreview, _indexBar, _input, _keyboard, _loading, _masking, _navBar, _noticeBar, _notify, _pagination, _picker, _pickerView, _popover, _popup, _popupSwiper, _portal, _progress, _pullRefresh, _radio, _rate, _searchBar, _showMonitor, _slider, _stepper, _steps, _swipeAction, _swipeLoad, _switch, _tabBar, _tag, _textarea, _toast, _transition) {
+})(typeof globalThis !== "undefined" ? globalThis : typeof self !== "undefined" ? self : this, function (_exports, _tabs, _sticky, _loadMore, _cell, _actionSheet, _avatar, _badge, _button, _carousel, _checkbox, _circleProgress, _collapse, _contextProvider, _countDown, _datePicker, _dialog, _divider, _dropdown, _dropdownMenu, _ellipsis, _form, _grid, _image, _imagePicker, _imagePreview, _indexBar, _input, _keyboard, _loading, _masking, _navBar, _noticeBar, _notify, _pagination, _picker, _pickerView, _popover, _popup, _popupSwiper, _portal, _progress, _pullRefresh, _radio, _rate, _searchBar, _skeleton, _showMonitor, _slider, _stepper, _steps, _swipeAction, _swipeLoad, _switch, _tabBar, _tag, _textarea, _toast, _transition) {
   "use strict";
 
   var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
   _exports.__esModule = true;
-  _exports.Transition = _exports.Toast = _exports.Textarea = _exports.Tag = _exports.Tabs = _exports.TabBar = _exports.Switch = _exports.SwipeLoad = _exports.SwipeAction = _exports.Sticky = _exports.Steps = _exports.Stepper = _exports.Slider = _exports.ShowMonitor = _exports.SearchBar = _exports.Rate = _exports.Radio = _exports.PullRefresh = _exports.Progress = _exports.Portal = _exports.PopupSwiper = _exports.Popup = _exports.Popover = _exports.PickerView = _exports.Picker = _exports.Pagination = _exports.Notify = _exports.NoticeBar = _exports.NavBar = _exports.Masking = _exports.Loading = _exports.LoadMore = _exports.Keyboard = _exports.Input = _exports.IndexBar = _exports.ImagePreview = _exports.ImagePicker = _exports.Image = _exports.Grid = _exports.Form = _exports.Ellipsis = _exports.DropdownMenu = _exports.Dropdown = _exports.Divider = _exports.Dialog = _exports.DatePicker = _exports.CountDown = _exports.ContextProvider = _exports.Collapse = _exports.CircleProgress = _exports.Checkbox = _exports.Cell = _exports.Carousel = _exports.Button = _exports.Badge = _exports.Avatar = _exports.ActionSheet = void 0;
+  _exports.Transition = _exports.Toast = _exports.Textarea = _exports.Tag = _exports.Tabs = _exports.TabBar = _exports.Switch = _exports.SwipeLoad = _exports.SwipeAction = _exports.Sticky = _exports.Steps = _exports.Stepper = _exports.Slider = _exports.Skeleton = _exports.ShowMonitor = _exports.SearchBar = _exports.Rate = _exports.Radio = _exports.PullRefresh = _exports.Progress = _exports.Portal = _exports.PopupSwiper = _exports.Popup = _exports.Popover = _exports.PickerView = _exports.Picker = _exports.Pagination = _exports.Notify = _exports.NoticeBar = _exports.NavBar = _exports.Masking = _exports.Loading = _exports.LoadMore = _exports.Keyboard = _exports.Input = _exports.IndexBar = _exports.ImagePreview = _exports.ImagePicker = _exports.Image = _exports.Grid = _exports.Form = _exports.Ellipsis = _exports.DropdownMenu = _exports.Dropdown = _exports.Divider = _exports.Dialog = _exports.DatePicker = _exports.CountDown = _exports.ContextProvider = _exports.Collapse = _exports.CircleProgress = _exports.Checkbox = _exports.Cell = _exports.Carousel = _exports.Button = _exports.Badge = _exports.Avatar = _exports.ActionSheet = void 0;
   _tabs = _interopRequireDefault(_tabs);
   _exports.Tabs = _tabs.default;
   _sticky = _interopRequireDefault(_sticky);
@@ -107,6 +107,8 @@
   _exports.Rate = _rate.default;
   _searchBar = _interopRequireDefault(_searchBar);
   _exports.SearchBar = _searchBar.default;
+  _skeleton = _interopRequireDefault(_skeleton);
+  _exports.Skeleton = _skeleton.default;
   _showMonitor = _interopRequireDefault(_showMonitor);
   _exports.ShowMonitor = _showMonitor.default;
   _slider = _interopRequireDefault(_slider);

package/umd/nav-bar/index.d.ts

@@ -32,13 +32,13 @@ export interface NavBarProps {
      */
     rightContent?: React.ReactNode;
     /**
-     * 自定义样式，背景和文字颜色可在此定义
+     * 自定义样式，最外层元素的背景文字颜色可在此定义
      * @en Custom stylesheet, background and text colors can be defined here
      */
     style?: React.CSSProperties;
     /**
-     * 自定义类名
-     * @en Custom classname
+     * 内层自定义类名
+     * @en Inner custom classname
      */
     className?: string;
     /**