代码演示

如何引入

import { Rating } from '@kousum/semi-ui-vue';

基本用法

最简单的用法，支持两种尺寸 default， small。

支持传入 number 类型自定义尺寸。具体可以参考自定义

0px x 0px

demoApp.vue

demo.tsx

tsconfig.json

Import Map

xxxxxxxxxx

11

7

10

 

1

import { Rating } from '@kousum/semi-ui-vue';

2

​

3

export default () => (

4

    <div>

5

        <Rating defaultValue={5}/>

6

        <br/>

7

        <br/>

8

        <Rating size='small' defaultValue={5}/>

9

    </div>

10

);

Show Error

Auto Save

半星

通过设置 allowHalf 属性可以支持选择半星。 allowHalf 属性支持展示除0.5以外的小数。

0px x 0px

demoApp.vue

demo.tsx

tsconfig.json

Import Map

xxxxxxxxxx

11

7

 

1

import { Rating } from '@kousum/semi-ui-vue';

2

​

3

export default () => (

4

    <div>

5

        <Rating allowHalf defaultValue={3.5}/>

6

        <br/>

7

        <Rating allowHalf defaultValue={3.65} disabled/>

8

    </div>

9

);

Show Error

Auto Save

只读

通过设置 disabled 属性将无法进行交互。

0px x 0px

demoApp.vue

demo.tsx

tsconfig.json

Import Map

xxxxxxxxxx

11

7

 

1

import { Rating } from '@kousum/semi-ui-vue';

2

​

3

export default () => (

4

    <Rating disabled defaultValue={3} />

5

);

Show Error

Auto Save

点击清除

通过设置 allowClear 属性允许再次点击时清除数值，默认为 true。

0px x 0px

demoApp.vue

demo.tsx

tsconfig.json

Import Map

xxxxxxxxxx

11

7

14

 

1

import { Rating } from '@kousum/semi-ui-vue';

2

​

3

export default () => (

4

    <div>

5

        <span>允许再次点击清除</span>

6

        <br/>

7

        <Rating allowClear={true} defaultValue={3}/>

8

        <br/>

9

        <br/>

10

        <span>禁止再次点击清除</span>

11

        <br/>

12

        <Rating allowClear={false} defaultValue={3}/>

13

    </div>

14

);

Show Error

Auto Save

文案展现

给评分组件加上文案展示。

0px x 0px

demoApp.vue

demo.tsx

tsconfig.json

Import Map

xxxxxxxxxx

11

7

18

 

1

import { Rating } from '@kousum/semi-ui-vue';

2

import { defineComponent, ref } from 'vue';

3

​

4

const Comp = defineComponent(() => {

5

  const value = ref(0);

6

  const change = (val) => value.value = val;

7

  const desc = ['terrible', 'bad', 'normal', 'good', 'wonderful'];

8

  return ()=>(

9

          <div>

10

            <span>How was the help you received:

11

              {value ? <span>{desc[value.value - 1]}</span> : ''}

12

            </span>

13

            <br/>

14

            <Rating tooltips={desc} onChange={change} value={value.value} />

15

          </div>

16

  );

17

})

18

export default Comp;

Show Error

Auto Save

自定义

自定义评分字符、个数及尺寸。
自定义尺寸需要配合自定义的字符才能生效。

0px x 0px

demoApp.vue

demo.tsx

tsconfig.json

Import Map

xxxxxxxxxx

11

7

17

 

1

import { Rating } from '@kousum/semi-ui-vue';

2

import { IconLikeHeart } from '@kousum/semi-icons-vue';

3

​

4

export default () => (

5

    <div>

6

        <Rating style={{ color: 'red' }} character={(<IconLikeHeart size="extra-large" />)} defaultValue={3}/>

7

        <br/>

8

        <br/>

9

        <Rating style={{ color: 'red' }} size={48} allowHalf character={(<IconLikeHeart style={{ fontSize: '48px' }} />)} defaultValue={3}/>

10

        <br/>

11

        <br/>

12

        <Rating character={'赞'} size={18} defaultValue={3}/>

13

        <br/>

14

        <br/>

15

        <Rating count={10} defaultValue={6}/>

16

    </div>

17

);

