stars 星级
星级组件(Star Rating Component)是一种常见的用户界面组件,用于让用户对某个项目或内容进行评级,并显示相应的星级评分。
Props参数
名称 | 类型 | 是否必传 | 默认值 | 描述 |
---|---|---|---|---|
value | number | 否 | - | 当前星级数量 |
src | string | string[] | 否 | - | 选中图片 |
voidSrc | string | string[] | 否 | - | 未选中图片 |
size | number | 否 | 18 | 尺寸大小 |
count | number | 否 | 5 | 星级总数量 |
showVoid | boolean | 否 | true | 是否显示为选中的 |
gap | number | 否 | 15 | 间距 |
onChange | (value: number) => void | 否 | - | 改变事件 |
示例
tsx
import { useState } from 'react'
import { View } from '@tarojs/components'
import MMStars from '~/components/stars'
import MMPageContainer from '../_components/page-container'
import PageDemoBlock from '../_components/page-demo-block'
export default () => {
const [value, setValue] = useState(3.5)
function onChange(value: number) {
setValue(value)
}
return (
<MMPageContainer title="星级">
<PageDemoBlock title="使用">
<View>基础使用</View>
<MMStars value={value} onChange={onChange} />
<View className="spacing" />
<View>可以设置星星尺寸 和间距</View>
<View className="spacing" />
<MMStars value={value} size={30} gap={5} onChange={onChange} />
<View className="spacing" />
<View>可以设置数量</View>
<View className="spacing" />
<MMStars value={value} count={10} gap={5} onChange={onChange} />
</PageDemoBlock>
<PageDemoBlock title="高级">
<View>你可以针对每个项目设置图片,这在一些表情评价时非常有用</View>
<MMStars
value={value}
size={30}
src={[
'https://wmm-mock.oss-cn-shanghai.aliyuncs.com/mock/head0.png',
'https://wmm-mock.oss-cn-shanghai.aliyuncs.com/mock/head1.png',
'https://wmm-mock.oss-cn-shanghai.aliyuncs.com/mock/head2.png',
'https://wmm-mock.oss-cn-shanghai.aliyuncs.com/mock/head3.png',
'https://wmm-mock.oss-cn-shanghai.aliyuncs.com/mock/head4.png'
]}
onChange={onChange}
/>
</PageDemoBlock>
</MMPageContainer>
)
}