@nutui/nutui-react 4.0.0-beta.2 → 4.0.0-beta.4

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

@@ -14,6 +14,37 @@
     }
   }
 
+  &-horizontal {
+    flex-direction: row;
+    align-items: center;
+  }
+
+  &-vertical {
+    flex-direction: column;
+    align-items: center;
+  }
+
+  &-list {
+    display: flex;
+    align-items: center;
+  }
+
+  &-label {
+    color: $rate-label-color;
+    white-space: nowrap;
+  }
+
+  &-labels {
+    display: flex;
+    width: 100%;
+
+    &-item {
+      flex: 1;
+      text-align: center;
+      color: $rate-label-color;
+    }
+  }
+
   &-item {
     display: flex;
     align-items: center;
@@ -33,38 +64,6 @@
       }
     }
 
-    &-normal {
-      margin-left: $rate-item-margin;
-      .nut-icon {
-        height: $rate-icon-size;
-        width: $rate-icon-size;
-      }
-    }
-
-    &-large {
-      margin-left: calc($rate-item-margin * 2);
-      .nut-icon {
-        height: calc($rate-icon-size + scale-px(8px));
-        width: calc($rate-icon-size + scale-px(8px));
-      }
-    }
-
-    &-small {
-      margin-left: calc($rate-item-margin / 2);
-      .nut-icon {
-        height: calc($rate-icon-size - scale-px(4px));
-        width: calc($rate-icon-size - scale-px(4px));
-      }
-    }
-
-    &-normal,
-    &-large,
-    &-small {
-      &:first-child {
-        margin-left: 0;
-      }
-    }
-
     &-icon {
       display: flex;
       align-items: center;
@@ -93,6 +92,10 @@
         left: auto;
         transform: none;
       }
+
+      &-animate {
+        animation: nut-rate-bounce 0.3s ease-in-out;
+      }
     }
   }
 
@@ -107,85 +110,250 @@
     color: $rate-font-color;
     font-family: 'JDZH-Regular';
 