Show Error

Auto Save

API参考

属性	说明	类型	默认值
allowClear	是否允许再次点击后清除	boolean	true
allowHalf	是否允许半选	boolean	false
autoFocus	自动获取焦点	boolean	false
character	自定义字符	ReactNode	<IconStar size="extra-large"/>
className	自定义样式类名	string	-
count	star 总数	number	5
defaultValue	默认值	number	0
disabled	只读，无法进行交互	boolean	false
preventScroll	指示浏览器是否应滚动文档以显示新聚焦的元素，作用于组件内的 focus 方法	boolean
size	尺寸， default， small，v >= 0.35.0 后支持传入 number 类型自定义尺寸	string | number	default
style	自定义样式对象	object	-
tooltips	自定义每项的提示信息	string[]	-
value	当前受控值	number	-
onBlur	失去焦点时的回调	function()	-
onChange	选择时的回调	function(value: number)	-
onFocus	获取焦点时的回调	function()	-
onHoverChange	鼠标经过时数值变化的回调	function(value: number)	-
onKeyDown	按键回调	function(e: event)	-

Accessibility

ARIA

• Rating 具有 aria-checked 表示当前是否选中，aria-posinset 表示在列表的位置，aria-setsize 表示列表的长度。
• Semi 支持自定义 Rating 的语义:
  • 可以使用 aria-label 来定制 Rating 的语义化；
  • 若用户传入的 character 类型为 string，将使用这个 string 来做 Rating 的语义化；
  • aria-label的优先级高于string的character。

键盘和焦点

• Rating 的初始焦点设置：
  • 若 Rating 有选择项时，初始焦点应当设置为最后一个选择项时（如：有 3颗🌟被点亮，则初始焦点设置在第三颗被点亮的🌟上）；
  • 若 Rating 没有选择项时，初始焦点应当为整个 Rating。
• 一个 Rating 组上，可以通过 右箭头 或 上箭头 选中当前焦点的下一个焦点项，左箭头 或 下箭头 选中当前焦点的上一个焦点项；
  • 用户设置了 allowHalf 属性，按方向键只选中或取消选中半颗星；
• disabled的 Rating 无法被获取到焦点。

设计变量

color

font

spacing

width

animation

other

变量	默认值	用法
$color-rating-icon-default	rgba(var(--semi-yellow-5), 1)	评分图标按钮颜色 - 已填
$color-rating-bg-default	var(--semi-color-fill-0)	评分图标按钮颜色 - 未填
$color-rating-outline-focus	var(--semi-color-primary-light-active)	聚焦轮廓颜色

显示第 1 条-第 3 条，共 3 条

• 1

变量	默认值	用法
$font-rating-fontSize	20px	评分文本字体大小
$font-rating_item_small-fontSize	$width-rating_item_small	小尺寸评分项文本字体大小
$font-rating_item_default-fontSize	$width-rating_item_default	评分项文本字体大小

显示第 1 条-第 3 条，共 3 条

• 1

变量	默认值	用法
$spacing-rating-margin	0px	整体外边距
$spacing-rating-padding	0px	整体内边距
$spacing-rating_item-marginRight	6px	评分项右侧外边距

显示第 1 条-第 3 条，共 3 条

• 1

变量	默认值	用法
$width-rating_item_small	16px	小尺寸评分项宽度
$width-rating_item_default	24px	评分项宽度
$width-rating-outline-focus	2px	聚焦轮廓宽度

显示第 1 条-第 3 条，共 3 条

• 1

变量	默认值	用法
$transition_duration-rating-color	var(--semi-transition_duration-none)	评分-背景色-动画持续时间
$transition_function-rating-color	var(--semi-transition_function-easeIn)	评分-背景色-过渡曲线
$transition_delay-rating-color	var(--semi-transition_delay-none)	评分-背景色-延迟时间

显示第 1 条-第 3 条，共 3 条

• 1

变量	默认值	用法
$transform_scale-rating	var(--semi-transform_scale-none)	评分-变大

显示第 1 条-第 1 条，共 1 条

• 1