Rate

Rate component.

When To Use#

  • Show evaluation.
  • A quick rating operation on something.
import { NzRateModule } from 'ng-zorro-antd/rate';

Examples

Basic

The simplest usage.

expand codeexpand code
      Loading...
normal
Show copywriting

Add copywriting in rate components.

expand codeexpand code
      Loading...
allowClear: true
allowClear: false
Clear star

Support set allow to clear star when click again.

expand codeexpand code
      Loading...
  • 1
    1
  • 2
    2
  • 3
    3
  • 4
    4
  • 5
    5


Customize Character

Each character can be customized by index.

expand codeexpand code
      Loading...
Half star

Support select half star.

expand codeexpand code
      Loading...
Read only

Read only, can't use mouse to interact.

expand codeexpand code
      Loading...

  • A
    A
  • A
    A
  • A
    A
  • A
    A
  • A
    A

  • 好
    好
  • 好
    好
  • 好
    好
  • 好
    好
  • 好
    好
Other Character

Replace the default star to other character like alphabet, digit, iconfont or even Chinese word.

expand codeexpand code
      Loading...

API#

nz-rate#

PropertyDescriptiontypeDefaultGlobal Config
[nzAllowClear]whether to allow clear when click againbooleantrue✅
[nzAllowHalf]whether to allow semi selectionbooleanfalse✅
[nzAutoFocus]get focus when component mountedbooleanfalse
[nzCharacter]custom character of rateTemplateRef<void><span nz-icon nzType="star"></span>
[nzCount]star countnumber5
[nzDisabled]read only, unable to interactbooleanfalse
[nzTooltips]Customize tooltip by each characterstring[][]
[ngModel]current value , double bindingnumber-
(ngModelChange)callback when select valueEventEmitter<number>-
(nzOnBlur)callback when component lose focusEventEmitter<FocusEvent>-
(nzOnFocus)callback when component get focusEventEmitter<FocusEvent>-
(nzOnHoverChange)callback when hover / leave itemEventEmitter<number>-
(nzOnKeyDown)callback when keydown on componentEventEmitter<KeyboardEvent>-

Methods#

NameDescription
blur()remove focus
focus()get focus