跳到主要内容

rating

air-rating 组件是一个评分组件,允许用户通过点击星级来进行评分。支持自定义样式、图标、最大评分等级等属性,并通过事件向外传递评分变化。

属性 (Properties)

属性名属性描述类型默认值
customStyle--自定义样式(CSS键值对对象){ [key: string]: string; }{}
emptyIconempty-icon未选中图标string'star-outline'
filledIconfilled-icon选中图标(直接使用air-icon的name)string'star'
iconSeticon-set图标集类型"bx" | "bxs" | "fas" | "iconfont" | "iconpark" | "material-icons"'material-icons'
levellevel当前评分等级 (0 ~ max)number0
maxmax最大星数(1 ~ 10)number5

说明:

  • customStyle:接收一个对象,允许用户设置自定义样式。对象中的每个键值对表示一个CSS样式属性和它的值。
  • emptyIcon:指定未选中时显示的图标,默认使用 'star-outline'
  • filledIcon:指定选中时显示的图标,默认使用 'star'
  • iconSet:选择图标的样式集合。可选值包括:
    • 'material-icons':Google Material Icons。
    • 'fas':Font Awesome Solid Icons。
    • 'bx''bxs':BoxIcons。
    • 'iconfont':自定义图标字体。
    • 'iconpark':IconPark Icons。
  • level:当前评分,取值范围为 0max
  • max:设置评分的最大星数,范围为 110

事件 (Events)

事件名描述类型
ratingChange评分变化事件CustomEvent<number>

说明:

  • ratingChange:当评分等级发生变化时,触发该事件。事件携带当前评分值,类型为 number

依赖 (Dependencies)

依赖的组件

  • air-icon:用于显示评分图标。

组件关系图

graph TD;
air-rating --> air-icon
style air-rating fill:#f9f,stroke:#333,stroke-width:4px

示例

基本用法

点击评分

事件监听