@nutui/nutui-react-taro 3.0.4 → 3.0.6

package/dist/cjs/packages/switch/switch.js

@@ -9,29 +9,33 @@ Object.defineProperty(exports, "Switch", {
     }
 });
 var _interop_require_default = require("@swc/helpers/_/_interop_require_default");
+var _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
 var _define_property = require("@swc/helpers/_/_define_property");
 var _object_spread = require("@swc/helpers/_/_object_spread");
 var _object_spread_props = require("@swc/helpers/_/_object_spread_props");
 var _object_without_properties = require("@swc/helpers/_/_object_without_properties");
 var _sliced_to_array = require("@swc/helpers/_/_sliced_to_array");
-var _react = /*#__PURE__*/ _interop_require_default._(require("react"));
+var _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 var _components = require("@tarojs/components");
 var _classnames = /*#__PURE__*/ _interop_require_default._(require("classnames"));
+var _iconsreacttaro = require("@nutui/icons-react-taro");
 var _typings = require("../../utils/typings");
 var _usepropsvalue = require("../../hooks/use-props-value");
 var _index = require("../configprovider/index");
 var defaultProps = (0, _object_spread_props._)((0, _object_spread._)({}, _typings.ComponentDefaults), {
     disabled: false,
     activeText: '',
-    inactiveText: ''
+    inactiveText: '',
+    loadingIcon: /*#__PURE__*/ _react.default.createElement(_iconsreacttaro.Loading1, null)
 });
 var Switch = function Switch(props) {
-    var _ref = (0, _object_spread._)({}, defaultProps, props), checked = _ref.checked, defaultChecked = _ref.defaultChecked, disabled = _ref.disabled, activeText = _ref.activeText, inactiveText = _ref.inactiveText, className = _ref.className, style = _ref.style, onChange = _ref.onChange, rest = (0, _object_without_properties._)(_ref, [
+    var _ref = (0, _object_spread._)({}, defaultProps, props), checked = _ref.checked, defaultChecked = _ref.defaultChecked, disabled = _ref.disabled, activeText = _ref.activeText, inactiveText = _ref.inactiveText, loadingIcon = _ref.loadingIcon, className = _ref.className, style = _ref.style, onChange = _ref.onChange, rest = (0, _object_without_properties._)(_ref, [
         "checked",
         "defaultChecked",
         "disabled",
         "activeText",
         "inactiveText",
+        "loadingIcon",
         "className",
         "style",
         "onChange"
@@ -42,6 +46,12 @@ var Switch = function Switch(props) {
         value: checked,
         defaultValue: defaultChecked
     }), 2), value = _usePropsValue[0], setValue = _usePropsValue[1];
+    (0, _react.useEffect)(function() {
+        changing && setChanging(false);
+    }, [
+        value
+    ]);
+    var _useState = (0, _sliced_to_array._)((0, _react.useState)(false), 2), changing = _useState[0], setChanging = _useState[1];
     var classes = function classes() {
         var _obj;
         return (0, _classnames.default)([
@@ -50,17 +60,18 @@ var Switch = function Switch(props) {
             (_obj = {}, (0, _define_property._)(_obj, "".concat(classPrefix, "-close"), !value), (0, _define_property._)(_obj, "".concat(classPrefix, "-disabled"), disabled), (0, _define_property._)(_obj, "".concat(classPrefix, "-disabled-close"), disabled && !value), _obj)
         ]);
     };
-    var onClick = function onClick(event) {
-        if (disabled) return;
-        onChange && onChange(!value, event);
+    var onClick = function onClick() {
+        if (disabled || changing) return;
+        if (props.onChange) {
+            setChanging(true);
+            props.onChange(!value);
+        }
         setValue(!value);
     };
     var _obj, _obj1;
     return /*#__PURE__*/ _react.default.createElement(_components.View, (0, _object_spread._)({
         className: classes(),
-        onClick: function onClick1(e) {
-            return onClick(e);
-        },
+        onClick: onClick,
         style: style
     }, rest), /*#__PURE__*/ _react.default.createElement(_components.View, {
         className: (0, _classnames.default)([
@@ -72,9 +83,9 @@ var Switch = function Switch(props) {
             ],
             (_obj = {}, (0, _define_property._)(_obj, "".concat(classPrefix, "-button-open-rtl"), rtl && value), (0, _define_property._)(_obj, "".concat(classPrefix, "-button-close-rtl"), rtl && !value), _obj)
         ])
-    }, !value && !activeText && /*#__PURE__*/ _react.default.createElement(_components.View, {
+    }, changing && loadingIcon ? /*#__PURE__*/ _react.default.createElement(_react.default.Fragment, null, loadingIcon) : /*#__PURE__*/ _react.default.createElement(_react.default.Fragment, null, !value && !activeText && /*#__PURE__*/ _react.default.createElement(_components.View, {
         className: "".concat(classPrefix, "-close-line")
-    })), activeText && /*#__PURE__*/ _react.default.createElement(_components.View, {
+    }))), activeText && /*#__PURE__*/ _react.default.createElement(_components.View, {
         className: (0, _classnames.default)("".concat(classPrefix, "-label"), (_obj1 = {}, (0, _define_property._)(_obj1, "".concat(classPrefix, "-label-open"), value), (0, _define_property._)(_obj1, "".concat(classPrefix, "-label-close"), !value), (0, _define_property._)(_obj1, "".concat(classPrefix, "-label-open-rtl"), rtl && value), (0, _define_property._)(_obj1, "".concat(classPrefix, "-label-close-rtl"), rtl && !value), (0, _define_property._)(_obj1, "".concat(classPrefix, "-label-close-disabled"), disabled && !value), _obj1))
     }, value ? activeText : inactiveText));
 };

package/dist/cjs/packages/tabbar/style/style.css

@@ -5,6 +5,8 @@
 .nut-badge {
   position: relative;
   display: inline-flex;
+  vertical-align: middle;
+  box-sizing: content-box;
   width: auto;
 }
 .nut-badge-icon {
@@ -37,13 +39,12 @@
 }
 .nut-badge-sup {
   display: inline-flex;
-  justify-content: center;
-  height: var(--nutui-badge-height, 14px);
+  text-align: center;
   min-width: var(--nutui-badge-min-width, 6px);
   padding: var(--nutui-badge-padding, 1px 4px);
   box-sizing: border-box;
   color: var(--nutui-badge-color, #ffffff);
-  font-size: var(--nutui-badge-font-size, var(--nutui-font-size-xxs, 10px));
+  font-size: var(--nutui-badge-font-size, var(--nutui-font-size-xxxs, 9px));
   line-height: 12px;
   white-space: nowrap;
   font-weight: normal;
@@ -51,14 +52,11 @@
   background: var(--nutui-badge-background-color, var(--nutui-color-primary, #ff0f23));
   z-index: 1;
 }
+.nut-badge-disabled {
+  background: var(--nutui-badge-background-disabled-color, var(--nutui-color-text-disabled, #c2c4cc));
+}
 .nut-badge-number {
   font-family: "JD";
-  /* #ifdef harmony */
-  line-height: 12px;
-  /* #endif */
-  /* #ifndef harmony */
-  line-height: 13px;
-  /* #endif */
 }
 .nut-badge-one {
   height: var(--nutui-badge-height, 14px);
@@ -82,14 +80,14 @@
   height: var(--nutui-badge-dot-width, 6px);
 }
 .nut-badge-dot-small {
-  min-width: var(--nutui-badge-dot-width, 4px);
-  width: var(--nutui-badge-dot-width, 4px);
-  height: var(--nutui-badge-dot-width, 4px);
+  min-width: var(--nutui-badge-dot-small-width, 4px);
+  width: var(--nutui-badge-dot-small-width, 4px);
+  height: var(--nutui-badge-dot-small-width, 4px);
 }
 .nut-badge-dot-large {
-  min-width: var(--nutui-badge-dot-width, 8px);
-  width: var(--nutui-badge-dot-width, 8px);
-  height: var(--nutui-badge-dot-width, 8px);
+  min-width: var(--nutui-badge-dot-large-width, 8px);
+  width: var(--nutui-badge-dot-large-width, 8px);
+  height: var(--nutui-badge-dot-large-width, 8px);
 }
 .nut-badge-outline {
   background: #ffffff;
@@ -102,25 +100,16 @@
 .nut-tabbar-item {
   display: flex;
   flex-direction: column;
-  justify-content: center;
   align-items: center;
   flex: 1;
-  text-align: center;
-  text-decoration: none;
+  padding: 6px 0 2px;
   color: var(--nutui-tabbar-inactive-color, var(--nutui-color-title, #1a1a1a));
   height: 100%;
 }
-.nut-tabbar-item-icon-box {
-  padding: 0px;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  position: relative;
-}
-.nut-tabbar-item-icon-box .nut-icon {
-  width: 22px;
-  height: 22px;
-  font-size: 22px;
+.nut-tabbar-item .nut-icon {
+  width: 24px;
+  height: 24px;
+  font-size: 24px;
   /* #ifdef harmony*/
   color: var(--nutui-tabbar-inactive-color, var(--nutui-color-title, #1a1a1a));
   /* #endif*/
@@ -128,23 +117,32 @@
   color: inherit;
   /* #endif*/
 }
-.nut-tabbar-item-icon-box-nav {
+.nut-tabbar-item-text {
   display: block;
   color: var(--nutui-color-text, #505259);
-  font-size: var(--nutui-tabbar-text-font-size, var(--nutui-font-size-xs, 11px));
-  line-height: var(--nutui-tabbar-text-font-size, var(--nutui-font-size-xs, 11px));
-  margin-top: var(--nutui-tabbar-text-margin-top, 3px);
+  font-size: var(--nutui-tabbar-text-font-size, var(--nutui-font-size-xxs, 10px));
+  line-height: var(--nutui-tabbar-text-font-size, var(--nutui-font-size-xxs, 10px));
+  margin-top: var(--nutui-tabbar-text-margin-top, 4px);
+}
+.nut-tabbar-item .nut-image-default {
+  width: 38px;
+  height: 38px;
+  border-radius: 38px;
+}
+.nut-tabbar-item-large {
+  justify-content: center;
+  padding: 0;
 }
-.nut-tabbar-item-icon-box-large {
+.nut-tabbar-item-large .nut-tabbar-item-text {
   font-size: var(--nutui-tabbar-text-large-font-size, var(--nutui-font-size-l, 16px));
   margin-top: 0;
-  line-height: var(--nutui-tabbar-text-line-height, 20px);
+  line-height: var(--nutui-tabbar-text-large-font-size, var(--nutui-font-size-l, 16px));
   font-weight: var(--nutui-tabbar-text-large-font-weight, var(--nutui-font-weight, 400));
 }
 .nut-tabbar-item-active {
   color: var(--nutui-tabbar-active-color, var(--nutui-color-primary, #ff0f23));
 }
-.nut-tabbar-item-active .nut-tabbar-item-icon-box,
+.nut-tabbar-item-active .nut-tabbar-item-text,
 .nut-tabbar-item-active .nut-icon {
   /* #ifdef harmony*/
   color: var(--nutui-tabbar-active-color, var(--nutui-color-primary, #ff0f23));
@@ -157,38 +155,44 @@
 .nut-tabbar {
   border: 0px;
   box-shadow: var(--nutui-tabbar-box-shadow, none);
-  border-bottom: var(--nutui-tabbar-border-bottom, 1px solid #eee);
-  border-top: var(--nutui-tabbar-border-top, 1px solid #eee);
+  border-bottom: var(--nutui-tabbar-border-bottom, 0);
+  border-top: var(--nutui-tabbar-border-top, 0);
   width: 100%;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  box-sizing: border-box;
   background: var(--nutui-color-background-overlay, #ffffff);
 }
 .nut-tabbar-wrap {
-  width: 100%;
-  height: var(--nutui-tabbar-height, 50px);
+  height: var(--nutui-tabbar-height, 46px);
   display: flex;
+}
+.nut-tabbar-wrap-3 {
+  padding: 0 16px;
+}
+.nut-tabbar-wrap-2 {
+  padding: 0 32px;
+}
+.nut-tabbar-wrap-horizontal {
+  align-items: center;
+}
+.nut-tabbar-wrap-horizontal .nut-tabbar-item {
   flex-direction: row;
   justify-content: center;
-  align-items: center;
 }
-.nut-tabbar:last-child {
-  border-right: 0;
+.nut-tabbar-wrap-horizontal .nut-tabbar-item .nut-icon {
+  width: 20px;
+  height: 20px;
+}
+.nut-tabbar-wrap-horizontal .nut-tabbar-item .nut-tabbar-item-text {
+  margin: 0 4px 0 6px;
+  font-size: 14px;
+}
+.nut-tabbar-wrap-horizontal .nut-tabbar-item .nut-badge-sup::after {
+  border: 0;
 }
 .nut-tabbar-fixed {
   position: fixed;
   bottom: 0px;
   left: 0px;
 }
-.nut-tabbar-safe-area {
-  display: block;
-  width: 100%;
-  padding-bottom: constant(safe-area-inset-bottom);
-  padding-bottom: env(safe-area-inset-bottom);
-}
 
 [dir=rtl] .nut-tabbar:last-child,
 .nut-rtl .nut-tabbar:last-child {

package/dist/cjs/packages/tabbar/style/style.harmony.css

@@ -5,38 +5,44 @@
 .nut-tabbar {
   border: 0px;
   box-shadow: none;
-  border-bottom: 1px solid #eee;
-  border-top: 1px solid #eee;
+  border-bottom: 0;
+  border-top: 0;
   width: 100%;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  box-sizing: border-box;
   background: #ffffff;
 }
 .nut-tabbar-wrap {
-  width: 100%;
-  height: 50px;
+  height: 46px;
   display: flex;
+}
+.nut-tabbar-wrap-3 {
+  padding: 0 16px;
+}
+.nut-tabbar-wrap-2 {
+  padding: 0 32px;
+}
+.nut-tabbar-wrap-horizontal {
+  align-items: center;
+}
+.nut-tabbar-wrap-horizontal .nut-tabbar-item {
   flex-direction: row;
   justify-content: center;
-  align-items: center;
 }
-.nut-tabbar:last-child {
-  border-right: 0;
+.nut-tabbar-wrap-horizontal .nut-tabbar-item .nut-icon {
+  width: 20px;
+  height: 20px;
+}
+.nut-tabbar-wrap-horizontal .nut-tabbar-item .nut-tabbar-item-text {
+  margin: 0 4px 0 6px;
+  font-size: 14px;
+}
+.nut-tabbar-wrap-horizontal .nut-tabbar-item .nut-badge-sup::after {
+  border: 0;
 }
 .nut-tabbar-fixed {
   position: fixed;
   bottom: 0px;
   left: 0px;
 }
-.nut-tabbar-safe-area {
-  display: block;
-  width: 100%;
-  padding-bottom: constant(safe-area-inset-bottom);
-  padding-bottom: env(safe-area-inset-bottom);
-}
 
 [dir=rtl] .nut-tabbar:last-child,
 .nut-rtl .nut-tabbar:last-child {

package/dist/cjs/packages/tabbar/style/tabbar.scss

@@ -4,24 +4,40 @@
   border-bottom: $tabbar-border-bottom;
   border-top: $tabbar-border-top;
   width: 100%;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  box-sizing: border-box;
   background: $color-background-overlay;
 
   &-wrap {
-    width: 100%;
     height: $tabbar-height;
     display: flex;
-    flex-direction: row;
-    justify-content: center;
-    align-items: center;
-  }
 
-  &:last-child {
-    border-right: 0;
+    &-3 {
+      padding: 0 16px;
+    }
+
+    &-2 {
+      padding: 0 32px;
+    }
+
+    &-horizontal {
+      align-items: center;
+      .nut-tabbar-item {
+        flex-direction: row;
+        justify-content: center;
+        .nut-icon {
+          width: 20px;
+          height: 20px;
+        }
+        .nut-tabbar-item-text {
+          margin: 0 4px 0 6px;
+          font-size: 14px;
+        }
+        .nut-badge-sup {
+          &::after {
+            border: 0;
+          }
+        }
+      }
+    }
   }
 
   &-fixed {
@@ -29,13 +45,6 @@
     bottom: 0px;
     left: 0px;
   }
-
-  &-safe-area {
-    display: block;
-    width: 100%;
-    padding-bottom: constant(safe-area-inset-bottom);
-    padding-bottom: env(safe-area-inset-bottom);
-  }
 }
 
 [dir='rtl'] .nut-tabbar,

package/dist/cjs/packages/tabbar/tabbar.js

@@ -9,27 +9,30 @@ Object.defineProperty(exports, "Tabbar", {
     }
 });
 var _interop_require_default = require("@swc/helpers/_/_interop_require_default");
+var _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
 var _define_property = require("@swc/helpers/_/_define_property");
 var _object_spread = require("@swc/helpers/_/_object_spread");
 var _object_spread_props = require("@swc/helpers/_/_object_spread_props");
 var _sliced_to_array = require("@swc/helpers/_/_sliced_to_array");
-var _react = /*#__PURE__*/ _interop_require_default._(require("react"));
+var _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 var _classnames = /*#__PURE__*/ _interop_require_default._(require("classnames"));
 var _components = require("@tarojs/components");
 var _typings = require("../../utils/typings");
 var _usepropsvalue = require("../../hooks/use-props-value");
 var _index = /*#__PURE__*/ _interop_require_default._(require("../tabbaritem/index"));
 var _context = /*#__PURE__*/ _interop_require_default._(require("./context"));
+var _index1 = /*#__PURE__*/ _interop_require_default._(require("../safearea/index"));
 var defaultProps = (0, _object_spread_props._)((0, _object_spread._)({}, _typings.ComponentDefaults), {
     defaultValue: 0,
     fixed: false,
     inactiveColor: '',
     activeColor: '',
+    direction: 'vertical',
     safeArea: false,
-    onSwitch: function onSwitch(value) {}
+    onSwitch: function onSwitch() {}
 });
 var Tabbar = function Tabbar(props) {
-    var _$_object_spread = (0, _object_spread._)({}, defaultProps, props), children = _$_object_spread.children, defaultValue = _$_object_spread.defaultValue, value = _$_object_spread.value, fixed = _$_object_spread.fixed, activeColor = _$_object_spread.activeColor, inactiveColor = _$_object_spread.inactiveColor, safeArea = _$_object_spread.safeArea, className = _$_object_spread.className, style = _$_object_spread.style, onSwitch = _$_object_spread.onSwitch;
+    var _$_object_spread = (0, _object_spread._)({}, defaultProps, props), children = _$_object_spread.children, defaultValue = _$_object_spread.defaultValue, value = _$_object_spread.value, fixed = _$_object_spread.fixed, activeColor = _$_object_spread.activeColor, inactiveColor = _$_object_spread.inactiveColor, direction = _$_object_spread.direction, safeArea = _$_object_spread.safeArea, className = _$_object_spread.className, style = _$_object_spread.style, onSwitch = _$_object_spread.onSwitch;
     var classPrefix = 'nut-tabbar';
     var _usePropsValue = (0, _sliced_to_array._)((0, _usepropsvalue.usePropsValue)({
         value: value,
@@ -37,11 +40,26 @@ var Tabbar = function Tabbar(props) {
         finalValue: 0,
         onChange: onSwitch
     }), 2), selectIndex = _usePropsValue[0], setSelectIndex = _usePropsValue[1];
+    var sizeCls = (0, _react.useMemo)(function() {
+        var size = _react.default.Children.count(children);
+        var _obj;
+        return size > 3 ? '' : (0, _classnames.default)((_obj = {}, (0, _define_property._)(_obj, "".concat(classPrefix, "-wrap-3"), size === 3), (0, _define_property._)(_obj, "".concat(classPrefix, "-wrap-2"), size === 2), (0, _define_property._)(_obj, "".concat(classPrefix, "-wrap-").concat(direction), size === 2 && direction !== 'vertical'), _obj));
+    }, [
+        children,
+        direction
+    ]);
+    var itemDirection = (0, _react.useMemo)(function() {
+        var size = _react.default.Children.count(children);
+        return size === 2 && direction !== 'vertical' && direction;
+    }, [
+        direction,
+        children
+    ]);
     return /*#__PURE__*/ _react.default.createElement(_components.View, {
         className: (0, _classnames.default)(classPrefix, (0, _define_property._)({}, "".concat(classPrefix, "-fixed"), fixed), className),
         style: style
     }, /*#__PURE__*/ _react.default.createElement(_components.View, {
-        className: "".concat(classPrefix, "-wrap")
+        className: "".concat(classPrefix, "-wrap ").concat(sizeCls)
     }, /*#__PURE__*/ _react.default.createElement(_context.default.Provider, {
         value: {
             selectIndex: selectIndex,
@@ -50,12 +68,12 @@ var Tabbar = function Tabbar(props) {
             handleClick: setSelectIndex
         }
     }, _react.default.Children.map(children, function(child, index) {
-        if (!/*#__PURE__*/ _react.default.isValidElement(child)) return null;
-        return /*#__PURE__*/ _react.default.cloneElement(child, (0, _object_spread_props._)((0, _object_spread._)({}, child.props), {
-            index: index
-        }));
-    }))), (fixed || safeArea) && /*#__PURE__*/ _react.default.createElement(_components.View, {
-        className: "".concat(classPrefix, "-safe-area")
+        return /*#__PURE__*/ _react.default.isValidElement(child) ? /*#__PURE__*/ _react.default.cloneElement(child, (0, _object_spread_props._)((0, _object_spread._)({}, child.props), {
+            index: index,
+            direction: itemDirection
+        })) : null;
+    }))), (fixed || safeArea) && /*#__PURE__*/ _react.default.createElement(_index1.default, {
+        position: "bottom"
     }));
 };
 Tabbar.displayName = 'NutTabbar';

package/dist/cjs/packages/tabbaritem/style/style.css

@@ -5,6 +5,8 @@
 .nut-badge {
   position: relative;
   display: inline-flex;
+  vertical-align: middle;
+  box-sizing: content-box;
   width: auto;
 }
 .nut-badge-icon {
@@ -37,13 +39,12 @@
 }
 .nut-badge-sup {
   display: inline-flex;
-  justify-content: center;
-  height: var(--nutui-badge-height, 14px);
+  text-align: center;
   min-width: var(--nutui-badge-min-width, 6px);
   padding: var(--nutui-badge-padding, 1px 4px);
   box-sizing: border-box;
   color: var(--nutui-badge-color, #ffffff);
-  font-size: var(--nutui-badge-font-size, var(--nutui-font-size-xxs, 10px));
+  font-size: var(--nutui-badge-font-size, var(--nutui-font-size-xxxs, 9px));
   line-height: 12px;
   white-space: nowrap;
   font-weight: normal;
@@ -51,14 +52,11 @@
   background: var(--nutui-badge-background-color, var(--nutui-color-primary, #ff0f23));
   z-index: 1;
 }
+.nut-badge-disabled {
+  background: var(--nutui-badge-background-disabled-color, var(--nutui-color-text-disabled, #c2c4cc));
+}
 .nut-badge-number {
   font-family: "JD";
-  /* #ifdef harmony */
-  line-height: 12px;
-  /* #endif */
-  /* #ifndef harmony */
-  line-height: 13px;
-  /* #endif */
 }
 .nut-badge-one {
   height: var(--nutui-badge-height, 14px);
@@ -82,14 +80,14 @@
   height: var(--nutui-badge-dot-width, 6px);
 }
 .nut-badge-dot-small {
-  min-width: var(--nutui-badge-dot-width, 4px);
-  width: var(--nutui-badge-dot-width, 4px);
-  height: var(--nutui-badge-dot-width, 4px);
+  min-width: var(--nutui-badge-dot-small-width, 4px);
+  width: var(--nutui-badge-dot-small-width, 4px);
+  height: var(--nutui-badge-dot-small-width, 4px);
 }
 .nut-badge-dot-large {
-  min-width: var(--nutui-badge-dot-width, 8px);
-  width: var(--nutui-badge-dot-width, 8px);
-  height: var(--nutui-badge-dot-width, 8px);
+  min-width: var(--nutui-badge-dot-large-width, 8px);
+  width: var(--nutui-badge-dot-large-width, 8px);
+  height: var(--nutui-badge-dot-large-width, 8px);
 }
 .nut-badge-outline {
   background: #ffffff;
@@ -102,25 +100,16 @@
 .nut-tabbar-item {
   display: flex;
   flex-direction: column;
-  justify-content: center;
   align-items: center;
   flex: 1;
-  text-align: center;
-  text-decoration: none;
+  padding: 6px 0 2px;
   color: var(--nutui-tabbar-inactive-color, var(--nutui-color-title, #1a1a1a));
   height: 100%;
 }
-.nut-tabbar-item-icon-box {
-  padding: 0px;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  position: relative;
-}
-.nut-tabbar-item-icon-box .nut-icon {
-  width: 22px;
-  height: 22px;
-  font-size: 22px;
+.nut-tabbar-item .nut-icon {
+  width: 24px;
+  height: 24px;
+  font-size: 24px;
   /* #ifdef harmony*/
   color: var(--nutui-tabbar-inactive-color, var(--nutui-color-title, #1a1a1a));
   /* #endif*/
@@ -128,23 +117,32 @@
   color: inherit;
   /* #endif*/
 }
-.nut-tabbar-item-icon-box-nav {
+.nut-tabbar-item-text {
   display: block;
   color: var(--nutui-color-text, #505259);
-  font-size: var(--nutui-tabbar-text-font-size, var(--nutui-font-size-xs, 11px));
-  line-height: var(--nutui-tabbar-text-font-size, var(--nutui-font-size-xs, 11px));
-  margin-top: var(--nutui-tabbar-text-margin-top, 3px);
+  font-size: var(--nutui-tabbar-text-font-size, var(--nutui-font-size-xxs, 10px));
+  line-height: var(--nutui-tabbar-text-font-size, var(--nutui-font-size-xxs, 10px));
+  margin-top: var(--nutui-tabbar-text-margin-top, 4px);
+}
+.nut-tabbar-item .nut-image-default {
+  width: 38px;
+  height: 38px;
+  border-radius: 38px;
+}
+.nut-tabbar-item-large {
+  justify-content: center;
+  padding: 0;
 }
-.nut-tabbar-item-icon-box-large {
+.nut-tabbar-item-large .nut-tabbar-item-text {
   font-size: var(--nutui-tabbar-text-large-font-size, var(--nutui-font-size-l, 16px));
   margin-top: 0;
-  line-height: var(--nutui-tabbar-text-line-height, 20px);
+  line-height: var(--nutui-tabbar-text-large-font-size, var(--nutui-font-size-l, 16px));
   font-weight: var(--nutui-tabbar-text-large-font-weight, var(--nutui-font-weight, 400));
 }
 .nut-tabbar-item-active {
   color: var(--nutui-tabbar-active-color, var(--nutui-color-primary, #ff0f23));
 }
-.nut-tabbar-item-active .nut-tabbar-item-icon-box,
+.nut-tabbar-item-active .nut-tabbar-item-text,
 .nut-tabbar-item-active .nut-icon {
   /* #ifdef harmony*/
   color: var(--nutui-tabbar-active-color, var(--nutui-color-primary, #ff0f23));