@nutui/nutui-react 3.0.0-beta.5 → 3.0.0-beta.6

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

@@ -1,3 +1,7 @@
+/* #ifdef harmony */
+/* #endif */
+/* #ifndef harmony */
+/* #endif */
 .nut-rate {
   display: flex;
   touch-action: pan-x;
@@ -10,12 +14,9 @@
 }
 .nut-rate-item {
   display: flex;
+  align-items: center;
   flex-shrink: 0;
   position: relative;
-  margin-left: var(--nutui-rate-item-margin, 14px);
-}
-.nut-rate-item:first-child {
-  margin-left: 0;
 }
 .nut-rate-item-half {
   position: absolute;
@@ -28,15 +29,40 @@
 .nut-rate-item-half .nut-icon {
   flex-shrink: 0;
 }
+.nut-rate-item-normal {
+  margin-left: var(--nutui-rate-item-margin, 4px);
+}
+.nut-rate-item-normal .nut-icon {
+  height: var(--nutui-rate-icon-size, 12px);
+  width: var(--nutui-rate-icon-size, 12px);
+}
+.nut-rate-item-large {
+  margin-left: calc(var(--nutui-rate-item-margin, 4px) * 2);
+}
+.nut-rate-item-large .nut-icon {
+  height: calc(var(--nutui-rate-icon-size, 12px) + 8px);
+  width: calc(var(--nutui-rate-icon-size, 12px) + 8px);
+}
+.nut-rate-item-small {
+  margin-left: calc(var(--nutui-rate-item-margin, 4px) / 2);
+}
+.nut-rate-item-small .nut-icon {
+  height: calc(var(--nutui-rate-icon-size, 12px) - 4px);
+  width: calc(var(--nutui-rate-icon-size, 12px) - 4px);
+}
+.nut-rate-item-normal:first-child, .nut-rate-item-large:first-child, .nut-rate-item-small:first-child {
+  margin-left: 0;
+}
 .nut-rate-item-icon {
   display: flex;
+  align-items: center;
   cursor: pointer;
 }
 .nut-rate-item-icon .nut-icon {
-  color: var(--nutui-rate-icon-color, var(--nutui-color-primary, #ff0f23));
+  color: var(--nutui-rate-icon-color, var(--nutui-red-6, #ff3333));
 }
 .nut-rate-item-icon-disabled .nut-icon {
-  color: var(--nutui-rate-icon-inactive-color, var(--nutui-color-text-disabled, #c2c4cc));
+  color: var(--nutui-rate-icon-inactive-color, var(--nutui-gray-8, #dadce0));
 }
 .nut-rate-item-icon.nut-rate-item-icon.nut-rate-item-icon-half {
   position: absolute;
@@ -50,15 +76,51 @@
   left: auto;
   transform: none;
 }
+.nut-rate-score {
+  display: inline-flex;
+  align-items: center;
+  color: var(--nutui-rate-font-color, var(--nutui-red-6, #ff3333));
+  font-family: "JD";
+  line-height: 1;
+}
+.nut-rate-score-normal {
+  padding-left: var(--nutui-rate-item-margin, 4px);
+  font-size: var(--nutui-rate-font-size, 12px);
+}
+.nut-rate-score-large {
+  font-size: calc(var(--nutui-rate-font-size, 12px) + 6px);
+  padding-left: calc(var(--nutui-rate-item-margin, 4px) * 2);
+}
+.nut-rate-score-small {
+  font-size: calc(var(--nutui-rate-font-size, 12px) - 2px);
+  padding-left: calc(var(--nutui-rate-item-margin, 4px) / 2);
+}
+.nut-rate-score-disabled {
+  color: var(--nutui-rate-icon-inactive-color, var(--nutui-gray-8, #dadce0));
+}
 
 [dir=rtl] .nut-rate-item,
 .nut-rtl .nut-rate-item {
+  margin-left: 0;
+}
+[dir=rtl] .nut-rate-item:first-child,
+.nut-rtl .nut-rate-item:first-child {
   margin-right: 0;
-  margin-left: var(--nutui-rate-item-margin, 14px);
+}
+[dir=rtl] .nut-rate-item-normal,
+.nut-rtl .nut-rate-item-normal {
+  margin-right: var(--nutui-rate-item-margin, 4px);
+}
+[dir=rtl] .nut-rate-item-large,
+.nut-rtl .nut-rate-item-large {
+  margin-right: calc(var(--nutui-rate-item-margin, 4px) * 2);
+}
+[dir=rtl] .nut-rate-item-small,
+.nut-rtl .nut-rate-item-small {
+  margin-right: calc(var(--nutui-rate-item-margin, 4px) - 2px);
 }
 [dir=rtl] .nut-rate-item:last-child,
 .nut-rtl .nut-rate-item:last-child {
-  margin-right: 0;
   margin-left: 0;
 }
 [dir=rtl] .nut-rate-item-half,
@@ -75,4 +137,20 @@
 .nut-rtl .nut-rate-item-icon.nut-rate-item-icon::before {
   left: auto;
   right: auto;
+}
+[dir=rtl] .nut-rate-score,
+.nut-rtl .nut-rate-score {
+  padding-left: 0;
+}
+[dir=rtl] .nut-rate-score-large,
+.nut-rtl .nut-rate-score-large {
+  padding-right: calc(var(--nutui-rate-item-margin, 4px) * 2);
+}
+[dir=rtl] .nut-rate-score-normal,
+.nut-rtl .nut-rate-score-normal {
+  padding-right: var(--nutui-rate-item-margin, 4px);
+}
+[dir=rtl] .nut-rate-score-small,
+.nut-rtl .nut-rate-score-small {
+  padding-right: calc(var(--nutui-rate-item-margin, 4px) - 2px);
 }

package/dist/es/packages/rate/types.d.ts

@@ -0,0 +1,18 @@
+import { BasicComponent } from "../../utils/typings";
+export type RateSize = 'large' | 'normal' | 'small';
+export interface RateProps extends BasicComponent {
+    size: RateSize;
+    showScore: boolean;
+    count: number;
+    value: number;
+    defaultValue: number;
+    min: number;
+    checkedIcon: React.ReactNode;
+    uncheckedIcon: React.ReactNode;
+    disabled: boolean;
+    readOnly: boolean;
+    allowHalf: boolean;
+    touchable: boolean;
+    onChange: (value: number) => void;
+    onTouchEnd: (e: TouchEvent, value: number) => void;
+}

package/dist/es/packages/rate/types.js

@@ -0,0 +1 @@
+export { };

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

@@ -1,3 +1,7 @@
+/* #ifdef harmony */
+/* #endif */
+/* #ifndef harmony */
+/* #endif */
 .nut-resultpage {
   width: 100%;
   display: flex;

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

@@ -1,3 +1,7 @@
+/* #ifdef harmony */
+/* #endif */
+/* #ifndef harmony */
+/* #endif */
 .nut-row {
   display: flex;
   flex-direction: row;

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

@@ -1,3 +1,7 @@
+/* #ifdef harmony */
+/* #endif */
+/* #ifndef harmony */
+/* #endif */
 .nut-safe-area {
   display: flex;
   width: 100%;

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

@@ -1,3 +1,7 @@
+/* #ifdef harmony */
+/* #endif */
+/* #ifndef harmony */
+/* #endif */
 .nut-searchbar {
   display: flex;
   align-items: center;

package/dist/es/packages/segmented/index.d.ts

@@ -0,0 +1,3 @@
+import { Segmented } from './segmented';
+export type { SegmentedProps, SegmentedItem } from './types';
+export default Segmented;

package/dist/es/packages/segmented/index.js

@@ -0,0 +1,2 @@
+import { Segmented } from "./segmented";
+export default Segmented;

package/dist/es/packages/segmented/segmented.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { SegmentedProps } from './types';
+export declare const Segmented: (props: Partial<SegmentedProps>) => React.JSX.Element;

package/dist/es/packages/segmented/segmented.js

@@ -0,0 +1,63 @@
+import { _ as _define_property } from "@swc/helpers/_/_define_property";
+import { _ as _sliced_to_array } from "@swc/helpers/_/_sliced_to_array";
+import { _ as _type_of } from "@swc/helpers/_/_type_of";
+import React, { useCallback } from "react";
+import classNames from "classnames";
+import { usePropsValue } from "../../utils/use-props-value";
+import { mergeProps } from "../../utils/merge-props";
+var defaultProps = {
+    options: [],
+    onChange: function(value) {}
+};
+export var Segmented = function(props) {
+    var classPrefix = 'nut-segmented';
+    var itemClassPrefix = 'nut-segmented-item';
+    var mergedProps = mergeProps(defaultProps, props);
+    var options = mergedProps.options, onChange = mergedProps.onChange;
+    var _usePropsValue = _sliced_to_array(usePropsValue({
+        value: mergedProps.value,
+        defaultValue: mergedProps.defaultValue,
+        finalValue: 0,
+        onChange: mergedProps.onChange
+    }), 2), value = _usePropsValue[0], setValue = _usePropsValue[1];
+    var renderItems = useCallback(function(options, value) {
+        return options.map(function(option, index) {
+            var optionType = typeof option === "undefined" ? "undefined" : _type_of(option);
+            switch(optionType){
+                case 'object':
+                    // eslint-disable-next-line no-case-declarations
+                    var opt = option;
+                    var _obj;
+                    return /*#__PURE__*/ React.createElement("div", {
+                        className: classNames(itemClassPrefix, (_obj = {}, _define_property(_obj, "".concat(itemClassPrefix, "-active"), opt.value === value), _define_property(_obj, "".concat(opt.className), !!opt.className), _obj)),
+                        key: opt.value,
+                        onClick: function() {
+                            if (opt.disabled) return;
+                            setValue(opt.value);
+                        }
+                    }, opt.icon ? /*#__PURE__*/ React.createElement("span", {
+                        className: "nut-segmented-icon"
+                    }, opt.icon) : null, opt.label);
+                default:
+                    {
+                        if (typeof option !== 'string' && typeof option !== 'number') {
+                            console.warn('Unsupported option type:', optionType);
+                        }
+                        return /*#__PURE__*/ React.createElement("div", {
+                            className: classNames(itemClassPrefix, _define_property({}, "".concat(itemClassPrefix, "-active"), index === value)),
+                            key: option.toString(),
+                            onClick: function() {
+                                setValue(index);
+                            }
+                        }, option);
+                    }
+            }
+        });
+    }, [
+        value
+    ]);
+    return /*#__PURE__*/ React.createElement("div", {
+        className: classNames(classPrefix),
+        style: mergedProps.style
+    }, renderItems(options, value));
+};

package/dist/es/packages/segmented/style/css.js

@@ -0,0 +1 @@
+import './style.css'

package/dist/es/packages/segmented/style/index.js

@@ -0,0 +1 @@
+import './segmented.scss';

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

@@ -0,0 +1,38 @@
+.nut-segmented {
+  display: inline-flex;
+  height: $segmented-height;
+  min-width: 24px;
+  padding: $segmented-padding;
+  align-items: center;
+  border-radius: $segmented-border-radius;
+  background: $color-mask-part;
+  box-sizing: border-box;
+}
+
+.nut-segmented-item {
+  display: flex;
+  height: $segmented-item-height;
+  align-items: center;
+  justify-content: center;
+  padding: $segmented-item-padding;
+  border-radius: $segmented-item-radius;
+  color: $segmented-item-color;
+  font-size: $segmented-item-fontsize;
+  line-height: 1;
+  box-sizing: border-box;
+}
+
+.nut-segmented-item-active {
+  background: $segmented-active-background;
+}
+
+.nut-segmented-icon {
+  height: 10px;
+  width: 10px;
+  margin-right: $segmented-icon-margin-right;
+  .nut-icon {
+    height: 10px;
+    width: 10px;
+    font-size: 10px;
+  }
+}

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

@@ -0,0 +1,42 @@
+/* #ifdef harmony */
+/* #endif */
+/* #ifndef harmony */
+/* #endif */
+.nut-segmented {
+  display: inline-flex;
+  height: var(--nutui-segmented-height, 24px);
+  min-width: 24px;
+  padding: var(--nutui-segmented-padding, var(--nutui-spacing-xxxs, 2px));
+  align-items: center;
+  border-radius: var(--nutui-segmented-radius, var(--nutui-radius-xs, 4px));
+  background: var(--nutui-color-mask-part, rgba(0, 0, 0, 0.4));
+  box-sizing: border-box;
+}
+
+.nut-segmented-item {
+  display: flex;
+  height: var(--nutui-segmented-height, 20px);
+  align-items: center;
+  justify-content: center;
+  padding: var(--nutui-segmented-item-padding, 0 var(--nutui-spacing-xs, 6px));
+  border-radius: var(--nutui-segmented-item-radius, var(--nutui-radius-xs, 4px));
+  color: var(--nutui-segmented-item-color, var(--nutui-color-primary-text, #ffffff));
+  font-size: var(--nutui-segmented-item-fontsize, var(--nutui-font-size-s, 12px));
+  line-height: 1;
+  box-sizing: border-box;
+}
+
+.nut-segmented-item-active {
+  background: var(--nutui-segmented-active-background, var(--nutui-color-mask-part, rgba(0, 0, 0, 0.4)));
+}
+
+.nut-segmented-icon {
+  height: 10px;
+  width: 10px;
+  margin-right: var(--nutui-segmented-icon-margin-right, var(--nutui-spacing-xxxs, 2px));
+}
+.nut-segmented-icon .nut-icon {
+  height: 10px;
+  width: 10px;
+  font-size: 10px;
+}

package/dist/es/packages/segmented/types.d.ts

@@ -0,0 +1,15 @@
+import { ReactNode } from 'react';
+import { BasicComponent } from "../../utils/typings";
+export interface SegmentedItem {
+    label: ReactNode;
+    value: string | number;
+    icon?: ReactNode;
+    disabled?: boolean;
+    className?: string;
+}
+export interface SegmentedProps extends BasicComponent {
+    options: string[] | number[] | SegmentedItem[];
+    value: string | number;
+    defaultValue: string | number;
+    onChange: (value: string | number) => void;
+}

package/dist/es/packages/segmented/types.js

@@ -0,0 +1 @@
+export { };

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

@@ -1,4 +1,8 @@
 @charset "UTF-8";
+/* #ifdef harmony */
+/* #endif */
+/* #ifndef harmony */
+/* #endif */
 .nut-overlay {
   /* #ifdef rn */
   position: absolute;
@@ -146,9 +150,6 @@
   bottom: 0;
   left: 0;
   width: 100%;
-  /* #ifdef rn */
-  height: 300px;
-  /* #endif */
 }
 .nut-popup-bottom.nut-popup-round {
   border-radius: var(--nutui-popup-border-radius, 24px) var(--nutui-popup-border-radius, 24px) 0 0;

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

@@ -1,4 +1,8 @@
 @charset "UTF-8";
+/* #ifdef harmony */
+/* #endif */
+/* #ifndef harmony */
+/* #endif */
 .nut-overlay {
   /* #ifdef rn */
   position: absolute;
@@ -146,9 +150,6 @@
   bottom: 0;
   left: 0;
   width: 100%;
-  /* #ifdef rn */
-  height: 300px;
-  /* #endif */
 }
 .nut-popup-bottom.nut-popup-round {
   border-radius: var(--nutui-popup-border-radius, 24px) var(--nutui-popup-border-radius, 24px) 0 0;

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

@@ -1,3 +1,7 @@
+/* #ifdef harmony */
+/* #endif */
+/* #ifndef harmony */
+/* #endif */
 .nut-subsidenavbar-item {
   height: var(--nutui-sidenavbar-item-height, 40px);
   color: var(--nutui-sidenavbar-sub-item-color, var(--nutui-color-text, #505259));

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

@@ -1,3 +1,7 @@
+/* #ifdef harmony */
+/* #endif */
+/* #ifndef harmony */
+/* #endif */
 .nut-signature .spcanvas_WEAPP {
   width: 100%;
   height: 100%;

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

@@ -1,3 +1,7 @@
+/* #ifdef harmony */
+/* #endif */
+/* #ifndef harmony */
+/* #endif */
 .nut-image {
   display: block;
   position: relative;

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

@@ -1,3 +1,7 @@
+/* #ifdef harmony */
+/* #endif */
+/* #ifndef harmony */
+/* #endif */
 .nut-space {
   display: flex;
 }

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

@@ -1,3 +1,7 @@
+/* #ifdef harmony */
+/* #endif */
+/* #ifndef harmony */
+/* #endif */
 .nut-step {
   flex-grow: 0;
   flex-shrink: 0;

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

@@ -1,3 +1,7 @@
+/* #ifdef harmony */
+/* #endif */
+/* #ifndef harmony */
+/* #endif */
 .nut-step {
   flex-grow: 0;
   flex-shrink: 0;

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

@@ -1,3 +1,7 @@
+/* #ifdef harmony */
+/* #endif */
+/* #ifndef harmony */
+/* #endif */
 .nut-sticky-fixed {
   position: fixed;
 }

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

@@ -1,3 +1,7 @@
+/* #ifdef harmony */
+/* #endif */
+/* #ifndef harmony */
+/* #endif */
 .nut-subsidenavbar-title {
   height: var(--nutui-sidenavbar-item-height, 40px);
   padding: var(--nutui-sidenavbar-sub-title-padding, 10px 8px 10px 35px);

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

@@ -1,3 +1,7 @@
+/* #ifdef harmony */
+/* #endif */
+/* #ifndef harmony */
+/* #endif */
 .nut-swipe {
   display: flex;
   flex-direction: row;

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

@@ -1,3 +1,7 @@
+/* #ifdef harmony */
+/* #endif */
+/* #ifndef harmony */
+/* #endif */
 .nut-indicator {
   display: flex;
   flex-direction: row;

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

@@ -1,3 +1,7 @@
+/* #ifdef harmony */
+/* #endif */
+/* #ifndef harmony */
+/* #endif */
 .nut-swiper-item {
   height: 100%;
 }

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

@@ -1,71 +1,91 @@
+/* #ifdef harmony */
+/* #endif */
+/* #ifndef harmony */
+/* #endif */
 .nut-switch {
   cursor: pointer;
+  position: relative;
   display: flex;
   flex-direction: row;
   align-items: center;
-  width: var(--nutui-switch-width, 40px);
-  height: var(--nutui-switch-height, 24px);
-  line-height: var(--nutui-switch-line-height, 24px);
-  background-color: var(--nutui-switch-open-background-color, var(--nutui-color-primary, #ff0f23));
-  border-radius: var(--nutui-switch-border-radius, 8px);
+  min-width: var(--nutui-switch-width, 46px);
+  height: var(--nutui-switch-height, 28px);
+  line-height: var(--nutui-switch-line-height, 28px);
+  background-color: var(--nutui-switch-active-background-color, var(--nutui-color-primary, #ff0f23));
+  border-radius: var(--nutui-switch-border-radius, 50px);
   background-size: 100% 100%;
   background-repeat: no-repeat;
   background-position: center center;
   flex: 0 0 auto;
 }
 .nut-switch-button {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
   display: flex;
   flex-direction: row;
   align-items: center;
   justify-content: center;
-  height: var(--nutui-switch-inside-height, 20px);
-  width: var(--nutui-switch-inside-width, 20px);
-  transform: var(--nutui-switch-inside-close-transform, translateX(2px));
-  border-radius: var(--nutui-switch-inside-border-radius, var(--nutui-radius-s, 6px));
+  height: calc(var(--nutui-switch-height, 28px) - var(--nutui-switch-border-width, 2px) * 2);
+  width: calc(var(--nutui-switch-height, 28px) - var(--nutui-switch-border-width, 2px) * 2);
+  border-radius: var(--nutui-switch-inside-border-radius, 50%);
   background: var(--nutui-color-primary-text, #ffffff);
-  transition: transform 0.3s;
-  box-shadow: var(--nutui-switch-box-shadow, 0 0 transparent);
+  transition: left 0.3s linear;
+  box-shadow: var(--nutui-switch-inside-box-shadow, 0px 2px 6px 0px rgba(0, 0, 0, 0.1));
 }
 .nut-switch-button-open {
-  transform: var(--nutui-switch-inside-open-transform, translateX(18px));
+  left: calc(100% - var(--nutui-switch-height, 28px) + var(--nutui-switch-border-width, 2px));
 }
 .nut-switch-button-open-rtl {
-  transform: var(--nutui-switch-inside-open-transform, translateX(-18px));
+  left: var(--nutui-switch-border-width, 2px);
 }
 .nut-switch-button-close {
-  transform: var(--nutui-switch-inside-close-transform, translateX(2px));
+  left: var(--nutui-switch-border-width, 2px);
 }
 .nut-switch-button-close-rtl {
-  transform: var(--nutui-switch-inside-close-transform, translateX(-2px));
+  left: calc(100% - var(--nutui-switch-height, 28px) + var(--nutui-switch-border-width, 2px));
 }
 .nut-switch-close {
-  background-color: var(--nutui-switch-close-background-color, var(--nutui-color-text-disabled, #c2c4cc));
+  background-color: var(--nutui-switch-inactive-background-color, var(--nutui-color-text-disabled, #c2c4cc));
 }
 .nut-switch-close-line {
-  width: 12px;
+  width: calc((var(--nutui-switch-height, 28px) - var(--nutui-switch-border-width, 2px) * 2) / 2);
   height: 2px;
-  background: var(--nutui-switch-close-line-background-color, #fff);
+  background: var(--nutui-switch-inactive-line-background-color, #ffffff);
   border-radius: 2px;
 }
-.nut-switch-disabled {
-  background-color: var(--nutui-switch-open-disabled-background-color, var(--nutui-color-primary-disabled-special, #ffadbe));
-}
-.nut-switch-disabled-close {
-  background-color: var(--nutui-switch-close-disabled-background-color, var(--nutui-color-background, #f5f6fa));
-}
 .nut-switch-label {
-  color: var(--nutui-color-primary-text, #ffffff);
-  font-size: var(--nutui-font-size-s, 12px);
+  display: inline-flex;
+  align-items: center;
+  height: 100%;
+  white-space: nowrap;
+  color: var(--nutui-switch-label-text-color, var(--nutui-color-primary-text, #ffffff));
+  font-size: var(--nutui-switch-label-font-size, var(--nutui-font-size-s, 12px));
+}
+.nut-switch-label .nut-icon {
+  color: var(--nutui-switch-label-text-color, var(--nutui-color-primary-text, #ffffff));
 }
 .nut-switch-label-open {
-  transform: translateX(-18px);
+  margin: 0 calc(var(--nutui-switch-height, 28px) - var(--nutui-switch-border-width, 2px) + 3px) 0 7px;
 }
 .nut-switch-label-open-rtl {
-  transform: translateX(18px);
+  margin: 0 7px 0 calc(var(--nutui-switch-height, 28px) - var(--nutui-switch-border-width, 2px) + 3px);
 }
 .nut-switch-label-close {
-  transform: translateX(18px);
+  margin: 0 7px 0 calc(var(--nutui-switch-height, 28px) - var(--nutui-switch-border-width, 2px) + 3px);
 }
 .nut-switch-label-close-rtl {
-  transform: translateX(-18px);
+  margin: 0 calc(var(--nutui-switch-height, 28px) - var(--nutui-switch-border-width, 2px) + 3px) 0 7px;
+}
+.nut-switch-label-close-disabled {
+  color: var(--nutui-switch-inactive-disabled-label-text-color, var(--nutui-color-text-disabled, #c2c4cc));
+}
+.nut-switch-label-close-disabled .nut-icon {
+  color: var(--nutui-switch-inactive-disabled-label-text-color, var(--nutui-color-text-disabled, #c2c4cc));
+}
+.nut-switch-disabled {
+  background-color: var(--nutui-switch-active-disabled-background-color, var(--nutui-color-primary-disabled-special, #ffadbe));
+}
+.nut-switch-disabled-close {
+  background-color: var(--nutui-switch-inactive-disabled-background-color, var(--nutui-color-background, #f5f6fa));
 }