Rate

Rate component.

When To Use#

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

Examples

The simplest usage.

expand codeexpand code
      Loading...
    
normal

Add copywriting in rate components.

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

Support set allow to clear star when click again.

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


Each character can be customized by index.

expand codeexpand code
      Loading...
    

Support select half star.

expand codeexpand code
      Loading...
    

Read only, can't use mouse to interact.

expand codeexpand code
      Loading...
    

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

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