评分 Rate

提供评分能力。

使用

API

安装使用

import { TiRate } from '@titian-design/mobile-react';

用法示例

基础用法

const App: React.FC = () => {
  return (
    <>
       <TiRate value="3" />
    </>
  )
}

半星

const App: React.FC = () => {
  return (
    <>
       <TiRate value="3" allowHalf />
    </>
  )
}

只读

const App: React.FC = () => {
  return (
    <>
       <TiRate value="3" readOnly />
    </>
  )
}

可清空

const App: React.FC = () => {
  return (
    <>
       <TiRate value="3" clearable />
    </>
  )
}

设置星级

const App: React.FC = () => {
  return (
    <>
       <TiRate value="3" count="7" clearable />
    </>
  )
}

间距

const App: React.FC = () => {
  return (
    <>
       <TiRate value="3" extStyle="--rate-gap: 10px;" />
    </>
  )
}

评星尺寸

const App: React.FC = () => {
  return (
    <>
       <TiRate value="3" iconSize="48" />
    </>
  )
}

绑定事件

import { useState } from 'react';

const App: React.FC = () => {

  const [value, setValue] = useState(10);

  const onChangeHandler = (event)=> {
    setValue(event.detail.value);
  }

  return (
    <section>
      // 常规
      <TiRate value={value} onChange={onChangeHandler} />
    </section>
  )
}

TiRate API

属性 Properties

属性	类型	默认值	说明
value	number	0	值
allowHalf	boolean	false	允许半星
clearable	boolean	false	可清空
count	number	5	评分数量
icon	string	rate-star-highlight	评分 icon 图标
iconSize	string	36	评分 icon 图标尺寸
emptyIcon	string	rate-star-highlight	评分 icon 未选中图标
readOnly	boolean	false	是否只读

事件 Events

名称	参数列表	描述	备注
onChange	(e: CustomEvent<{value: number}>) => void	评分变化时触发该事件	-

CSS 变量 CSS Variables

CSS 变量	默认值	说明	备注
--rate-gap	24px	评星间距	-
--rate-color	rgb(var(--theme-r, 250), var(--theme-g, 44), var(--theme-b, 25))	评分选中颜色	-
--rate-empty-color	var(--neutral-color-5, #e0e0e0)	评星未选中颜色	-