rate 评分

对评价进行展示,对事物进行快速的评级操作。

代码演示

rate 评分 - 图1

基础样例

最简单的用法。

  1. import { Component } from '@angular/core';
  2. import { SFSchema, SFRateWidgetSchema } from '@delon/form';
  3. import { NzMessageService } from 'ng-zorro-antd/message';
  4. @Component({
  5. selector: 'form-rate-simple',
  6. template: `
  7. <sf [schema]="schema" (formSubmit)="submit($event)"></sf>
  8. `,
  9. })
  10. export class FormRateSimpleComponent {
  11. schema: SFSchema = {
  12. properties: {
  13. rate: {
  14. type: 'number',
  15. title: '评级',
  16. default: 4.5,
  17. ui: {
  18. widget: 'rate',
  19. } as SFRateWidgetSchema,
  20. },
  21. // 允许半选
  22. rate2: {
  23. type: 'number',
  24. title: '评级',
  25. maximum: 5,
  26. multipleOf: 0.5,
  27. default: 4.5,
  28. ui: {
  29. widget: 'rate',
  30. text: '{{value}} starts',
  31. } as SFRateWidgetSchema,
  32. },
  33. },
  34. };
  35. constructor(public msg: NzMessageService) {}
  36. submit(value: any) {
  37. this.msg.success(JSON.stringify(value));
  38. }
  39. }

API

schema 属性

成员说明类型默认值
[maximum]总星数number5
[multipleOf]0.5 表示允许半选,其它值表示不允许number0.5

ui 属性

成员说明类型默认值
[allowClear]是否允许再次点击后清除booleantrue
[autoFocus]自动获取焦点booleanfalse
[text]提醒文本模板,{{value}} 表示当前值(注意无任何空格)string-
[tooltips]自定义每项的提示信息string[][]