进度条 Progress

表示当前任务的进度。

使用

API

安装使用

import { TiProgress, TiCircleProgress } from '@titian-design/mobile-react';

用法示例

基础用法

codesanbox

copy

code

import React from 'react';
import { TiProgress, TiCircleProgress } from 'titian-h5-react';

export default function App() {
  return (
    <div className="code-container">
      <TiProgress />
      <TiProgress value={80} />
      <TiCircleProgress value={80} />
    </div>
  );
}

设置进度条宽度

codesanbox

copy

code

import React from 'react';
import { TiProgress, TiCircleProgress } from 'titian-h5-react';

export default function App() {
  return (
    <div className="code-container">
      <TiProgress value={60} strokeWidth={20} />
      <TiCircleProgress value={60} strokeWidth={10} />
    </div>
  );
}

修改颜色

codesanbox

copy

code

import React from 'react';
import { TiProgress, TiCircleProgress } from 'titian-h5-react';

export default function App() {
  const gradientColor = {
    from: '#108ee9',
    to: '#87d068',
  };
  return (
    <div className="code-container">
      <TiProgress value={80} color="#2a6ae9" />
      <TiCircleProgress value={80} color="#2a6ae9" />

      <TiProgress value={80} gradientColor={gradientColor} />
    </div>
  );
}

设置缓冲进度

codesanbox

copy

code

import React from 'react';
import { TiProgress, TiCircleProgress } from 'titian-h5-react';

export default function App() {
  return (
    <div className="code-container">
      <TiProgress value={60} buffer={80} />
      <TiCircleProgress value={60} buffer={80} />
    </div>
  );
}

展示进度值

codesanbox

copy

code

import React from 'react';
import { TiProgress, TiCircleProgress } from 'titian-h5-react';

export default function App() {
  return (
    <div className="code-container">
      <TiProgress value={60} showProgress />
      <TiCircleProgress value={80} showProgress />
    </div>
  );
}

TiProgress API

属性 Properties

名称	类型	是否必填	默认值	说明	备注
size	number	否	72	进度值大小	-
value	number	否	0	进度值，取值范围 0-100	-
buffer	number	否	0	缓冲值，取值范围 0-100	-
showProgress	boolean	否	false	是否展示进度值，默认不展示	-
color	string	否	-	进度条颜色，默认为主题色	-
strokeWidth	number	否	8	进度条宽度，默认为 8px	-
strokeColor	string	否	-	进度条轨道颜色，默认为进度条值的 10%	-
bufferBgColor	string	否	-	进度条缓冲轨道颜色，默认为进度条值的 30%	-
gradient-color	GradientColor	string	否	-	进度条颜色为渐变色，需要设置 from 和 to, 为字符串时，直接添加到 background-image 上

GradientColor

interface GradientColor {
  from: string;
  to: string;
}

可扩展样式名 External Class

类名	说明	备注
extClass	扩展样式类名	-
textClass	进度条文字扩展样式类名	-

CSS 变量 CSS Variables

变量	默认值	说明	备注
--progress-margin-v	theme.spacing.gap.g2	垂直方向外间距	-
--progress-margin-h	theme.spacing.gap.g0	水平方向外间距	-
--progress-height	8px	进度条高度	-
--progress-radius	theme.borderRadius.r1	圆角大小	-
--progress-bar-color	theme.color.brand.1000	进度条颜色	-
--progress-bar-radius	theme.borderRadius.r1	进度条圆角大小	-
--progress-pivot-margin-left	theme.spacing.gap.g2	左侧外间距	-
--progress-pivot-color	theme.color.brand.1000	进度条进度值颜色	-
--progress-pivot-font-size	theme.fontSize.t4	进度数字，字	-
--progress-pivot-line-height	theme.lineHeight.single.t4	进度数字，行高	-
--progress-pivot-font-weight	theme.fontWeight.regular	进度数字，字重	-

TiCircleProgress API

属性 Properties

名称	类型	是否必填	默认值	说明	备注
size	number	否	72	进度值大小	-
value	number	否	0	进度值，取值范围 0-100	-
buffer	number	否	0	缓冲值，取值范围 0-100	-
showProgress	boolean	否	false	是否展示进度值，默认不展示	-
color	string	否	-	进度条颜色，默认为主题色	-
strokeWidth	number	否	8	进度条宽度，默认为 8px	-
strokeColor	string	否	-	进度条轨道颜色，默认为进度条值的 10%	-
bufferBgColor	string	否	-	进度条缓冲轨道颜色，默认为进度条值的 30%	-
font	string	否	-	canvas font 属性	-

属性 Properties

类名	说明	备注
extClass	扩展样式类名	-