harmony 鸿蒙rating

2022-08-09 浏览 (883)

rating

说明: 从API version 4开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。

评分条,表示用户使用感受的衡量标准条。

权限列表

子组件

不支持。

属性

除支持通用属性外,还支持如下属性:

名称类型默认值必填描述
numstarsnumber5设置评分条的星级总数。
ratingnumber0设置评分条当前评星数。
stepsizenumber0.5设置评分条的评星步长。
indicatorbooleanfalse设置评分条是否作为一个指示器,此时用户不可操作。

样式

除支持通用样式外,还支持如下样式:

名称类型默认值必填描述
star-backgroundstring-设置单个星级未选中的背景图片,只支持本地路径图片,图片格式为png和jpg。
star-foregroundstring-设置单个星级选中的前景图片,只支持本地路径图片,图片格式为png和jpg。
star-secondarystring-设置单个星级部分选中的次级背景图片,该图片会覆盖背景图片,只支持本地路径图片,图片格式为png和jpg。
width<length>|<percentage>120px
60px(不可操作)
默认值是在未设置自定义资源和评分星数时,使用5个星和默认资源下的宽度值。
height<length>|<percentage>24px
12px(不可操作)
默认值是在未设置自定义资源和评分星数时,使用5个星和默认资源下的高度值。
rtl-flipbooleantrue在RTL文字方向下是否自动翻转图源。

说明: star-background,star-secondary,star-foreground三个星级图源必须全部设置,否则默认的星级颜色为灰色,以此提示图源设置错误。

事件

除支持通用事件外,还支持如下事件:

名称参数描述
change{ rating:  number }评分条的评星发生改变时触发该回调。

方法

支持通用方法

示例

<!-- xxx.hml -->
<div class="container">
  <rating numstars="5" rating="5" @change="changeRating" id="rating">
  </rating>
</div>
/* xxx.css */
.container {
  display: flex;
  justify-content: center;
  align-items: center;
}
rating {
  width: 200px;
}
// xxx.js
import promptAction from '@ohos.promptAction';
export default {
    changeRating(e){
        promptAction.showToast({
            message: e.rating
        });
    }
}

zh-cn_image_0000001198670487

你可能感兴趣的鸿蒙文章

harmony 鸿蒙兼容JS的类Web开发范式(ArkUI.Full)

harmony 鸿蒙数据类型说明

harmony 鸿蒙button

harmony 鸿蒙chart

harmony 鸿蒙divider

harmony 鸿蒙image-animator

harmony 鸿蒙image

harmony 鸿蒙input

harmony 鸿蒙label

harmony 鸿蒙marquee

  • 所属分类: 后端技术
  • 本文标签: 软件 鸿蒙
  • 版权声明: 本文链接 https://seaxiang.com/blog/5ff53a66da274d04b816006620d55fbc