diff --git a/src/packages/rate/demo.tsx b/src/packages/rate/demo.tsx
index 77bd05d46b586d187d7dca02401392ffd5196291..bb59b8e54143e93ed5d02e5f966afacc02846ecd 100644
--- a/src/packages/rate/demo.tsx
+++ b/src/packages/rate/demo.tsx
@@ -52,8 +52,8 @@ const RateDemo = () => {
|
-
{translated.halfStar}
+ {translated.halfStar}
|
diff --git a/src/packages/rate/rate.scss b/src/packages/rate/rate.scss
index 49bc3d708af87257c5afd5f5dbe49810270e5f56..b983bc5ca861955cfb970d89ecee079fdc15b66d 100644
--- a/src/packages/rate/rate.scss
+++ b/src/packages/rate/rate.scss
@@ -2,21 +2,32 @@
.nut-rate {
display: flex;
+
&-item {
display: flex;
flex-shrink: 0;
position: relative;
+ &__half {
+ position: absolute;
+ height: 100%;
+ width: 50% !important;
+ left: 0;
+ top: 0;
+ overflow: hidden;
+ }
+
&__icon {
color: $rate-icon-color;
cursor: pointer;
+
&--disabled {
color: $rate-icon-void-color;
}
&.nut-rate-item__icon.nut-rate-item__icon--half {
position: absolute;
- width: 50% !important;
+ // width: 50% !important;
left: 0;
top: 0;
overflow: hidden;
diff --git a/src/packages/rate/rate.tsx b/src/packages/rate/rate.tsx
index 4d774a4cc44508780dab73cc2f5bd102dbb6527d..0b96eb9a3133cae08f8e634fd733185252bd4c9e 100644
--- a/src/packages/rate/rate.tsx
+++ b/src/packages/rate/rate.tsx
@@ -1,7 +1,7 @@
import React, { FunctionComponent, useEffect, useState } from 'react'
import classNames from 'classnames'
+import { StarFillN } from '@nutui/icons-react'
import bem from '@/utils/bem'
-import Icon from '@/packages/icon'
import { BasicComponent, ComponentDefaults } from '@/utils/typings'
@@ -12,8 +12,7 @@ export interface RateProps extends BasicComponent {
iconSize: string | number
activeColor: string
voidColor: string
- checkedIcon: string
- uncheckedIcon: string
+ checkedIcon: React.ReactNode
disabled: boolean
readonly: boolean
allowHalf: boolean
@@ -29,8 +28,7 @@ const defaultProps = {
iconSize: 18,
activeColor: '',
voidColor: '',
- checkedIcon: 'star-fill-n',
- uncheckedIcon: 'star-n',
+ checkedIcon: null,
disabled: false,
readonly: false,
allowHalf: false,
@@ -47,14 +45,11 @@ export const Rate: FunctionComponent> = (props) => {
activeColor,
voidColor,
checkedIcon,
- uncheckedIcon,
disabled,
readonly,
allowHalf,
spacing,
onChange,
- iconClassPrefix,
- iconFontClassName,
} = {
...defaultProps,
...props,
@@ -109,38 +104,44 @@ export const Rate: FunctionComponent> = (props) => {
onClick={(event) => onClick(event, n)}
style={{ marginRight: pxCheck(spacing) }}
>
- score,
- })}
- name={n <= score ? checkedIcon : uncheckedIcon}
- color={n <= score ? activeColor : voidColor}
- />
- {allowHalf && score > n - 1 && (
-
- )}
- {allowHalf && score < n - 1 && (
-
- )}
+ <>
+ {checkedIcon || (
+ score,
+ })}
+ />
+ )}
+ {(allowHalf && score > n - 1 && (
+
+ {checkedIcon || (
+
+ )}
+
+ )) ||
+ (allowHalf && score < n - 1 && (
+
+ {checkedIcon || (
+
+ )}
+
+ ))}
+ >
)
})}