Progress 进度条

Progress 是一个常用的组件，可以手势控制当前进度，也可仅作展示作用。

代码演示

基础形式

import { Progress } from 'tuya-panel-kit'

<Progress
  foreColor={{
    '0%': '#1381FB',
    '100%': '#00C36C',
  }}
  style={{ width: 100, height: 100 }}
  needMaxCircle={true}
  startColor="#1381FB"
  thumbRadius={4}
  value={50}
  startDegree={135}
  andDegree={270}
/>

间距形式

import { Progress } from 'tuya-panel-kit'

<Progress.Space strokeWidth={2} scaleNumber={70} style={{ width: 100, height: 100 }} />

双边拖动形式

import { Progress } from 'tuya-panel-kit'

<Progress.Double
  foreColor={{
    '0%': '#1381FB',
    '100%': '#00C36C',
  }}
  startDegree={170}
  style={{ width: 100, height: 100 }}
/>

组合形式

import { Progress } from 'tuya-panel-kit'

<Progress.Compose style={{ width: 100, height: 100 }} />

Tuya Design

Progress 进度条

代码演示

基础形式

间距形式

双边拖动形式

组合形式

API

Progress

Progress.Space

Progress.Double

Progress.Compose