mirror of
https://github.com/ant-design/ant-design.git
synced 2025-06-26 06:00:52 +08:00
7fd093bd0a
* docs: add general components TS demo * docs: add layout components TS demo * docs: add navigation components TS demo * docs: add data entry components TS demo * chore(deps): add types for qs * docs: add data display TS demo * docs: add feedback components TS demo * docs: add other components TS demo * chore(deps): add types * docs: unified demo code style * docs: fix lint error * docs: add demo TS type * docs: fix demo TS type * test: update snapshot * docs: fix TS demo * feat: update Rate character type * docs: fix lint error * feat: update Rate character type * feat: update Rate character type
1002 B
1002 B
| order | title | ||||
|---|---|---|---|---|---|
| 4 |
|
zh-CN
会动的进度条才是好进度条。
en-US
A dynamic progress bar is better.
import React, { useState } from 'react';
import { Progress, Button } from 'antd';
import { MinusOutlined, PlusOutlined } from '@ant-design/icons';
const App: React.FC = () => {
const [percent, setPercent] = useState(0);
const increase = () => {
let newPercent = percent + 10;
if (newPercent > 100) {
newPercent = 100;
}
setPercent(newPercent);
};
const decline = () => {
let newPercent = percent - 10;
if (newPercent < 0) {
newPercent = 0;
}
setPercent(newPercent);
};
return (
<>
<Progress type="circle" percent={percent} />
<Button.Group>
<Button onClick={decline} icon={<MinusOutlined />} />
<Button onClick={increase} icon={<PlusOutlined />} />
</Button.Group>
</>
);
};
export default App;