@xwink/ui

    Rating

    一排星,点哪颗打几分,悬停预览。键盘上方向键在星之间移动、空格或回车选定(漫游焦点,不是原生单选那样移动即选中),读屏念「第 n 颗,共 5 颗」。

    整星、半星与只读
    3 分(再点当前分清零)
    3.5 分
    只读展示、改用主色
    • step 取 1(缺省)或 0.5。半星时每颗星分两格,每格是裁到一半宽的实心星叠在空心星上。
    • clearable 再点当前分清零;readonly 只展示不能改,也不变淡(与 disabled 区分)。
    • 星的颜色是 currentColor,缺省警示色(黄),用 class 的 text-* 改。星的边长比图标档大一圈,跟 size 走。

    API

    Props

    名称类型默认值说明
    lengthnumber | undefined5几颗星,缺省 5
    step1 | 0.5 | undefined1最小单位:1(缺省)、0.5 半星
    clearableboolean | undefinedfalse再点当前分可以清零
    readonlyboolean | undefinedfalse只读展示:不能改,也不变淡
    disabledboolean | undefinedfalse—
    ariaLabelstring | undefinedundefined—
    size"mini" | "small" | "medium" | "large" | "super" | undefinedundefined尺寸:mini / small / medium(默认) / large / super;不传则跟随环境 data-size
    modelValuenumber | undefined0—

    Emits

    事件载荷说明
    update:modelValue[value: number]—