-    &-normal {
-      padding-left: $rate-item-margin;
-      font-size: $rate-font-size;
+    &-disabled {
+      color: $rate-icon-inactive-color;
+    }
+  }
+
+  // horizontal layout
+  &-horizontal {
+    .nut-rate-item {
+      margin-left: $rate-item-margin;
+      &:first-child {
+        margin-left: 0;
+      }
+    }
+
+    // 12DP - star gap 2px
+    .nut-rate-item-small {
+      margin-left: scale-px(2px);
+      &:first-child {
+        margin-left: 0;
+      }
+      .nut-icon {
+        height: scale-font-px(12px);
+        width: scale-font-px(12px);
+      }
+    }
+
+    .nut-rate-item-normal {
+      .nut-icon {
+        height: scale-font-px(16px);
+        width: scale-font-px(16px);
+      }
+    }
+
+    .nut-rate-item-large {
+      .nut-icon {
+        height: scale-font-px(20px);
+        width: scale-font-px(20px);
+      }
+    }
+
+    .nut-rate-label-small {
+      font-size: $font-size-s;
+      margin-right: scale-px(4px);
+    }
+
+    .nut-rate-label-normal {
+      font-size: $font-size-s;
+      margin-right: scale-px(12px);
+    }
+
+    .nut-rate-label-large {
+      font-size: $font-size-base;
+      margin-right: scale-px(12px);
+    }
+
+    .nut-rate-score-small {
+      padding-left: scale-px(4px);
+      font-size: $font-size-s;
       line-height: $line-height-s;
     }
 
-    &-large {
-      font-size: $rate-font-size-large;
-      line-height: $line-height-xl;
-      padding-left: calc($rate-item-margin * 2);
+    .nut-rate-score-normal {
+      padding-left: scale-px(12px);
+      font-size: $font-size-s;
+      line-height: $line-height-s;
     }
 
-    &-small {
-      font-size: $rate-font-size-small;
-      line-height: $line-height-xxs;
-      padding-left: calc($rate-item-margin / 2);
+    .nut-rate-score-large {
+      padding-left: scale-px(12px);
+      font-size: $font-size-base;
+      line-height: $line-height-base;
     }
+  }
 
-    &-disabled {
-      color: $rate-icon-inactive-color;
+  // vertical layout
+  &-vertical {
+    .nut-rate-list {
+      justify-content: center;
+      width: 100%;
+    }
+
+    .nut-rate-item {
+      margin-left: $rate-item-margin;
+      &:first-child {
+        margin-left: 0;
+      }
+    }
+
+    .nut-rate-item-small,
+    .nut-rate-item-normal {
+      .nut-icon {
+        height: scale-font-px(20px);
+        width: scale-font-px(20px);
+      }
+    }
+
+    .nut-rate-item-large {
+      flex: 1;
+      justify-content: center;
+
+      .nut-icon {
+        height: scale-font-px(28px);
+        width: scale-font-px(28px);
+      }
+    }
+
+    .nut-rate-label-small,
+    .nut-rate-label-normal {
+      font-size: $font-size-xs;
+      margin-top: scale-px(6px);
+    }
+
+    .nut-rate-label-large {
+      font-size: $font-size-s;
+      margin-top: scale-px(8px);
+    }
+
+    .nut-rate-labels {
+      width: 100%;
+    }
+
+    .nut-rate-labels-small,
+    .nut-rate-labels-normal {
+      margin-top: scale-px(6px);
+
+      .nut-rate-labels-item {
+        font-size: $font-size-xs;
+      }
+    }
+
+    .nut-rate-labels-large {
+      margin-top: scale-px(8px);
+
+      .nut-rate-labels-item {
+        font-size: $font-size-s;
+      }
+    }
+
+    .nut-rate-score-small,
+    .nut-rate-score-normal {
+      font-size: $font-size-xs;
+      line-height: $line-height-xs;
+      margin-top: scale-px(6px);
+    }
+
+    .nut-rate-score-large {
+      font-size: $font-size-s;
+      line-height: $line-height-s;
+      margin-top: scale-px(8px);
     }
   }
 }
 
+@keyframes nut-rate-bounce {
+  0% {
+    transform: scale(1);
+  }
+  50% {
+    transform: scale(1.25);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+
 [dir='rtl'] .nut-rate,
 .nut-rtl .nut-rate {
-  &-item {
-    margin-left: 0;
-    &:first-child {
+  &-horizontal {
+    .nut-rate-item {
+      margin-left: 0;
+      margin-right: $rate-item-margin;
+
+      &:first-child {
+        margin-right: 0;
+      }
+    }
+
+    .nut-rate-item-small {
+      margin-left: 0;
+      margin-right: scale-px(2px);
+
+      &:first-child {
+        margin-right: 0;
+      }
+    }
+
+    .nut-rate-label {
       margin-right: 0;
     }
 
-    &-normal {
-      margin-right: $rate-item-margin;
+    .nut-rate-label-small {
+      margin-left: scale-px(4px);
     }
 
-    &-large {
-      margin-right: calc($rate-item-margin * 2);
+    .nut-rate-label-normal {
+      margin-left: scale-px(12px);
     }
 
-    &-small {
-      margin-right: calc($rate-item-margin - scale-px(2px));
+    .nut-rate-label-large {
+      margin-left: scale-px(12px);
     }
 
-    &:last-child {
-      margin-left: 0;
+    .nut-rate-score {
+      padding-left: 0;
     }
 
-    &-half {
-      left: auto;
-      right: 0;
+    .nut-rate-score-small {
+      padding-right: scale-px(4px);
     }
 
-    &-icon {
-      &.nut-rate-item-icon.nut-rate-item-icon-half {
-        left: auto;
-        right: 0;
-      }
+    .nut-rate-score-normal {
+      padding-right: scale-px(12px);
+    }
 
-      &.nut-rate-item-icon::before {
-        left: auto;
-        right: auto;
-      }
+    .nut-rate-score-large {
+      padding-right: scale-px(12px);
     }
   }
 
-  &-score {
-    padding-left: 0;
+  &-vertical {
+    .nut-rate-item {
+      margin-left: 0;
+      margin-right: $rate-item-margin;
 
-    &-large {
-      padding-right: calc($rate-item-margin * 2);
+      &:first-child {
+        margin-right: 0;
+      }
     }
+  }
 
-    &-normal {
-      padding-right: $rate-item-margin;
+  &-item-half {
+    left: auto;
+    right: 0;
+  }
+
+  &-item-icon {
+    &.nut-rate-item-icon.nut-rate-item-icon-half {
+      left: auto;
+      right: 0;
     }
 
-    &-small {
-      padding-right: calc($rate-item-margin - scale-px(2px));
+    &.nut-rate-item-icon::before {
+      left: auto;
+      right: auto;
     }
   }
 }

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

@@ -12,6 +12,31 @@
 .nut-rate.readonly .nut-rate-item-icon {
   cursor: default;
 }
+.nut-rate-horizontal {
+  flex-direction: row;
+  align-items: center;
+}
+.nut-rate-vertical {
+  flex-direction: column;
+  align-items: center;
+}
+.nut-rate-list {
+  display: flex;
+  align-items: center;
+}
+.nut-rate-label {
+  color: var(--nutui-rate-label-color, var(--nutui-color-text-disabled));
+  white-space: nowrap;
+}
+.nut-rate-labels {
+  display: flex;
+  width: 100%;
+}
+.nut-rate-labels-item {
+  flex: 1;
+  text-align: center;
+  color: var(--nutui-rate-label-color, var(--nutui-color-text-disabled));
+}
 .nut-rate-item {
   display: flex;
   align-items: center;
@@ -29,30 +54,6 @@
 .nut-rate-item-half .nut-icon {
   flex-shrink: 0;
 }
-.nut-rate-item-normal {
-  margin-left: var(--nutui-rate-item-margin, 14px);
-}
-.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, 14px) * 2);
-}
-.nut-rate-item-large .nut-icon {
-  height: calc(var(--nutui-rate-icon-size, 12px) + scale-px(8px));
-  width: calc(var(--nutui-rate-icon-size, 12px) + scale-px(8px));
-}
-.nut-rate-item-small {
-  margin-left: calc(var(--nutui-rate-item-margin, 14px) / 2);
-}
-.nut-rate-item-small .nut-icon {
-  height: calc(var(--nutui-rate-icon-size, 12px) - scale-px(4px));
-  width: calc(var(--nutui-rate-icon-size, 12px) - scale-px(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;
@@ -76,6 +77,9 @@
   left: auto;
   transform: none;
 }
+.nut-rate-item-icon-animate {
+  animation: nut-rate-bounce 0.3s ease-in-out;
+}
 .nut-rate-score {
   /* #ifdef dynamic*/
   display: flex;
@@ -87,48 +91,190 @@
   color: var(--nutui-rate-font-color, var(--nutui-color-primary-icon, #ff3333));
   font-family: "JDZH-Regular";
 }
-.nut-rate-score-normal {
-  padding-left: var(--nutui-rate-item-margin, 14px);
-  font-size: var(--nutui-rate-font-size, 12px);
+.nut-rate-score-disabled {
+  color: var(--nutui-rate-icon-inactive-color, var(--nutui-color-text-disabled));
+}
+.nut-rate-horizontal .nut-rate-item {
+  margin-left: var(--nutui-rate-item-margin, 14px);
+}
+.nut-rate-horizontal .nut-rate-item:first-child {
+  margin-left: 0;
+}
+.nut-rate-horizontal .nut-rate-item-small {
+  margin-left: scale-px(2px);
+}
+.nut-rate-horizontal .nut-rate-item-small:first-child {
+  margin-left: 0;
+}
+.nut-rate-horizontal .nut-rate-item-small .nut-icon {
+  height: scale-font-px(12px);
+  width: scale-font-px(12px);
+}
+.nut-rate-horizontal .nut-rate-item-normal .nut-icon {
+  height: scale-font-px(16px);
+  width: scale-font-px(16px);
+}
+.nut-rate-horizontal .nut-rate-item-large .nut-icon {
+  height: scale-font-px(20px);
+  width: scale-font-px(20px);
+}
+.nut-rate-horizontal .nut-rate-label-small {
+  font-size: var(--nutui-font-text-small);
+  margin-right: scale-px(4px);
+}
+.nut-rate-horizontal .nut-rate-label-normal {
+  font-size: var(--nutui-font-text-small);
+  margin-right: scale-px(12px);
+}
+.nut-rate-horizontal .nut-rate-label-large {
+  font-size: var(--nutui-font-text);
+  margin-right: scale-px(12px);
+}
+.nut-rate-horizontal .nut-rate-score-small {
+  padding-left: scale-px(4px);
+  font-size: var(--nutui-font-text-small);
   line-height: var(--nutui-line-height-s, var(--nutui-font-text-small));
 }
-.nut-rate-score-large {
-  font-size: var(--nutui-rate-font-size-large, calc(var(--nutui-rate-font-size, 12px) + 6px));
-  line-height: var(--nutui-line-height-xl, var(--nutui-font-h2));
-  padding-left: calc(var(--nutui-rate-item-margin, 14px) * 2);
+.nut-rate-horizontal .nut-rate-score-normal {
+  padding-left: scale-px(12px);
+  font-size: var(--nutui-font-text-small);
+  line-height: var(--nutui-line-height-s, var(--nutui-font-text-small));
 }
-.nut-rate-score-small {
-  font-size: var(--nutui-rate-font-size-small, calc(var(--nutui-rate-font-size, 12px) - 2px));
-  line-height: var(--nutui-line-height-xxs, var(--nutui-font-text-mini));
-  padding-left: calc(var(--nutui-rate-item-margin, 14px) / 2);
+.nut-rate-horizontal .nut-rate-score-large {
+  padding-left: scale-px(12px);
+  font-size: var(--nutui-font-text);
+  line-height: var(--nutui-line-height-base, var(--nutui-line-height, var(--nutui-font-text)));
 }
-.nut-rate-score-disabled {
-  color: var(--nutui-rate-icon-inactive-color, var(--nutui-color-text-disabled));
+.nut-rate-vertical .nut-rate-list {
+  justify-content: center;
+  width: 100%;
+}
+.nut-rate-vertical .nut-rate-item {
+  margin-left: var(--nutui-rate-item-margin, 14px);
+}
+.nut-rate-vertical .nut-rate-item:first-child {
+  margin-left: 0;
+}
+.nut-rate-vertical .nut-rate-item-small .nut-icon,
+.nut-rate-vertical .nut-rate-item-normal .nut-icon {
+  height: scale-font-px(20px);
+  width: scale-font-px(20px);
+}
+.nut-rate-vertical .nut-rate-item-large {
+  flex: 1;
+  justify-content: center;
+}
+.nut-rate-vertical .nut-rate-item-large .nut-icon {
+  height: scale-font-px(28px);
+  width: scale-font-px(28px);
+}
+.nut-rate-vertical .nut-rate-label-small,
+.nut-rate-vertical .nut-rate-label-normal {
+  font-size: var(--nutui-font-text-xs);
+  margin-top: scale-px(6px);
+}
+.nut-rate-vertical .nut-rate-label-large {
+  font-size: var(--nutui-font-text-small);
+  margin-top: scale-px(8px);
+}
+.nut-rate-vertical .nut-rate-labels {
+  width: 100%;
+}
+.nut-rate-vertical .nut-rate-labels-small,
+.nut-rate-vertical .nut-rate-labels-normal {
+  margin-top: scale-px(6px);
+}
+.nut-rate-vertical .nut-rate-labels-small .nut-rate-labels-item,
+.nut-rate-vertical .nut-rate-labels-normal .nut-rate-labels-item {
+  font-size: var(--nutui-font-text-xs);
+}
+.nut-rate-vertical .nut-rate-labels-large {
+  margin-top: scale-px(8px);
+}
+.nut-rate-vertical .nut-rate-labels-large .nut-rate-labels-item {
+  font-size: var(--nutui-font-text-small);
+}
+.nut-rate-vertical .nut-rate-score-small,
+.nut-rate-vertical .nut-rate-score-normal {
+  font-size: var(--nutui-font-text-xs);
+  line-height: var(--nutui-line-height-xs, var(--nutui-font-text-xs));
+  margin-top: scale-px(6px);
+}
+.nut-rate-vertical .nut-rate-score-large {
+  font-size: var(--nutui-font-text-small);
+  line-height: var(--nutui-line-height-s, var(--nutui-font-text-small));
+  margin-top: scale-px(8px);
 }
 
-[dir=rtl] .nut-rate-item,
-.nut-rtl .nut-rate-item {
+@keyframes nut-rate-bounce {
+  0% {
+    transform: scale(1);
+  }
+  50% {
+    transform: scale(1.25);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+[dir=rtl] .nut-rate-horizontal .nut-rate-item,
+.nut-rtl .nut-rate-horizontal .nut-rate-item {
   margin-left: 0;
+  margin-right: var(--nutui-rate-item-margin, 14px);
 }
-[dir=rtl] .nut-rate-item:first-child,
-.nut-rtl .nut-rate-item:first-child {
+[dir=rtl] .nut-rate-horizontal .nut-rate-item:first-child,
+.nut-rtl .nut-rate-horizontal .nut-rate-item:first-child {
   margin-right: 0;
 }
-[dir=rtl] .nut-rate-item-normal,
-.nut-rtl .nut-rate-item-normal {
-  margin-right: var(--nutui-rate-item-margin, 14px);
+[dir=rtl] .nut-rate-horizontal .nut-rate-item-small,
+.nut-rtl .nut-rate-horizontal .nut-rate-item-small {
+  margin-left: 0;
+  margin-right: scale-px(2px);
+}
+[dir=rtl] .nut-rate-horizontal .nut-rate-item-small:first-child,
+.nut-rtl .nut-rate-horizontal .nut-rate-item-small:first-child {
+  margin-right: 0;
+}
+[dir=rtl] .nut-rate-horizontal .nut-rate-label,
+.nut-rtl .nut-rate-horizontal .nut-rate-label {
+  margin-right: 0;
+}
+[dir=rtl] .nut-rate-horizontal .nut-rate-label-small,
+.nut-rtl .nut-rate-horizontal .nut-rate-label-small {
+  margin-left: scale-px(4px);
+}
+[dir=rtl] .nut-rate-horizontal .nut-rate-label-normal,
+.nut-rtl .nut-rate-horizontal .nut-rate-label-normal {
+  margin-left: scale-px(12px);
+}
+[dir=rtl] .nut-rate-horizontal .nut-rate-label-large,
+.nut-rtl .nut-rate-horizontal .nut-rate-label-large {
+  margin-left: scale-px(12px);
+}
+[dir=rtl] .nut-rate-horizontal .nut-rate-score,
+.nut-rtl .nut-rate-horizontal .nut-rate-score {
+  padding-left: 0;
 }
-[dir=rtl] .nut-rate-item-large,
-.nut-rtl .nut-rate-item-large {
-  margin-right: calc(var(--nutui-rate-item-margin, 14px) * 2);
+[dir=rtl] .nut-rate-horizontal .nut-rate-score-small,
+.nut-rtl .nut-rate-horizontal .nut-rate-score-small {
+  padding-right: scale-px(4px);
 }
-[dir=rtl] .nut-rate-item-small,
-.nut-rtl .nut-rate-item-small {
-  margin-right: calc(var(--nutui-rate-item-margin, 14px) - scale-px(2px));
+[dir=rtl] .nut-rate-horizontal .nut-rate-score-normal,
+.nut-rtl .nut-rate-horizontal .nut-rate-score-normal {
+  padding-right: scale-px(12px);
 }
-[dir=rtl] .nut-rate-item:last-child,
-.nut-rtl .nut-rate-item:last-child {
+[dir=rtl] .nut-rate-horizontal .nut-rate-score-large,
+.nut-rtl .nut-rate-horizontal .nut-rate-score-large {
+  padding-right: scale-px(12px);
+}
+[dir=rtl] .nut-rate-vertical .nut-rate-item,
+.nut-rtl .nut-rate-vertical .nut-rate-item {
   margin-left: 0;
+  margin-right: var(--nutui-rate-item-margin, 14px);
+}
+[dir=rtl] .nut-rate-vertical .nut-rate-item:first-child,
+.nut-rtl .nut-rate-vertical .nut-rate-item:first-child {
+  margin-right: 0;
 }
 [dir=rtl] .nut-rate-item-half,
 .nut-rtl .nut-rate-item-half {
@@ -144,20 +290,4 @@
 .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, 14px) * 2);
-}
-[dir=rtl] .nut-rate-score-normal,
-.nut-rtl .nut-rate-score-normal {
-  padding-right: var(--nutui-rate-item-margin, 14px);
-}
-[dir=rtl] .nut-rate-score-small,
-.nut-rtl .nut-rate-score-small {
-  padding-right: calc(var(--nutui-rate-item-margin, 14px) - scale-px(2px));
 }