@nutui/nutui-react-taro 3.0.0-beta.6 → 3.0.0-beta.8

package/dist/cjs/packages/badge/badge.js

@@ -23,16 +23,15 @@ var _components = require("@tarojs/components");
 var _typings = require("../../utils/typings");
 var _index = require("../configprovider/index");
 var _pxtransform = /*#__PURE__*/ _interop_require_default._(require("../../utils/px-transform"));
-var _getrectbytaro = require("../../utils/get-rect-by-taro");
 var _platformtaro = require("../../utils/platform-taro");
 var defaultProps = (0, _object_spread_props._)((0, _object_spread._)({}, _typings.ComponentDefaults), {
     value: '',
     dot: false,
     max: 99,
-    top: '4',
-    right: '8',
-    color: '',
-    fill: 'solid'
+    top: 0,
+    right: 0,
+    fill: 'solid',
+    size: 'large'
 });
 var Badge = function Badge(props) {
     var content = function content() {
@@ -53,14 +52,14 @@ var Badge = function Badge(props) {
     };
     var _this;
     var rtl = (0, _index.useRtl)();
-    var _$_object_spread = (0, _object_spread._)({}, defaultProps, props), className = _$_object_spread.className, style = _$_object_spread.style, value = _$_object_spread.value, max = _$_object_spread.max, children = _$_object_spread.children, dot = _$_object_spread.dot, top = _$_object_spread.top, right = _$_object_spread.right, color = _$_object_spread.color, fill = _$_object_spread.fill;
+    var _$_object_spread = (0, _object_spread._)({}, defaultProps, props), className = _$_object_spread.className, style = _$_object_spread.style, value = _$_object_spread.value, max = _$_object_spread.max, children = _$_object_spread.children, dot = _$_object_spread.dot, top = _$_object_spread.top, right = _$_object_spread.right, fill = _$_object_spread.fill, size = _$_object_spread.size;
     var classPrefix = 'nut-badge';
     var isHarmony = (0, _platformtaro.harmony)();
     var classes = (0, _classnames.default)(classPrefix, className);
     var badgeRef = (0, _react.useRef)(null);
     var _useState = (0, _sliced_to_array._)((0, _react.useState)({}), 2), contentStyle = _useState[0], setContentStyle = _useState[1];
     var _obj;
-    var contentClasses = (0, _classnames.default)("".concat(classPrefix, "-content"), (_obj = {}, (0, _define_property._)(_obj, "".concat(classPrefix, "-sup"), isNumber() || isString() || dot), (0, _define_property._)(_obj, "".concat(classPrefix, "-one"), typeof content() === 'string' && ((_this = "".concat(content())) === null || _this === void 0 ? void 0 : _this.length) === 1), (0, _define_property._)(_obj, "".concat(classPrefix, "-dot"), dot), (0, _define_property._)(_obj, "".concat(classPrefix, "-").concat(fill), fill === 'outline'), _obj));
+    var contentClasses = (0, _classnames.default)((_obj = {}, (0, _define_property._)(_obj, "".concat(classPrefix, "-sup"), isNumber() || isString() || dot), (0, _define_property._)(_obj, "".concat(classPrefix, "-number"), isNumber()), (0, _define_property._)(_obj, "".concat(classPrefix, "-one"), typeof content() === 'string' && ((_this = "".concat(content())) === null || _this === void 0 ? void 0 : _this.length) === 1), (0, _define_property._)(_obj, "".concat(classPrefix, "-dot"), dot), (0, _define_property._)(_obj, "".concat(classPrefix, "-dot-").concat(size), dot), (0, _define_property._)(_obj, "".concat(classPrefix, "-").concat(fill), fill === 'outline'), (0, _define_property._)(_obj, "".concat(classPrefix, "-content"), children), _obj));
     (0, _react.useEffect)(function() {
         if (badgeRef.current) {
             getPositionStyle();
@@ -68,59 +67,22 @@ var Badge = function Badge(props) {
     }, []);
     var getPositionStyle = /*#__PURE__*/ function() {
         var _ref = (0, _async_to_generator._)(function() {
-            var style, reacts, dir;
+            var style, dir;
             return (0, _ts_generator._)(this, function(_state) {
-                switch(_state.label){
-                    case 0:
-                        style = {};
-                        style.top = (0, _pxtransform.default)(-Number(top) || 0);
-                        if (!(0, _platformtaro.rn)()) return [
-                            3,
-                            2
-                        ];
-                        return [
-                            4,
-                            (0, _getrectbytaro.getRectByTaro)(badgeRef.current)
-                        ];
-                    case 1:
-                        reacts = _state.sent();
-                        style.left = (reacts === null || reacts === void 0 ? void 0 : reacts.width) && (reacts === null || reacts === void 0 ? void 0 : reacts.width) > Number(right) ? (0, _pxtransform.default)(reacts.width - Number(right)) : 0;
-                        return [
-                            3,
-                            3
-                        ];
-                    case 2:
-                        dir = rtl ? 'left' : 'right';
-                        style[dir] = isHarmony ? (0, _pxtransform.default)(Number(right)) : "".concat(Number(right) || parseFloat(String(right)) || 0, "px");
-                        _state.label = 3;
-                    case 3:
-                        setContentStyle(style);
-                        return [
-                            2
-                        ];
-                }
+                style = {};
+                style.top = (0, _pxtransform.default)(Number(top) || 0);
+                dir = rtl ? 'left' : 'right';
+                style[dir] = isHarmony ? (0, _pxtransform.default)(Number(right)) : "".concat(Number(right) || 0, "px");
+                setContentStyle(style);
+                return [
+                    2
+                ];
             });
         });
         return function getPositionStyle() {
             return _ref.apply(this, arguments);
         };
     }();
-    var getStyle = function getStyle() {
-        var style = {};
-        if (color) {
-            if (fill === 'outline') {
-                style.color = color;
-                isHarmony ? style.backgroundColor = '#fff' : style.background = '#fff';
-                if (!(color === null || color === void 0 ? void 0 : color.includes('gradient'))) {
-                    style.borderColor = color;
-                }
-            } else {
-                style.color = '#fff';
-                isHarmony ? style.backgroundColor = color : style.background = color;
-            }
-        }
-        return style;
-    };
     var _obj1;
     return /*#__PURE__*/ _react.default.createElement(_components.View, {
         className: classes,
@@ -131,7 +93,7 @@ var Badge = function Badge(props) {
         style: contentStyle
     }, value), children, !isIcon() && /*#__PURE__*/ _react.default.createElement(_components.View, {
         className: contentClasses,
-        style: (0, _object_spread._)({}, contentStyle, getStyle())
+        style: contentStyle
     }, content()));
 };
 Badge.displayName = 'NutBadge';

package/dist/cjs/packages/badge/index.d.ts

@@ -1,3 +1,3 @@
 import { Badge } from "./badge";
-export type { BadgeFill, BadgeProps } from "./badge";
+export type { BadgeFill, BadgeDotSize, BadgeProps } from './types';
 export default Badge;

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

@@ -2,22 +2,14 @@
   position: relative;
   display: inline-flex;
   width: auto;
-  /* #ifdef harmony */
-  min-width: 1px;
-  /* #endif */
-  /* #ifndef harmony */
-  min-width: auto;
-  /* #endif */
+
   &-icon {
-    position: absolute;
     display: flex;
     justify-content: center;
     align-items: center;
     background: $badge-background-color;
     padding: $badge-icon-padding;
     text-align: center;
-    border: $badge-border;
-    border-radius: $badge-border-radius;
     z-index: $badge-z-index;
 
     .nut-icon {
@@ -27,53 +19,88 @@
     }
   }
 
+  &-sup,
+  &-icon {
+    border-radius: $badge-border-radius;
+    &::after {
+      content: '';
+      position: absolute;
+      top: -50%;
+      bottom: -50%;
+      left: -50%;
+      right: -50%;
+      transform: scale(0.5);
+      border: $badge-border;
+      border-radius: $badge-border-radius;
+    }
+  }
+
   &-sup {
-    height: $badge-height;
-    position: absolute;
-    display: flex;
+    display: inline-flex;
     justify-content: center;
-    align-items: center;
-    /* #ifdef harmony */
-    background: $color-primary;
-    /* #endif */
-    /* #ifndef harmony */
-    background: $badge-background-color;
-    /* #endif */
-    color: $badge-color;
+    height: $badge-height;
+    min-width: $badge-min-width;
     padding: $badge-padding;
+    box-sizing: border-box;
+    color: $badge-color;
     font-size: $badge-font-size;
-    font-weight: normal;
-    text-align: center;
-    border: $badge-border;
-    border-radius: $badge-border-radius;
-    min-width: $badge-min-width;
+    line-height: 12px;
     white-space: nowrap;
+    font-weight: normal;
+    vertical-align: middle;
+    background: $badge-background-color;
     z-index: 1;
   }
 
+  &-number {
+    font-family: 'JD';
+    /* #ifdef harmony */
+    line-height: 12px;
+    /* #endif */
+    /* #ifndef harmony */
+    line-height: 13px;
+    /* #endif */
+  }
+
   &-one {
     height: $badge-height;
     width: $badge-height;
-    padding: 0;
   }
 
   &-content {
-    /* #ifndef rn */
+    position: absolute;
     transform: $badge-content-transform;
-    /* #endif */
   }
 
   &-dot {
-    width: $badge-dot-width;
-    height: $badge-dot-width;
-    border: $badge-dot-border;
-    border-radius: $badge-dot-width;
     padding: 0;
+    border-radius: 50%;
+    &::after {
+      border: $badge-dot-border;
+      border-radius: 50%;
+    }
+    &-normal {
+      min-width: $badge-dot-width;
+      width: $badge-dot-width;
+      height: $badge-dot-width;
+    }
+    &-small {
+      min-width: $badge-dot-small-width;
+      width: $badge-dot-small-width;
+      height: $badge-dot-small-width;
+    }
+    &-large {
+      min-width: $badge-dot-large-width;
+      width: $badge-dot-large-width;
+      height: $badge-dot-large-width;
+    }
   }
 
   &-outline {
     background: $color-primary-text;
-    border: 1px solid $color-primary;
-    color: $color-primary;
+    color: $badge-outline-color;
+    &::after {
+      border: $badge-outline-border;
+    }
   }
 }

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

@@ -6,72 +6,95 @@
   position: relative;
   display: inline-flex;
   width: auto;
-  /* #ifdef harmony */
-  min-width: 1px;
-  /* #endif */
-  /* #ifndef harmony */
-  min-width: auto;
-  /* #endif */
 }
 .nut-badge-icon {
-  position: absolute;
   display: flex;
   justify-content: center;
   align-items: center;
-  background: var(--nutui-badge-background-color, linear-gradient(135deg, var(--nutui-color-primary-stop-1, #ff475d) 0%, var(--nutui-color-primary-stop-2, #ff0f23) 100%));
-  padding: var(--nutui-badge-icon-padding, 3px);
+  background: var(--nutui-badge-background-color, var(--nutui-color-primary, #ff0f23));
+  padding: var(--nutui-badge-icon-padding, 2px);
   text-align: center;
-  border: var(--nutui-badge-border, 0px solid var(--nutui-color-primary-text, #ffffff));
-  border-radius: var(--nutui-badge-border-radius, var(--nutui-badge-height, 14px));
   z-index: var(--nutui-badge-z-index, 1);
 }
 .nut-badge-icon .nut-icon {
-  width: var(--nutui-badge-icon-size, 12px);
-  height: var(--nutui-badge-icon-size, 12px);
-  font-size: var(--nutui-badge-icon-size, 12px);
+  width: var(--nutui-badge-icon-size, 10px);
+  height: var(--nutui-badge-icon-size, 10px);
+  font-size: var(--nutui-badge-icon-size, 10px);
 }
-.nut-badge-sup {
-  height: var(--nutui-badge-height, 14px);
+.nut-badge-sup, .nut-badge-icon {
+  border-radius: var(--nutui-badge-border-radius, var(--nutui-badge-height, 14px));
+}
+.nut-badge-sup::after, .nut-badge-icon::after {
+  content: "";
   position: absolute;
-  display: flex;
+  top: -50%;
+  bottom: -50%;
+  left: -50%;
+  right: -50%;
+  transform: scale(0.5);
+  border: var(--nutui-badge-border, 1px solid var(--nutui-color-primary-text, #ffffff));
+  border-radius: var(--nutui-badge-border-radius, var(--nutui-badge-height, 14px));
+}
+.nut-badge-sup {
+  display: inline-flex;
   justify-content: center;
-  align-items: center;
+  height: var(--nutui-badge-height, 14px);
+  min-width: var(--nutui-badge-min-width, 6px);
+  padding: var(--nutui-badge-padding, 1px 4px);
+  box-sizing: border-box;
+  color: var(--nutui-badge-color, var(--nutui-color-primary-text, #ffffff));
+  font-size: var(--nutui-badge-font-size, var(--nutui-font-size-xxs, 10px));
+  line-height: 12px;
+  white-space: nowrap;
+  font-weight: normal;
+  vertical-align: middle;
+  background: var(--nutui-badge-background-color, var(--nutui-color-primary, #ff0f23));
+  z-index: 1;
+}
+.nut-badge-number {
+  font-family: "JD";
   /* #ifdef harmony */
-  background: var(--nutui-color-primary, #ff0f23);
+  line-height: 12px;
   /* #endif */
   /* #ifndef harmony */
-  background: var(--nutui-badge-background-color, linear-gradient(135deg, var(--nutui-color-primary-stop-1, #ff475d) 0%, var(--nutui-color-primary-stop-2, #ff0f23) 100%));
+  line-height: 13px;
   /* #endif */
-  color: var(--nutui-badge-color, #fff);
-  padding: var(--nutui-badge-padding, 0 4px);
-  font-size: var(--nutui-badge-font-size, var(--nutui-font-size-xxs, 10px));
-  font-weight: normal;
-  text-align: center;
-  border: var(--nutui-badge-border, 0px solid var(--nutui-color-primary-text, #ffffff));
-  border-radius: var(--nutui-badge-border-radius, var(--nutui-badge-height, 14px));
-  min-width: var(--nutui-badge-min-width, 5px);
-  white-space: nowrap;
-  z-index: 1;
 }
 .nut-badge-one {
   height: var(--nutui-badge-height, 14px);
   width: var(--nutui-badge-height, 14px);
-  padding: 0;
 }
 .nut-badge-content {
-  /* #ifndef rn */
-  transform: var(--nutui-badge-content-transform, translateX(100%));
-  /* #endif */
+  position: absolute;
+  transform: var(--nutui-badge-content-transform, translate(50%, -50%));
 }
 .nut-badge-dot {
-  width: var(--nutui-badge-dot-width, 7px);
-  height: var(--nutui-badge-dot-width, 7px);
-  border: var(--nutui-badge-dot-border, 0px solid var(--nutui-color-primary-text, #ffffff));
-  border-radius: var(--nutui-badge-dot-width, 7px);
   padding: 0;
+  border-radius: 50%;
+}
+.nut-badge-dot::after {
+  border: var(--nutui-badge-dot-border, 1px solid var(--nutui-color-primary-text, #ffffff));
+  border-radius: 50%;
+}
+.nut-badge-dot-normal {
+  min-width: var(--nutui-badge-dot-width, 6px);
+  width: var(--nutui-badge-dot-width, 6px);
+  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);
+}
+.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);
 }
 .nut-badge-outline {
   background: var(--nutui-color-primary-text, #ffffff);
-  border: 1px solid var(--nutui-color-primary, #ff0f23);
-  color: var(--nutui-color-primary, #ff0f23);
+  color: var(--nutui-badge-outline-color, var(--nutui-color-primary, #ff0f23));
+}
+.nut-badge-outline::after {
+  border: var(--nutui-badge-outline-border, 1px solid var(--nutui-color-primary, #ff0f23));
 }

package/dist/cjs/packages/badge/types.d.ts

@@ -0,0 +1,12 @@
+import { BasicComponent } from "../../utils/typings";
+export type BadgeFill = 'solid' | 'outline';
+export type BadgeDotSize = 'small' | 'normal' | 'large';
+export interface BadgeProps extends BasicComponent {
+    value: React.ReactNode;
+    dot: boolean;
+    max: number;
+    top: string | number;
+    right: string | number;
+    fill: BadgeFill;
+    size: BadgeDotSize;
+}

package/dist/cjs/packages/badge/types.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});

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

@@ -429,12 +429,17 @@
   display: flex;
 }
 
+.nut-tabs-horizontal {
+  flex-direction: column;
+}
+
 .nut-tabs-titles {
   display: flex;
   box-sizing: border-box;
   height: var(--nutui-tabs-titles-height, 44px);
   user-select: none;
-  overflow: hidden;
+  overflow-x: auto;
+  overflow-y: hidden;
   background: var(--nutui-tabs-titles-background-color, var(--nutui-color-background, #f5f6fa));
   scrollbar-width: none;
 }
@@ -445,7 +450,6 @@
 }
 .nut-tabs-titles .nut-tabs-list {
   width: 100%;
-  height: auto;
   display: flex;
   flex-shrink: 0;
 }
@@ -461,10 +465,6 @@
 .nut-tabs-titles-right .nut-tabs-titles-item {
   padding: 0 22px;
 }
-.nut-tabs-titles-scrollable {
-  overflow-x: auto;
-  overflow-y: hidden;
-}
 .nut-tabs-titles-item {
   position: relative;
   display: flex;
@@ -480,11 +480,14 @@
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+.nut-tabs-titles-item .nut-icon {
+  color: var(--nutui-tabs-titles-item-color, var(--nutui-color-title, #1a1a1a));
+}
 .nut-tabs-titles-item-left, .nut-tabs-titles-item-right {
   flex: none;
 }
 .nut-tabs-titles-item-text {
-  text-align: center;
+  color: var(--nutui-tabs-titles-item-color, var(--nutui-color-title, #1a1a1a));
 }
 .nut-tabs-titles-item-smile, .nut-tabs-titles-item-line {
   position: absolute;
@@ -492,9 +495,9 @@
   width: 0;
   height: 0;
   content: " ";
-  bottom: var(--nutui-tabs-line-bottom, 15%);
   left: 50%;
   transform: translate(-50%, 0);
+  bottom: var(--nutui-tabs-line-bottom, 15%);
   border-radius: var(--nutui-tabs-line-border-radius, 2px);
   opacity: var(--nutui-tabs-tab-line-opacity, 1);
   overflow: hidden;
@@ -507,9 +510,11 @@
   font-size: 20px;
   width: 100%;
   height: 100%;
-  color: var(--nutui-color-primary, #ff0f23);
 }
-.nut-tabs-titles-item-active {
+.nut-tabs-titles-item-active .nut-icon {
+  color: var(--nutui-tabs-titles-item-active-color, var(--nutui-color-primary, #ff0f23));
+}
+.nut-tabs-titles-item-active .nut-tabs-titles-item-text {
   color: var(--nutui-tabs-titles-item-active-color, var(--nutui-color-primary, #ff0f23));
   font-weight: var(--nutui-tabs-titles-item-active-font-weight, var(--nutui-font-weight-bold, 600));
 }
@@ -525,10 +530,20 @@
   width: 40px;
   height: 20px;
 }
+.nut-tabs-titles-item-active .nut-tabs-titles-item-smile .nut-icon {
+  color: var(--nutui-tabs-titles-item-active-color, var(--nutui-color-primary, #ff0f23));
+}
 .nut-tabs-titles-item-disabled {
   color: var(--nutui-color-text-disabled, #c2c4cc);
 }
-.nut-tabs-titles-simple .nut-tabs-titles-item-active {
+.nut-tabs-titles-item-disabled .nut-icon {
+  color: var(--nutui-color-text-disabled, #c2c4cc);
+}
+.nut-tabs-titles-item-disabled .nut-tabs-titles-item-text {
+  color: var(--nutui-color-text-disabled, #c2c4cc);
+}
+.nut-tabs-titles-simple .nut-tabs-titles-item-active .nut-tabs-titles-item-text,
+.nut-tabs-titles-simple .nut-tabs-titles-item-active .nut-icon {
   color: var(--nutui-color-title, #1a1a1a);
   font-size: var(--nutui-tabs-titles-item-active-font-size, var(--nutui-font-size-l, 16px));
 }
@@ -557,11 +572,10 @@
 }
 .nut-tabs-titles-button .nut-tabs-titles-item-active .nut-tabs-titles-item-text {
   background: var(--nutui-color-default-light);
-  color: var(--nutui-color-text, #505259);
+  color: var(--nutui-tabs-titles-item-active-color, var(--nutui-color-primary, #ff0f23));
   border-radius: var(--nutui-tabs-button-border-radius, 50px);
   font-weight: var(--nutui-font-weight-bold, 600);
   background-color: var(--nutui-tabs-button-active-background-color, var(--nutui-color-primary-light-pressed, #ffebf1));
-  color: var(--nutui-color-primary, #ff0f23);
   border: var(--nutui-tabs-button-active-border, 1px solid var(--nutui-color-primary, #ff0f23));
 }
 .nut-tabs-titles-divider {
@@ -586,68 +600,29 @@
   display: none;
 }
 
-[dir=rtl] .nut-tabs-titles-item-smile, [dir=rtl] .nut-tabs-titles-item-line,
-.nut-rtl .nut-tabs-titles-item-smile,
-.nut-rtl .nut-tabs-titles-item-line {
-  left: auto;
-  right: 50%;
-  transform: translate(50%, 0);
-}
-[dir=rtl] .nut-tabs-titles-divider .nut-tabs-titles-item::after,
-.nut-rtl .nut-tabs-titles-divider .nut-tabs-titles-item::after {
-  right: auto;
-  left: 0;
-}
-
-.nut-tabs-horizontal {
-  flex-direction: column;
-  position: relative;
-}
-
-.nut-tabs-vertical {
-  flex-direction: row;
-  width: 100%;
-}
 .nut-tabs-vertical .nut-tabs-ellipsis {
   text-overflow: ellipsis;
   white-space: nowrap;
   overflow: hidden;
 }
 .nut-tabs-vertical .nut-tabs-titles {
-  box-sizing: border-box;
   flex-direction: column;
   height: 100%;
-  padding: 0;
   width: var(--nutui-tabs-vertical-titles-width, 100px);
   flex-shrink: 0;
 }
 .nut-tabs-vertical .nut-tabs-titles .nut-tabs-list {
-  width: 100%;
-  display: flex;
   flex-direction: column;
-  flex-shrink: 0;
-}
-.nut-tabs-vertical .nut-tabs-titles-line .nut-tabs-titles-item {
-  padding-left: 14px;
-}
-.nut-tabs-vertical .nut-tabs-titles-scrollable {
-  overflow-x: hidden;
-  overflow-y: auto;
 }
 .nut-tabs-vertical .nut-tabs-titles-item {
   height: var(--nutui-tabs-vertical-titles-item-height, 40px);
-  margin: 0;
   flex: none;
 }
 .nut-tabs-vertical .nut-tabs-titles-item-smile {
-  width: 0;
-  height: 0;
   overflow: hidden;
   transition: width 0.3s ease;
 }
 .nut-tabs-vertical .nut-tabs-titles-item-line {
-  width: 0;
-  height: 0;
   transform: translate(0, -50%);
   transition: height 0.3s ease;
 }
@@ -667,21 +642,17 @@
   right: -12px;
   bottom: -2%;
   left: auto;
-  width: 40px;
-  height: 20px;
   transform: rotate(320deg);
 }
 .nut-tabs-vertical .nut-tabs-horizontal .nut-tabs-titles {
   flex-direction: row;
-  overflow-x: auto;
-  overflow-y: hidden;
   height: var(--nutui-tabs-titles-height, 44px);
+  width: 100%;
+  padding: 0 !important;
 }
 .nut-tabs-vertical .nut-tabs-horizontal .nut-tabs-titles .nut-tabs-list {
-  width: 100%;
-  display: flex;
   flex-direction: row;
-  flex-shrink: 0;
+  height: auto;
 }
 .nut-tabs-vertical .nut-tabs-horizontal .nut-tabs-content {
   flex-direction: row;
@@ -692,6 +663,9 @@
 .nut-tabs-vertical .nut-tabs-horizontal .nut-tabs-titles-item-active .nut-tabs-titles-item-line {
   left: 50%;
   transform: translate(-50%, 0);
+  width: var(--nutui-tabs-tab-line-width, 12px);
+  height: var(--nutui-tabs-tab-line-height, 2px);
+  background: var(--nutui-tabs-tab-line-color, var(--nutui-color-primary, #ff0f23));
 }
 .nut-tabs-vertical .nut-tabs-horizontal .nut-tabs-titles-item-active .nut-tabs-titles-item-smile {
   left: 50%;
@@ -709,28 +683,26 @@
 .nut-tabs-vertical .nut-tabs-content .nut-tabpane {
   height: 100%;
 }
-.nut-tabs-vertical .nut-tabs-horizontal .nut-tabs-titles {
+
+.nut-tabs-content {
   display: flex;
-  flex-direction: row;
-  padding: 0 !important;
-  width: 100%;
+  box-sizing: border-box;
 }
-.nut-tabs-vertical .nut-tabs-horizontal .nut-tabs-titles .nut-tabs-titles-item {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex: 1 0 auto;
+.nut-tabs-content-wrap {
+  overflow: hidden;
 }
-.nut-tabs-vertical .nut-tabs-horizontal .nut-tabs-titles .nut-tabs-titles-item-active {
-  color: var(--nutui-color-primary, #ff0f23);
-  font-weight: var(--nutui-tabs-titles-item-active-font-weight, var(--nutui-font-weight-bold, 600));
-  font-size: var(--nutui-tabs-titles-item-active-font-size, var(--nutui-font-size-l, 16px));
+
+[dir=rtl] .nut-tabs-titles-item-smile, [dir=rtl] .nut-tabs-titles-item-line,
+.nut-rtl .nut-tabs-titles-item-smile,
+.nut-rtl .nut-tabs-titles-item-line {
+  left: auto;
+  right: 50%;
+  transform: translate(50%, 0);
 }
-.nut-tabs-vertical .nut-tabs-horizontal .nut-tabs-titles .nut-tabs-titles-item-active .nut-tabs-titles-item-line {
-  content: " ";
-  width: var(--nutui-tabs-tab-line-width, 12px);
-  height: var(--nutui-tabs-tab-line-height, 2px);
-  background: var(--nutui-tabs-tab-line-color, var(--nutui-color-primary, #ff0f23));
+[dir=rtl] .nut-tabs-titles-divider .nut-tabs-titles-item::after,
+.nut-rtl .nut-tabs-titles-divider .nut-tabs-titles-item::after {
+  right: auto;
+  left: 0;
 }
 
 [dir=rtl] .nut-tabs-vertical .nut-tabs-titles-line .nut-tabs-titles-item,
@@ -762,14 +734,6 @@
   transform: translate(50%, 0) rotate(0deg);
 }
 
-.nut-tabs-content {
-  display: flex;
-  box-sizing: border-box;
-}
-.nut-tabs-content-wrap {
-  overflow: hidden;
-}
-
 .nut-cascader {
   width: 100%;
   font-size: var(--nutui-cascader-font-size, var(--nutui-font-size-base, 14px));