田强 / qx-common · Files

---

nav: path: /component title: 组件 order: 1 group: path: /common title: 百分比进度条

order: 0

QxProgress 百分比进度条

水平进度条

import React from 'react';
import { QxProgress } from '@qx/common';

export default () => {
  return <QxProgress value={34} formatValue={'这是34%'} type={'bar'} />;
};

环状进度条

import React from 'react';
import { QxProgress } from '@qx/common';

export default () => {
  return <QxProgress value={34} type={'circle'} />;
};

环状进度条小中大

import React from 'react';
import { QxProgress } from '@qx/common';

export default () => {
  return (
    <div style={{ display: 'flex', alignItems: 'center' }}>
      <QxProgress value={34} formatValue={'34%'} type={'circle'} size={'small'} />
      <QxProgress value={34} formatValue={'34%'} type={'circle'} size={'middle'} />
      <QxProgress value={34} formatValue={'34%'} type={'circle'} size={'default'} />
    </div>
  );
};

隐私保护条形

import React, { useState } from 'react';
import { QxProgress } from '@qx/common';

export default () => {
  return (
    <QxProgress
      value={34}
      formatValue={'34%'}
      type={'bar'}
      controlPrivacy={true}
      privacy={true}
      size={'default'}
    />
  );
};

隐私保护环状

import React, { useState } from 'react';
import { QxProgress } from '@qx/common';

export default () => {
  const [privacy, setPrivacy] = useState(true);
  return (
    <QxProgress
      value={34}
      formatValue={'34%'}
      type={'circle'}
      controlPrivacy={true}
      privacy={true}
      size={'default'}
    />
  );
};