iBest-UI@HarmonyOS

Appearance

Rate 评分 ​

介绍 ​

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

引入 ​

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

代码演示 ​

基础用法 ​

基础用法

点我查看代码
ts
@Entry
@Component
struct DemoPage {
  @State value: number = 3
  build() {
    Column(){
      IBestRate({
        value: $value
      })
    }
  }
}

自定义图标 ​

自定义图标

TIP

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

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

自定义样式 ​

自定义样式

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

半星 ​

半星

TIP

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

点我查看代码
ts
@Entry
@Component
struct DemoPage {
  @State value: number = 3.5
  build() {
    Column(){
      IBestRate({
        value: $value,
        allowHalf: true
      })
    }
  }
}

自定义数量 ​

自定义数量

点我查看代码
ts
@Entry
@Component
struct DemoPage {
  @State value: number = 3
  build() {
    Column(){
      IBestRate({
        value: $value,
        count: 6
      })
    }
  }
}

可清空 ​

可清空

点我查看代码
ts
@Entry
@Component
struct DemoPage {
  @State value: number = 3
  build() {
    Column(){
      IBestRate({
        value: $value,
        clearable: true
      })
    }
  }
}

禁用状态 ​

禁用状态

TIP

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

点我查看代码
ts
@Entry
@Component
struct DemoPage {
  @State value: number = 3
  build() {
    Column(){
      IBestRate({
        value: $value,
        disabled: true
      })
    }
  }
}

只读状态 ​

只读状态

点我查看代码
ts
@Entry
@Component
struct DemoPage {
  @State value: number = 3
  build() {
    Column(){
      IBestRate({
        value: $value,
        readOnly: true
      })
    }
  }
}

只读状态小数显示 ​

只读状态小数显示

点我查看代码
ts
@Entry
@Component
struct DemoPage {
  @State value: number = 3
  build() {
    Column(){
      IBestRate({
        value: $value,
        readOnly: true,
        allowHalf: true
      })
    }
  }
}

监听 change 事件 ​

监听 change 事件

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

API ​

@Props ​

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

Events ​

事件名说明回调参数
onChange点击或手指滑动结束后触发value: number