IBest-UI-V2

Appearance

Rate 评分 ​

介绍 ​

用于对事物进行评级操作。

TIP

阅读该组件文档前请确保已认真阅读快速上手章节的每一个字。

引入 ​

ts
import { IBestRate } from "@ibestservices/ibest-ui-v2";

代码演示 ​

基础用法 ​

基础用法

点我查看代码
ts
@Entry
@ComponentV2
struct DemoPage {
  @Local value: number = 3
  build() {
    Column(){
      IBestRate({
        value: this.value!!
      })
    }
  }
}

自定义图标 ​

自定义图标

TIP

通过 inactiveIcon 可自定义未激活图标, activeIcon 可自定义激活图标, 仅支持svg格式图片。

点我查看代码
ts
@Entry
@ComponentV2
struct DemoPage {
  @Local value: number = 3
  build() {
    Column(){
      IBestRate({
        value: this.value!!,
        activeIcon: $r("app.media.icon_like_o"),
        inactiveIcon: $r("app.media.icon_like")
      })
    }
  }
}

自定义样式 ​

自定义样式

点我查看代码
ts
@Entry
@ComponentV2
struct DemoPage {
  @Local value: number = 3
  build() {
    Column(){
      IBestRate({
        value: this.value!!,
        iconSize: 60,
        space: 16,
        activeColor: '#ffd21e',
        inactiveIcon: $r("app.media.icon_star_o"),
        inactiveColor: '#eee'
      })
    }
  }
}

半星 ​

半星

TIP

通过 allowHalf 可开启半星功能, 未设置但传入小数时会被自动向上取整。

点我查看代码
ts
@Entry
@ComponentV2
struct DemoPage {
  @Local value: number = 3.5
  build() {
    Column(){
      IBestRate({
        value: this.value!!,
        allowHalf: true
      })
    }
  }
}

自定义数量 ​

自定义数量

点我查看代码
ts
@Entry
@ComponentV2
struct DemoPage {
  @Local value: number = 3
  build() {
    Column(){
      IBestRate({
        value: this.value!!,
        count: 6
      })
    }
  }
}

可清空 ​

可清空

点我查看代码
ts
@Entry
@ComponentV2
struct DemoPage {
  @Local value: number = 3
  build() {
    Column(){
      IBestRate({
        value: this.value!!,
        clearable: true
      })
    }
  }
}

禁用状态 ​

禁用状态

TIP

可通过 disabledColor 属性自定义禁用颜色。

点我查看代码
ts
@Entry
@ComponentV2
struct DemoPage {
  @Local value: number = 3
  build() {
    Column(){
      IBestRate({
        value: this.value!!,
        disabled: true
      })
    }
  }
}

只读状态 ​

只读状态

点我查看代码
ts
@Entry
@ComponentV2
struct DemoPage {
  @Local value: number = 3
  build() {
    Column(){
      IBestRate({
        value: this.value!!,
        readOnly: true
      })
    }
  }
}

只读状态小数显示 ​

只读状态小数显示

点我查看代码
ts
@Entry
@ComponentV2
struct DemoPage {
  @Local value: number = 3
  build() {
    Column(){
      IBestRate({
        value: this.value!!,
        readOnly: true,
        allowHalf: true
      })
    }
  }
}

监听 change 事件 ​

监听 change 事件

点我查看代码
ts
@Entry
@ComponentV2
struct DemoPage {
  @Local value: number = 3
  build() {
    Column(){
      IBestRate({
        value: this.value!!,
        onChange: (value: number) => {
          console.log(`${value}`)
        }
      })
    }
  }
}

API ​

@Props ​

参数说明类型默认值
value当前分值, 支持双向绑定number0
count图标总数number5
iconSize图标大小string | number20
space图标间距string | number4
activeIcon选中时图标Resource实心五角星
inactiveIcon未选中图标Resource空心五角星
activeColor选中颜色ResourceColor#db3131
inactiveColor未选中颜色ResourceColor#c8c9cc
allowHalf是否允许半选, 为false时小数会被自动向上取整booleanfalse
disabled禁用booleanfalse
disabledColor禁用颜色ResourceColor#c8c9cc
readOnly只读booleanfalse
clearable是否可清空booleanfalse
isTouchable是否可通过滑动手势选择评分booleantrue

Events ​

事件名说明事件类型
onChange点击或手指滑动结束后触发(value: number) => void