Code: Select all
import React, { useState } from 'react';
import { View, Text } from '@ray-js/components';
import ProgressCircle from '@ray-js/components-ty-progress-circle';
import { useInterval } from 'ahooks';
import styles from './index.module.less';
const DemoBlock = ({ title, children }) => (
<View className={styles.demoBlock}>
<View className={styles.demoBlockTitle}>
<Text className={styles.demoBlockTitleText}>{title}</Text>
</View>
{children}
</View>
);
export default function Home() {
const [percent, setPercent] = useState(0);
useInterval(() => {
if (percent >= 100) {
setPercent(0);
} else {
setPercent(percent + 1);
}
}, 1);
return (
<View className={styles.view}>
<DemoBlock title="基础用法">
<ProgressCircle percent={percent} />
</DemoBlock>
<DemoBlock title="颜色渐变">
<ProgressCircle
percent={percent}
fillColor="linear-gradient(90deg, #FA709A 0%, #FEDD44 100%)"
/>
</DemoBlock>
<DemoBlock title="进度条">
<ProgressCircle
percent={percent}
fillColor="linear-gradient(90deg, #FA709A 0%, #FEDD44 100%)"
>
<Text>{percent}%</Text>
</ProgressCircle>
</DemoBlock>
<DemoBlock title="自定义滑槽">
<ProgressCircle
percent={percent}
trackColor="#000000"
trackWidth="5px"
fillColor="linear-gradient(90deg, #FA709A 0%, #FEDD44 100%)"
>
<Text>{percent}%</Text>
</ProgressCircle>
</DemoBlock>
</View>
);
}
