评分 Rate

提供评分能力。

使用

API

安装使用

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

用法示例

基本使用

codesanbox

copy

code

import React from 'react';
import { TiRate } from 'titian-h5-react';

export default function App() {
  return <TiRate value={3} />;
}

只读

codesanbox

copy

code

import React from 'react';
import { TiRate } from 'titian-h5-react';

export default function App() {
  return <TiRate value={3} readOnly />;
}

设置星级

codesanbox

copy

code

import React from 'react';
import { TiRate } from 'titian-h5-react';

export default function App() {
  return <TiRate value={3} count={7} clearable />;
}

评星尺寸

codesanbox

copy

code

import React from 'react';
import { TiRate } from 'titian-h5-react';

export default function App() {
  return <TiRate value={3} iconSize="60" />;
}

半星

codesanbox

copy

code

import React from 'react';
import { TiRate } from 'titian-h5-react';

export default function App() {
  return <TiRate value={3.5} allowHalf />;
}

可清空

codesanbox

copy

code

import React from 'react';
import { TiRate } from 'titian-h5-react';

export default function App() {
  return <TiRate value={3} clearable />;
}

设置间距

codesanbox

copy

code

import React from 'react';
import { TiRate } from 'titian-h5-react';

export default function App() {
  return <TiRate value={3} extStyle="--rate-gap: 20px;" />;
}

绑定事件

codesanbox

copy

code

import React, { useState } from 'react';
import { TiRate } from 'titian-h5-react';

export default function App() {
  const [value, setValue] = useState(10);

  const onChangeHandler = (event: CustomEvent<{ value: number }>) => {
    setValue(event.detail.value);
  };

  return <TiRate value={value} onChange={onChangeHandler} />;
}

TiRate API

属性 Properties

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

事件 Events

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

CSS 变量 CSS Variables

CSS 变量	默认值	说明	备注
--rate-gap	theme.spacing.gap.g6	评星间距	-
--rate-color	theme.color.brand.1000	评分选中颜色	-
--rate-empty-color	theme.color.gray.background.100	评星未选中颜色	-