You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
299 lines
34 KiB
299 lines
34 KiB
1 year ago
|
"use strict";(self.webpackChunkantd=self.webpackChunkantd||[]).push([[1199],{911265:function(u,o,n){n.r(o);var m=n(502143),_=n(968521),g=n(720719),v=n(28840),b=n(759907),c=n(828089),Z=n(825673),h=n(902068),P=n(574399),f=n(863942),x=n(316073),y=n(24628),k=n(719260),w=n(956140),l=n(127179),i=n(905388),E=n(40428),D=n(606965),A=n(268696),M=n(587302),t=n(424128),O=n(249706),T=n(795127),C=n(116846),L=n(212039),R=n(73024),j=n(553913),s=n(606641),a=n(667294),e=n(370917);function d(){var p=(0,s.eL)(),r=p.texts;return(0,e.tZ)(s.dY,null,(0,e.tZ)(a.Fragment,null,(0,e.tZ)("div",{className:"markdown"},(0,e.tZ)("p",null,r[0].value),(0,e.tZ)("h2",{id:"when-to-use"},(0,e.tZ)(t.Z,{"aria-hidden":"true",tabIndex:"-1",href:"#when-to-use",sourceType:"a"},(0,e.tZ)("span",{className:"icon icon-link"})),"When To Use"),(0,e.tZ)("p",null,r[1].value,(0,e.tZ)("code",null,r[2].value),r[3].value),(0,e.tZ)("ul",null,(0,e.tZ)("li",null,r[4].value),(0,e.tZ)("li",null,r[5].value)),(0,e.tZ)("h2",{id:"examples"},(0,e.tZ)(t.Z,{"aria-hidden":"true",tabIndex:"-1",href:"#examples",sourceType:"a"},(0,e.tZ)("span",{className:"icon icon-link"})),"Examples")),(0,e.tZ)(i.Z,{items:[{demo:{id:"components-progress-demo-line"},previewerProps:{title:"Progress bar",filename:"components/progress/demo/line.tsx",pkgDependencyList:{"@ant-design/colors":"^7.0.0","@ant-design/cssinjs":"^1.10.1","@ant-design/icons":"^5.1.0","@ant-design/react-slick":"~1.0.0","@babel/runtime":"^7.18.3","@ctrl/tinycolor":"^3.6.0","@rc-component/color-picker":"~1.4.0","@rc-component/mutate-observer":"^1.0.0","@rc-component/tour":"~1.8.0","@rc-component/trigger":"^1.13.0",classnames:"^2.2.6","copy-to-clipboard":"^3.2.0",dayjs:"^1.11.1","qrcode.react":"^3.1.0","rc-cascader":"~3.12.0","rc-checkbox":"~3.1.0","rc-collapse":"~3.7.0","rc-dialog":"~9.1.0","rc-drawer":"~6.2.0","rc-dropdown":"~4.1.0","rc-field-form":"~1.34.0","rc-image":"~7.0.0","rc-input":"~1.1.0","rc-input-number":"~8.0.2","rc-mentions":"~2.5.0","rc-menu":"~9.10.0","rc-motion":"^2.7.3","rc-notification":"~5.0.4","rc-pagination":"~3.5.0","rc-picker":"~3.10.0","rc-progress":"~3.4.1","rc-rate":"~2.12.0","rc-resize-observer":"^1.2.0","rc-segmented":"~2.2.0","rc-select":"~14.5.0","rc-slider":"~10.1.0","rc-steps":"~6.0.0","rc-switch":"~4.1.0","rc-table":"~7.32.1","rc-tabs":"~12.9.0","rc-textarea":"~1.3.2","rc-tooltip":"~6.0.0","rc-tree":"~5.7.6","rc-tree-select":"~5.9.0","rc-upload":"~4.3.0","rc-util":"^5.32.0","scroll-into-view-if-needed":"^3.0.3","throttle-debounce":"^5.0.0"},jsx:`import React from 'react';
|
||
|
|
import { Progress } from 'antd';
|
||
|
|
const App = () => (
|
||
|
|
<>
|
||
|
|
<Progress percent={30} />
|
||
|
|
<Progress percent={50} status="active" />
|
||
|
|
<Progress percent={70} status="exception" />
|
||
|
|
<Progress percent={100} />
|
||
|
|
<Progress percent={50} showInfo={false} />
|
||
|
|
</>
|
||
|
|
);
|
||
|
|
export default App;
|
||
|
|
`,description:"<p>A standard progress bar.</p>"}},{demo:{id:"components-progress-demo-circle"},previewerProps:{title:"Circular progress bar",filename:"components/progress/demo/circle.tsx",pkgDependencyList:{"@ant-design/colors":"^7.0.0","@ant-design/cssinjs":"^1.10.1","@ant-design/icons":"^5.1.0","@ant-design/react-slick":"~1.0.0","@babel/runtime":"^7.18.3","@ctrl/tinycolor":"^3.6.0","@rc-component/color-picker":"~1.4.0","@rc-component/mutate-observer":"^1.0.0","@rc-component/tour":"~1.8.0","@rc-component/trigger":"^1.13.0",classnames:"^2.2.6","copy-to-clipboard":"^3.2.0",dayjs:"^1.11.1","qrcode.react":"^3.1.0","rc-cascader":"~3.12.0","rc-checkbox":"~3.1.0","rc-collapse":"~3.7.0","rc-dialog":"~9.1.0","rc-drawer":"~6.2.0","rc-dropdown":"~4.1.0","rc-field-form":"~1.34.0","rc-image":"~7.0.0","rc-input":"~1.1.0","rc-input-number":"~8.0.2","rc-mentions":"~2.5.0","rc-menu":"~9.10.0","rc-motion":"^2.7.3","rc-notification":"~5.0.4","rc-pagination":"~3.5.0","rc-picker":"~3.10.0","rc-progress":"~3.4.1","rc-rate":"~2.12.0","rc-resize-observer":"^1.2.0","rc-segmented":"~2.2.0","rc-select":"~14.5.0","rc-slider":"~10.1.0","rc-steps":"~6.0.0","rc-switch":"~4.1.0","rc-table":"~7.32.1","rc-tabs":"~12.9.0","rc-textarea":"~1.3.2","rc-tooltip":"~6.0.0","rc-tree":"~5.7.6","rc-tree-select":"~5.9.0","rc-upload":"~4.3.0","rc-util":"^5.32.0","scroll-into-view-if-needed":"^3.0.3","throttle-debounce":"^5.0.0"},jsx:`import React from 'react';
|
||
|
|
import { Progress, Space } from 'antd';
|
||
|
|
const App = () => (
|
||
|
|
<Space wrap>
|
||
|
|
<Progress type="circle" percent={75} />
|
||
|
|
<Progress type="circle" percent={70} status="exception" />
|
||
|
|
<Progress type="circle" percent={100} />
|
||
|
|
</Space>
|
||
|
|
);
|
||
|
|
export default App;
|
||
|
|
`,description:"<p>A circular progress bar.</p>"}},{demo:{id:"components-progress-demo-line-mini"},previewerProps:{title:"Mini size progress bar",filename:"components/progress/demo/line-mini.tsx",pkgDependencyList:{"@ant-design/colors":"^7.0.0","@ant-design/cssinjs":"^1.10.1","@ant-design/icons":"^5.1.0","@ant-design/react-slick":"~1.0.0","@babel/runtime":"^7.18.3","@ctrl/tinycolor":"^3.6.0","@rc-component/color-picker":"~1.4.0","@rc-component/mutate-observer":"^1.0.0","@rc-component/tour":"~1.8.0","@rc-component/trigger":"^1.13.0",classnames:"^2.2.6","copy-to-clipboard":"^3.2.0",dayjs:"^1.11.1","qrcode.react":"^3.1.0","rc-cascader":"~3.12.0","rc-checkbox":"~3.1.0","rc-collapse":"~3.7.0","rc-dialog":"~9.1.0","rc-drawer":"~6.2.0","rc-dropdown":"~4.1.0","rc-field-form":"~1.34.0","rc-image":"~7.0.0","rc-input":"~1.1.0","rc-input-number":"~8.0.2","rc-mentions":"~2.5.0","rc-menu":"~9.10.0","rc-motion":"^2.7.3","rc-notification":"~5.0.4","rc-pagination":"~3.5.0","rc-picker":"~3.10.0","rc-progress":"~3.4.1","rc-rate":"~2.12.0","rc-resize-observer":"^1.2.0","rc-segmented":"~2.2.0","rc-select":"~14.5.0","rc-slider":"~10.1.0","rc-steps":"~6.0.0","rc-switch":"~4.1.0","rc-table":"~7.32.1","rc-tabs":"~12.9.0","rc-textarea":"~1.3.2","rc-tooltip":"~6.0.0","rc-tree":"~5.7.6","rc-tree-select":"~5.9.0","rc-upload":"~4.3.0","rc-util":"^5.32.0","scroll-into-view-if-needed":"^3.0.3","throttle-debounce":"^5.0.0"},jsx:`import React from 'react';
|
||
|
|
import { Progress } from 'antd';
|
||
|
|
const App = () => (
|
||
|
|
<div
|
||
|
|
style={{
|
||
|
|
width: 170,
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<Progress percent={30} size="small" />
|
||
|
|
<Progress percent={50} size="small" status="active" />
|
||
|
|
<Progress percent={70} size="small" status="exception" />
|
||
|
|
<Progress percent={100} size="small" />
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
export default App;
|
||
|
|
`,description:"<p>Appropriate for a narrow area.</p>"}},{demo:{id:"components-progress-demo-circle-micro"},previewerProps:{title:"Responsive circular progress bar",filename:"components/progress/demo/circle-micro.tsx",pkgDependencyList:{"@ant-design/colors":"^7.0.0","@ant-design/cssinjs":"^1.10.1","@ant-design/icons":"^5.1.0","@ant-design/react-slick":"~1.0.0","@babel/runtime":"^7.18.3","@ctrl/tinycolor":"^3.6.0","@rc-component/color-picker":"~1.4.0","@rc-component/mutate-observer":"^1.0.0","@rc-component/tour":"~1.8.0","@rc-component/trigger":"^1.13.0",classnames:"^2.2.6","copy-to-clipboard":"^3.2.0",dayjs:"^1.11.1","qrcode.react":"^3.1.0","rc-cascader":"~3.12.0","rc-checkbox":"~3.1.0","rc-collapse":"~3.7.0","rc-dialog":"~9.1.0","rc-drawer":"~6.2.0","rc-dropdown":"~4.1.0","rc-field-form":"~1.34.0","rc-image":"~7.0.0","rc-input":"~1.1.0","rc-input-number":"~8.0.2","rc-mentions":"~2.5.0","rc-menu":"~9.10.0","rc-motion":"^2.7.3","rc-notification":"~5.0.4","rc-pagination":"~3.5.0","rc-picker":"~3.10.0","rc-progress":"~3.4.1","rc-rate":"~2.12.0","rc-resize-observer":"^1.2.0","rc-segmented":"~2.2.0","rc-select":"~14.5.0","rc-slider":"~10.1.0","rc-steps":"~6.0.0","rc-switch":"~4.1.0","rc-table":"~7.32.1","rc-tabs":"~12.9.0","rc-textarea":"~1.3.2","rc-tooltip":"~6.0.0","rc-tree":"~5.7.6","rc-tree-select":"~5.9.0","rc-upload":"~4.3.0","rc-util":"^5.32.0","scroll-into-view-if-needed":"^3.0.3","throttle-debounce":"^5.0.0"},jsx:`import React from 'react';
|
||
|
|
import { Progress } from 'antd';
|
||
|
|
const App = () => (
|
||
|
|
<>
|
||
|
|
<Progress
|
||
|
|
type="circle"
|
||
|
|
trailColor="#e6f4ff"
|
||
|
|
percent={60}
|
||
|
|
strokeWidth={20}
|
||
|
|
size={14}
|
||
|
|
format={(number) => \`\u8FDB\u884C\u4E2D\uFF0C\u5DF2\u5B8C\u6210\${number}%\`}
|
||
|
|
/>
|
||
|
|
<span
|
||
|
|
style={{
|
||
|
|
marginLeft: 8,
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
\u4EE3\u7801\u53D1\u5E03
|
||
|
|
</span>
|
||
|
|
</>
|
||
|
|
);
|
||
|
|
export default App;
|
||
|
|
`,description:"<p>Responsive circular progress bar. When <code>width</code> is smaller than 20, progress information will be displayed in Tooltip.</p>"}},{demo:{id:"components-progress-demo-circle-mini"},previewerProps:{title:"Mini size circular progress bar",filename:"components/progress/demo/circle-mini.tsx",pkgDependencyList:{"@ant-design/colors":"^7.0.0","@ant-design/cssinjs":"^1.10.1","@ant-design/icons":"^5.1.0","@ant-design/react-slick":"~1.0.0","@babel/runtime":"^7.18.3","@ctrl/tinycolor":"^3.6.0","@rc-component/color-picker":"~1.4.0","@rc-component/mutate-observer":"^1.0.0","@rc-component/tour":"~1.8.0","@rc-component/trigger":"^1.13.0",classnames:"^2.2.6","copy-to-clipboard":"^3.2.0",dayjs:"^1.11.1","qrcode.react":"^3.1.0","rc-cascader":"~3.12.0","rc-checkbox":"~3.1.0","rc-collapse":"~3.7.0","rc-dialog":"~9.1.0","rc-drawer":"~6.2.0","rc-dropdown":"~4.1.0","rc-field-form":"~1.34.0","rc-image":"~7.0.0","rc-input":"~1.1.0","rc-input-number":"~8.0.2","rc-mentions":"~2.5.0","rc-menu":"~9.10.0","rc-motion":"^2.7.3","rc-notification":"~5.0.4","rc-pagination":"~3.5.0","rc-picker":"~3.10.0","rc-progress":"~3.4.1","rc-rate":"~2.12.0","rc-resize-observer":"^1.2.0","rc-segmented":"~2.2.0","rc-select":"~14.5.0","rc-slider":"~10.1.0","rc-steps":"~6.0.0","rc-switch":"~4.1.0","rc-table":"~7.32.1","rc-tabs":"~12.9.0","rc-textarea":"~1.3.2","rc-tooltip":"~6.0.0","rc-tree":"~5.7.6","rc-tree-select":"~5.9.0","rc-upload":"~4.3.0","rc-util":"^5.32.0","scroll-into-view-if-needed":"^3.0.3","throttle-debounce":"^5.0.0"},jsx:`import React from 'react';
|
||
|
|
import { Progress, Space } from 'antd';
|
||
|
|
const App = () => (
|
||
|
|
<Space wrap>
|
||
|
|
<Progress type="circle" percent={30} size={80} />
|
||
|
|
<Progress type="circle" percent={70} size={80} status="exception" />
|
||
|
|
<Progress type="circle" percent={100} size={80} />
|
||
|
|
</Space>
|
||
|
|
);
|
||
|
|
export default App;
|
||
|
|
`,description:"<p>A smaller circular progress bar.</p>"}},{demo:{id:"components-progress-demo-circle-dynamic"},previewerProps:{title:"Dynamic circular progress bar",filename:"components/progress/demo/circle-dynamic.tsx",pkgDependencyList:{"@ant-design/colors":"^7.0.0","@ant-design/cssinjs":"^1.10.1","@ant-design/icons":"^5.1.0","@ant-design/react-slick":"~1.0.0","@babel/runtime":"^7.18.3","@ctrl/tinycolor":"^3.6.0","@rc-component/color-picker":"~1.4.0","@rc-component/mutate-observer":"^1.0.0","@rc-component/tour":"~1.8.0","@rc-component/trigger":"^1.13.0",classnames:"^2.2.6","copy-to-clipboard":"^3.2.0",dayjs:"^1.11.1","qrcode.react":"^3.1.0","rc-cascader":"~3.12.0","rc-checkbox":"~3.1.0","rc-collapse":"~3.7.0","rc-dialog":"~9.1.0","rc-drawer":"~6.2.0","rc-dropdown":"~4.1.0","rc-field-form":"~1.34.0","rc-image":"~7.0.0","rc-input":"~1.1.0","rc-input-number":"~8.0.2","rc-mentions":"~2.5.0","rc-menu":"~9.10.0","rc-motion":"^2.7.3","rc-notification":"~5.0.4","rc-pagination":"~3.5.0","rc-picker":"~3.10.0","rc-progress":"~3.4.1","rc-rate":"~2.12.0","rc-resize-observer":"^1.2.0","rc-segmented":"~2.2.0","rc-select":"~14.5.0","rc-slider":"~10.1.0","rc-steps":"~6.0.0","rc-switch":"~4.1.0","rc-table":"~7.32.1","rc-tabs":"~12.9.0","rc-textarea":"~1.3.2","rc-tooltip":"~6.0.0","rc-tree":"~5.7.6","rc-tree-select":"~5.9.0","rc-upload":"~4.3.0","rc-util":"^5.32.0","scroll-into-view-if-needed":"^3.0.3","throttle-debounce":"^5.0.0"},jsx:`import React, { useState } from 'react';
|
||
|
|
import { MinusOutlined, PlusOutlined } from '@ant-design/icons';
|
||
|
|
import { Button, Progress } from 'antd';
|
||
|
|
const App = () => {
|
||
|
|
const [percent, setPercent] = useState(0);
|
||
|
|
const increase = () => {
|
||
|
|
setPercent((prevPercent) => {
|
||
|
|
const newPercent = prevPercent + 10;
|
||
|
|
if (newPercent > 100) {
|
||
|
|
return 100;
|
||
|
|
}
|
||
|
|
return newPercent;
|
||
|
|
});
|
||
|
|
};
|
||
|
|
const decline = () => {
|
||
|
|
setPercent((prevPercent) => {
|
||
|
|
const newPercent = prevPercent - 10;
|
||
|
|
if (newPercent < 0) {
|
||
|
|
return 0;
|
||
|
|
}
|
||
|
|
return newPercent;
|
||
|
|
});
|
||
|
|
};
|
||
|
|
return (
|
||
|
|
<>
|
||
|
|
<Progress
|
||
|
|
type="circle"
|
||
|
|
percent={percent}
|
||
|
|
style={{
|
||
|
|
marginRight: 8,
|
||
|
|
}}
|
||
|
|
/>
|
||
|
|
<Button.Group>
|
||
|
|
<Button onClick={decline} icon={<MinusOutlined />} />
|
||
|
|
<Button onClick={increase} icon={<PlusOutlined />} />
|
||
|
|
</Button.Group>
|
||
|
|
</>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
export default App;
|
||
|
|
`,description:"<p>A dynamic progress bar is better.</p>"}},{demo:{id:"components-progress-demo-dynamic"},previewerProps:{title:"Dynamic",filename:"components/progress/demo/dynamic.tsx",pkgDependencyList:{"@ant-design/colors":"^7.0.0","@ant-design/cssinjs":"^1.10.1","@ant-design/icons":"^5.1.0","@ant-design/react-slick":"~1.0.0","@babel/runtime":"^7.18.3","@ctrl/tinycolor":"^3.6.0","@rc-component/color-picker":"~1.4.0","@rc-component/mutate-observer":"^1.0.0","@rc-component/tour":"~1.8.0","@rc-component/trigger":"^1.13.0",classnames:"^2.2.6","copy-to-clipboard":"^3.2.0",dayjs:"^1.11.1","qrcode.react":"^3.1.0","rc-cascader":"~3.12.0","rc-checkbox":"~3.1.0","rc-collapse":"~3.7.0","rc-dialog":"~9.1.0","rc-drawer":"~6.2.0","rc-dropdown":"~4.1.0","rc-field-form":"~1.34.0","rc-image":"~7.0.0","rc-input":"~1.1.0","rc-input-number":"~8.0.2","rc-mentions":"~2.5.0","rc-menu":"~9.10.0","rc-motion":"^2.7.3","rc-notification":"~5.0.4","rc-pagination":"~3.5.0","rc-picker":"~3.10.0","rc-progress":"~3.4.1","rc-rate":"~2.12.0","rc-resize-observer":"^1.2.0","rc-segmented":"~2.2.0","rc-select":"~14.5.0","rc-slider":"~10.1.0","rc-steps":"~6.0.0","rc-switch":"~4.1.0","rc-table":"~7.32.1","rc-tabs":"~12.9.0","rc-textarea":"~1.3.2","rc-tooltip":"~6.0.0","rc-tree":"~5.7.6","rc-tree-select":"~5.9.0","rc-upload":"~4.3.0","rc-util":"^5.32.0","scroll-into-view-if-needed":"^3.0.3","throttle-debounce":"^5.0.0"},jsx:`import React, { useState } from 'react';
|
||
|
|
import { MinusOutlined, PlusOutlined } from '@ant-design/icons';
|
||
|
|
import { Button, Progress } from 'antd';
|
||
|
|
const App = () => {
|
||
|
|
const [percent, setPercent] = useState(0);
|
||
|
|
const increase = () => {
|
||
|
|
setPercent((prevPercent) => {
|
||
|
|
const newPercent = prevPercent + 10;
|
||
|
|
if (newPercent > 100) {
|
||
|
|
return 100;
|
||
|
|
}
|
||
|
|
return newPercent;
|
||
|
|
});
|
||
|
|
};
|
||
|
|
const decline = () => {
|
||
|
|
setPercent((prevPercent) => {
|
||
|
|
const newPercent = prevPercent - 10;
|
||
|
|
if (newPercent < 0) {
|
||
|
|
return 0;
|
||
|
|
}
|
||
|
|
return newPercent;
|
||
|
|
});
|
||
|
|
};
|
||
|
|
return (
|
||
|
|
<>
|
||
|
|
<Progress percent={percent} />
|
||
|
|
<Button.Group>
|
||
|
|
<Button onClick={decline} icon={<MinusOutlined />} />
|
||
|
|
<Button onClick={increase} icon={<PlusOutlined />} />
|
||
|
|
</Button.Group>
|
||
|
|
</>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
export default App;
|
||
|
|
`,description:"<p>A dynamic progress bar is better.</p>"}},{demo:{id:"components-progress-demo-format"},previewerProps:{title:"Custom text format",filename:"components/progress/demo/format.tsx",pkgDependencyList:{"@ant-design/colors":"^7.0.0","@ant-design/cssinjs":"^1.10.1","@ant-design/icons":"^5.1.0","@ant-design/react-slick":"~1.0.0","@babel/runtime":"^7.18.3","@ctrl/tinycolor":"^3.6.0","@rc-component/color-picker":"~1.4.0","@rc-component/mutate-observer":"^1.0.0","@rc-component/tour":"~1.8.0","@rc-component/trigger":"^1.13.0",classnames:"^2.2.6","copy-to-clipboard":"^3.2.0",dayjs:"^1.11.1","qrcode.react":"^3.1.0","rc-cascader":"~3.12.0","rc-checkbox":"~3.1.0","rc-collapse":"~3.7.0","rc-dialog":"~9.1.0","rc-drawer":"~6.2.0","rc-dropdown":"~4.1.0","rc-field-form":"~1.34.0","rc-image":"~7.0.0","rc-input":"~1.1.0","rc-input-number":"~8.0.2","rc-mentions":"~2.5.0","rc-menu":"~9.10.0","rc-motion":"^2.7.3","rc-notification":"~5.0.4","rc-pagination":"~3.5.0","rc-picker":"~3.10.0","rc-progress":"~3.4.1","rc-rate":"~2.12.0","rc-resize-observer":"^1.2.0","rc-segmented":"~2.2.0","rc-select":"~14.5.0","rc-slider":"~10.1.0","rc-steps":"~6.0.0","rc-switch":"~4.1.0","rc-table":"~7.32.1","rc-tabs":"~12.9.0","rc-textarea":"~1.3.2","rc-tooltip":"~6.0.0","rc-tree":"~5.7.6","rc-tree-select":"~5.9.0","rc-upload":"~4.3.0","rc-util":"^5.32.0","scroll-into-view-if-needed":"^3.0.3","throttle-debounce":"^5.0.0"},jsx:`import React from 'react';
|
||
|
|
import { Progress, Space } from 'antd';
|
||
|
|
const App = () => (
|
||
|
|
<Space wrap>
|
||
|
|
<Progress type="circle" percent={75} format={(percent) => \`\${percent} Days\`} />
|
||
|
|
<Progress type="circle" percent={100} format={() => 'Done'} />
|
||
|
|
</Space>
|
||
|
|
);
|
||
|
|
export default App;
|
||
|
|
`,description:"<p>You can set a custom text by setting the <code>format</code> prop.</p>"}},{demo:{id:"components-progress-demo-dashboard"},previewerProps:{title:"Dashboard",filename:"components/progress/demo/dashboard.tsx",pkgDependencyList:{"@ant-design/colors":"^7.0.0","@ant-design/cssinjs":"^1.10.1","@ant-design/icons":"^5.1.0","@ant-design/react-slick":"~1.0.0","@babel/runtime":"^7.18.3","@ctrl/tinycolor":"^3.6.0","@rc-component/color-picker":"~1.4.0","@rc-component/mutate-observer":"^1.0.0","@rc-component/tour":"~1.8.0","@rc-component/trigger":"^1.13.0",classnames:"^2.2.6","copy-to-clipboard":"^3.2.0",dayjs:"^1.11.1","qrcode.react":"^3.1.0","rc-cascader":"~3.12.0","rc-checkbox":"~3.1.0","rc-collapse":"~3.7.0","rc-dialog":"~9.1.0","rc-drawer":"~6.2.0","rc-dropdown":"~4.1.0","rc-field-form":"~1.34.0","rc-image":"~7.0.0","rc-input":"~1.1.0","rc-input-number":"~8.0.2","rc-mentions":"~2.5.0","rc-menu":"~9.10.0","rc-motion":"^2.7.3","rc-notification":"~5.0.4","rc-pagination":"~3.5.0","rc-picker":"~3.10.0","rc-progress":"~3.4.1","rc-rate":"~2.12.0","rc-resize-observer":"^1.2.0","rc-segmented":"~2.2.0","rc-select":"~14.5.0","rc-slider":"~10.1.0","rc-steps":"~6.0.0","rc-switch":"~4.1.0","rc-table":"~7.32.1","rc-tabs":"~12.9.0","rc-textarea":"~1.3.2","rc-tooltip":"~6.0.0","rc-tree":"~5.7.6","rc-tree-select":"~5.9.0","rc-upload":"~4.3.0","rc-util":"^5.32.0","scroll-into-view-if-needed":"^3.0.3","throttle-debounce":"^5.0.0"},jsx:`import React from 'react';
|
||
|
|
import { Progress, Space } from 'antd';
|
||
|
|
const App = () => (
|
||
|
|
<Space wrap>
|
||
|
|
<Progress type="dashboard" percent={75} />
|
||
|
|
<Progress type="dashboard" percent={75} gapDegree={30} />
|
||
|
|
</Space>
|
||
|
|
);
|
||
|
|
export default App;
|
||
|
|
`,description:"<p>By setting <code>type=dashboard</code>, you can get a dashboard style of progress easily. Modify <code>gapDegree</code> to set the degree of gap.</p>"}},{demo:{id:"components-progress-demo-segment"},previewerProps:{title:"Progress bar with success segment",filename:"components/progress/demo/segment.tsx",pkgDependencyList:{"@ant-design/colors":"^7.0.0","@ant-design/cssinjs":"^1.10.1","@ant-design/icons":"^5.1.0","@ant-design/react-slick":"~1.0.0","@babel/runtime":"^7.18.3","@ctrl/tinycolor":"^3.6.0","@rc-component/color-picker":"~1.4.0","@rc-component/mutate-observer":"^1.0.0","@rc-component/tour":"~1.8.0","@rc-component/trigger":"^1.13.0",classnames:"^2.2.6","copy-to-clipboard":"^3.2.0",dayjs:"^1.11.1","qrcode.react":"^3.1.0","rc-cascader":"~3.12.0","rc-checkbox":"~3.1.0","rc-collapse":"~3.7.0","rc-dialog":"~9.1.0","rc-drawer":"~6.2.0","rc-dropdown":"~4.1.0","rc-field-form":"~1.34.0","rc-image":"~7.0.0","rc-input":"~1.1.0","rc-input-number":"~8.0.2","rc-mentions":"~2.5.0","rc-menu":"~9.10.0","rc-motion":"^2.7.3","rc-notification":"~5.0.4","rc-pagination":"~3.5.0","rc-picker":"~3.10.0","rc-progress":"~3.4.1","rc-rate":"~2.12.0","rc-resize-observer":"^1.2.0","rc-segmented":"~2.2.0","rc-select":"~14.5.0","rc-slider":"~10.1.0","rc-steps":"~6.0.0","rc-switch":"~4.1.0","rc-table":"~7.32.1","rc-tabs":"~12.9.0","rc-textarea":"~1.3.2","rc-tooltip":"~6.0.0","rc-tree":"~5.7.6","rc-tree-select":"~5.9.0","rc-upload":"~4.3.0","rc-util":"^5.32.0","scroll-into-view-if-needed":"^3.0.3","throttle-debounce":"^5.0.0"},jsx:`import React from 'react';
|
||
|
|
import { Progress, Tooltip, Space } from 'antd';
|
||
|
|
const App = () => (
|
||
|
|
<>
|
||
|
|
<Tooltip title="3 done / 3 in progress / 4 to do">
|
||
|
|
<Progress
|
||
|
|
percent={60}
|
||
|
|
success={{
|
||
|
|
percent: 30,
|
||
|
|
}}
|
||
|
|
/>
|
||
|
|
</Tooltip>
|
||
|
|
<Space wrap>
|
||
|
|
<Tooltip title="3 done / 3 in progress / 4 to do">
|
||
|
|
<Progress
|
||
|
|
percent={60}
|
||
|
|
success={{
|
||
|
|
percent: 30,
|
||
|
|
}}
|
||
|
|
type="circle"
|
||
|
|
/>
|
||
|
|
</Tooltip>
|
||
|
|
<Tooltip title="3 done / 3 in progress / 4 to do">
|
||
|
|
<Progress
|
||
|
|
percent={60}
|
||
|
|
success={{
|
||
|
|
percent: 30,
|
||
|
|
}}
|
||
|
|
type="dashboard"
|
||
|
|
/>
|
||
|
|
</Tooltip>
|
||
|
|
</Space>
|
||
|
|
</>
|
||
|
|
);
|
||
|
|
export default App;
|
||
|
|
`,description:"<p>Show several parts of progress with different status.</p>"}},{demo:{id:"components-progress-demo-linecap"},previewerProps:{title:"Stroke Linecap",filename:"components/progress/demo/linecap.tsx",pkgDependencyList:{"@ant-design/colors":"^7.0.0","@ant-design/cssinjs":"^1.10.1","@ant-design/icons":"^5.1.0","@ant-design/react-slick":"~1.0.0","@babel/runtime":"^7.18.3","@ctrl/tinycolor":"^3.6.0","@rc-component/color-picker":"~1.4.0","@rc-component/mutate-observer":"^1.0.0","@rc-component/tour":"~1.8.0","@rc-component/trigger":"^1.13.0",classnames:"^2.2.6","copy-to-clipboard":"^3.2.0",dayjs:"^1.11.1","qrcode.react":"^3.1.0","rc-cascader":"~3.12.0","rc-checkbox":"~3.1.0","rc-collapse":"~3.7.0","rc-dialog":"~9.1.0","rc-drawer":"~6.2.0","rc-dropdown":"~4.1.0","rc-field-form":"~1.34.0","rc-image":"~7.0.0","rc-input":"~1.1.0","rc-input-number":"~8.0.2","rc-mentions":"~2.5.0","rc-menu":"~9.10.0","rc-motion":"^2.7.3","rc-notification":"~5.0.4","rc-pagination":"~3.5.0","rc-picker":"~3.10.0","rc-progress":"~3.4.1","rc-rate":"~2.12.0","rc-resize-observer":"^1.2.0","rc-segmented":"~2.2.0","rc-select":"~14.5.0","rc-slider":"~10.1.0","rc-steps":"~6.0.0","rc-switch":"~4.1.0","rc-table":"~7.32.1","rc-tabs":"~12.9.0","rc-textarea":"~1.3.2","rc-tooltip":"~6.0.0","rc-tree":"~5.7.6","rc-tree-select":"~5.9.0","rc-upload":"~4.3.0","rc-util":"^5.32.0","scroll-into-view-if-needed":"^3.0.3","throttle-debounce":"^5.0.0"},jsx:`import React from 'react';
|
||
|
|
import { Progress, Space } from 'antd';
|
||
|
|
const App = () => (
|
||
|
|
<>
|
||
|
|
<Progress strokeLinecap="butt" percent={75} />
|
||
|
|
<Space wrap>
|
||
|
|
<Progress strokeLinecap="butt" type="circle" percent={75} />
|
||
|
|
<Progress strokeLinecap="butt" type="dashboard" percent={75} />
|
||
|
|
</Space>
|
||
|
|
</>
|
||
|
|
);
|
||
|
|
export default App;
|
||
|
|
`,description:'<p>By setting <code>strokeLinecap="butt"</code>, you can change the linecaps from <code>round</code> to <code>butt</code>, see <a href="https://developer.mozilla.org/docs/Web/SVG/Attribute/stroke-linecap">stroke-linecap</a> for more information.</p>'}},{demo:{id:"components-progress-demo-gradient-line"},previewerProps:{title:"Custom line gradient",filename:"components/progress/demo/gradient-line.tsx",pkgDependencyList:{"@ant-design/colors":"^7.0.0","@ant-design/cssinjs":"^1.10.1","@ant-design/icons":"^5.1.0","@ant-design/react-slick":"~1.0.0","@babel/runtime":"^7.18.3","@ctrl/tinycolor":"^3.6.0","@rc-component/color-picker":"~1.4.0","@rc-component/mutate-observer":"^1.0.0","@rc-component/tour":"~1.8.0","@rc-component/trigger":"^1.13.0",classnames:"^2.2.6","copy-to-clipboard":"^3.2.0",dayjs:"^1.11.1","qrcode.react":"^3.1.0","rc-cascader":"~3.12.0","rc-checkbox":"~3.1.0","rc-collapse":"~3.7.0","rc-dialog":"~9.1.0","rc-drawer":"~6.2.0","rc-dropdown":"~4.1.0","rc-field-form":"~1.34.0","rc-image":"~7.0.0","rc-input":"~1.1.0","rc-input-number":"~8.0.2","rc-mentions":"~2.5.0","rc-menu":"~9.10.0","rc-motion":"^2.7.3","rc-notification":"~5.0.4","rc-pagination":"~3.5.0","rc-picker":"~3.10.0","rc-progress":"~3.4.1","rc-rate":"~2.12.0","rc-resize-observer":"^1.2.0","rc-segmented":"~2.2.0","rc-select":"~14.5.0","rc-slider":"~10.1.0","rc-steps":"~6.0.0","rc-switch":"~4.1.0","rc-table":"~7.32.1","rc-tabs":"~12.9.0","rc-textarea":"~1.3.2","rc-tooltip":"~6.0.0","rc-tree":"~5.7.6","rc-tree-select":"~5.9.0","rc-upload":"~4.3.0","rc-util":"^5.32.0","scroll-into-view-if-needed":"^3.0.3","throttle-debounce":"^5.0.0"},jsx:`import React from 'react';
|
||
|
|
import { Progress, Space } from 'antd';
|
||
|
|
const App = () => (
|
||
|
|
<>
|
||
|
|
<Progress
|
||
|
|
percent={99.9}
|
||
|
|
strokeColor={{
|
||
|
|
'0%': '#108ee9',
|
||
|
|
'100%': '#87d068',
|
||
|
|
}}
|
||
|
|
/>
|
||
|
|
<Progress
|
||
|
|
percent={99.9}
|
||
|
|
status="active"
|
||
|
|
strokeColor={{
|
||
|
|
from: '#108ee9',
|
||
|
|
to: '#87d068',
|
||
|
|
}}
|
||
|
|
/>
|
||
|
|
<Space wrap>
|
||
|
|
<Progress
|
||
|
|
type="circle"
|
||
|
|
percent={90}
|
||
|
|
strokeColor={{
|
||
|
|
'0%': '#108ee9',
|
||
|
|
'100%': '#87d068',
|
||
|
|
}}
|
||
|
|
/>
|
||
|
|
<Progress
|
||
|
|
type="circle"
|
||
|
|
percent={100}
|
||
|
|
strokeColor={{
|
||
|
|
'0%': '#108ee9',
|
||
|
|
'100%': '#87d068',
|
||
|
|
}}
|
||
|
|
/>
|
||
|
|
</Space>
|
||
|
|
</>
|
||
|
|
);
|
||
|
|
export default App;
|
||
|
|
`,description:"<p>A package of <code>linear-gradient</code>. It is recommended to only pass two colors.</p>"}},{demo:{id:"components-progress-demo-steps"},previewerProps:{title:"Progress bar with steps",filename:"components/progress/demo/steps.tsx",pkgDependencyList:{"@ant-design/colors":"^7.0.0","@ant-design/cssinjs":"^1.10.1","@ant-design/icons":"^5.1.0","@ant-design/react-slick":"~1.0.0","@babel/runtime":"^7.18.3","@ctrl/tinycolor":"^3.6.0","@rc-component/color-picker":"~1.4.0","@rc-component/mutate-observer":"^1.0.0","@rc-component/tour":"~1.8.0","@rc-component/trigger":"^1.13.0",classnames:"^2.2.6","copy-to-clipboard":"^3.2.0",dayjs:"^1.11.1","qrcode.react":"^3.1.0","rc-cascader":"~3.12.0","rc-checkbox":"~3.1.0","rc-collapse":"~3.7.0","rc-dialog":"~9.1.0","rc-drawer":"~6.2.0","rc-dropdown":"~4.1.0","rc-field-form":"~1.34.0","rc-image":"~7.0.0","rc-input":"~1.1.0","rc-input-number":"~8.0.2","rc-mentions":"~2.5.0","rc-menu":"~9.10.0","rc-motion":"^2.7.3","rc-notification":"~5.0.4","rc-pagination":"~3.5.0","rc-picker":"~3.10.0","rc-progress":"~3.4.1","rc-rate":"~2.12.0","rc-resize-observer":"^1.2.0","rc-segmented":"~2.2.0","rc-select":"~14.5.0","rc-slider":"~10.1.0","rc-steps":"~6.0.0","rc-switch":"~4.1.0","rc-table":"~7.32.1","rc-tabs":"~12.9.0","rc-textarea":"~1.3.2","rc-tooltip":"~6.0.0","rc-tree":"~5.7.6","rc-tree-select":"~5.9.0","rc-upload":"~4.3.0","rc-util":"^5.32.0","scroll-into-view-if-needed":"^3.0.3","throttle-debounce":"^5.0.0"},jsx:`import React from 'react';
|
||
|
|
import { Progress } from 'antd';
|
||
|
|
import { red, green } from '@ant-design/colors';
|
||
|
|
const App = () => (
|
||
|
|
<>
|
||
|
|
<Progress percent={50} steps={3} />
|
||
|
|
<br />
|
||
|
|
<Progress percent={30} steps={5} />
|
||
|
|
<br />
|
||
|
|
<Progress percent={100} steps={5} size="small" strokeColor={green[6]} />
|
||
|
|
<br />
|
||
|
|
<Progress percent={60} steps={5} strokeColor={[green[6], green[6], red[5]]} />
|
||
|
|
</>
|
||
|
|
);
|
||
|
|
export default App;
|
||
|
|
`,description:"<p>A progress bar with steps.</p>"}},{demo:{id:"components-progress-demo-size"},previewerProps:{title:"Progress size",filename:"components/progress/demo/size.tsx",pkgDependencyList:{"@ant-design/colors":"^7.0.0","@ant-design/cssinjs":"^1.10.1","@ant-design/icons":"^5.1.0","@ant-design/react-slick":"~1.0.0","@babel/runtime":"^7.18.3","@ctrl/tinycolor":"^3.6.0","@rc-component/color-picker":"~1.4.0","@rc-component/mutate-observer":"^1.0.0","@rc-component/tour":"~1.8.0","@rc-component/trigger":"^1.13.0",classnames:"^2.2.6","copy-to-clipboard":"^3.2.0",dayjs:"^1.11.1","qrcode.react":"^3.1.0","rc-cascader":"~3.12.0","rc-checkbox":"~3.1.0","rc-collapse":"~3.7.0","rc-dialog":"~9.1.0","rc-drawer":"~6.2.0","rc-dropdown":"~4.1.0","rc-field-form":"~1.34.0","rc-image":"~7.0.0","rc-input":"~1.1.0","rc-input-number":"~8.0.2","rc-mentions":"~2.5.0","rc-menu":"~9.10.0","rc-motion":"^2.7.3","rc-notification":"~5.0.4","rc-pagination":"~3.5.0","rc-picker":"~3.10.0","rc-progress":"~3.4.1","rc-rate":"~2.12.0","rc-resize-observer":"^1.2.0","rc-segmented":"~2.2.0","rc-select":"~14.5.0","rc-slider":"~10.1.0","rc-steps":"~6.0.0","rc-switch":"~4.1.0","rc-table":"~7.32.1","rc-tabs":"~12.9.0","rc-textarea":"~1.3.2","rc-tooltip":"~6.0.0","rc-tree":"~5.7.6","rc-tree-select":"~5.9.0","rc-upload":"~4.3.0","rc-util":"^5.32.0","scroll-into-view-if-needed":"^3.0.3","throttle-debounce":"^5.0.0"},jsx:`import { Progress, Space } from 'antd';
|
||
|
|
import React from 'react';
|
||
|
|
const App = () => (
|
||
|
|
<>
|
||
|
|
<Space direction="vertical">
|
||
|
|
<Progress percent={50} />
|
||
|
|
<Progress percent={50} size="small" />
|
||
|
|
<Progress percent={50} size={[300, 20]} />
|
||
|
|
</Space>
|
||
|
|
<br />
|
||
|
|
<br />
|
||
|
|
<Space size={30}>
|
||
|
|
<Progress type="circle" percent={50} />
|
||
|
|
<Progress type="circle" percent={50} size="small" />
|
||
|
|
<Progress type="circle" percent={50} size={20} />
|
||
|
|
</Space>
|
||
|
|
<br />
|
||
|
|
<br />
|
||
|
|
<Space size={30}>
|
||
|
|
<Progress type="dashboard" percent={50} />
|
||
|
|
<Progress type="dashboard" percent={50} size="small" />
|
||
|
|
<Progress type="dashboard" percent={50} size={20} />
|
||
|
|
</Space>
|
||
|
|
<br />
|
||
|
|
<br />
|
||
|
|
<Space size={30} wrap>
|
||
|
|
<Progress steps={3} percent={50} />
|
||
|
|
<Progress steps={3} percent={50} size="small" />
|
||
|
|
<Progress steps={3} percent={50} size={20} />
|
||
|
|
<Progress steps={3} percent={50} size={[20, 30]} />
|
||
|
|
</Space>
|
||
|
|
</>
|
||
|
|
);
|
||
|
|
export default App;
|
||
|
|
`,description:"<p>The size of progress.</p>"}}]}),(0,e.tZ)("div",{className:"markdown"},(0,e.tZ)("h2",{id:"api"},(0,e.tZ)(t.Z,{"aria-hidden":"true",tabIndex:"-1",href:"#api",sourceType:"a"},(0,e.tZ)("span",{className:"icon icon-link"})),"API"),(0,e.tZ)("p",null,r[6].value),(0,e.tZ)(c.Z,{className:"component-api-table"},(0,e.tZ)("thead",null,(0,e.tZ)("tr",null,(0,e.tZ)("th",null,r[7].value),(0,e.tZ)("th",null,r[8].value),(0,e.tZ)("th",null,r[9].value),(0,e.tZ)("th",null,r[10].value),(0,e.tZ)("th",null,r[11].value))),(0,e.tZ)("tbody",null,(0,e.tZ)("tr",null,(0,e.tZ)("td",null,r[12].value),(0,e.tZ)("td",null,r[13].value),(0,e.tZ)("td",null,r[14].value),(0,e.tZ)("td",null,r[15].value,(0,e.tZ)("code",null,r[16].value)),(0,e.tZ)("td",null,r[17].value)),(0,e.tZ)("tr",null,(0,e.tZ)("td",null,r[18].value),(0,e.tZ)("td",null,r[19].value),(0,e.tZ)("td",null,r[20].value),(0,e.tZ)("td",null,r[21].value),(0,e.tZ)("td",null,r[22].value)),(0,e.tZ)("tr",null,(0,e.tZ)("td",null,r[23].value),(0,e.tZ)("td",null,r[24].value),(0,e.tZ)("td",null,r[25].value),(0,e.tZ)("td",null,r[26].value),(0,e.tZ)("td",null)),(0,e.tZ)("tr",null,(0,e.tZ)("td",null,r[27].value),(0,e.tZ)("td",null,r[28].value,(0,e.tZ)("code",null,r[29].value),r[30].value,(0,e.tZ)("code",null,r[31].value),r[32].value,(0,e.tZ)("code",null,r[33].value),r[34].value,(0,e.tZ)("code",null,r[35].value),r[36].value),(0,e.tZ)("td",null,r[37].value),(0,e.tZ)("td",null,r[38].value),(0,e.tZ)("td",null)),(0,e.tZ)("tr",null,(0,e.tZ)("td",null,r[39].value),(0,e.tZ)("td",null,r[40].value),(0,e.tZ)("td",null,r[41].value),(0,e.tZ)("td",null,r[42].value),(0,e.tZ)("td",null,r[43].value)),(0,e.tZ)("tr",null,(0,e.tZ)("td",null,r[44].value),(0,e.tZ)("td",null,r[45].value),(0,e.tZ)("td",null,(0,e.tZ)("code",null,r[46].value),r[47].value,(0,e.tZ)("code",null,r[48].value),r[49].value,(0,e.tZ)("code",null,r[50].value),r[51].value,(0,e.tZ)(t.Z,{href:"https://developer.mozilla.org/docs/Web/SVG/Attribute/stroke-linecap",sourceType:"a"},r[52].value)),(0,e.tZ)("td",null,(0,e.tZ)("code",null,r[53].value)),(0,e.tZ)("td",null,r[54].value)),(0,e.tZ)("tr",null,(0,e.tZ)("td",null,r[55].value),(0,e.tZ)("td",null,r[56].value),(0,e.tZ)("td",null,r[57].value),(0,e.tZ)("td",null,r[58].value),(0,e.tZ)("td",null,r[59].value)),(0,e.tZ)("tr",null,(0,e.tZ)("td",null,r[60].value),(0,e.tZ)("td",null,r[61].value),(0,e.tZ)("td",null,r[62].value),(0,e.tZ)("td",null,r[63].value),(0,e.tZ)("td",null,r[64].value)),(0,e.tZ)("tr",null,(0,e.tZ)("td",null,r[65].value),(0,e.tZ)("td",null,r[66].value,(0,e.tZ)("code",null,r[67].value),r[68].value,(0,e.tZ)("code",null,r[69].value),r[70].value,(0,e.tZ)("code",null,r[71].value)),(0,e.tZ)("td",null,r[72].value),(0,e.tZ)("td",null,(0,e.tZ)("code",null,r[73].value)),(0,e.tZ)("td",null)),(0,e.tZ)("tr",null,(0,e.tZ)("td",null,r[74].value),(0,e.tZ)("td",null,r[75].value),(0,e.tZ)("td",null,r[76].value),(0,e.tZ)("td",null,r[77].value),(0,e.tZ)("td",null,r[78].value)))),(0,e.tZ)("h3",{id:"typeline"},(0,e.tZ)(t.Z,{"aria-hidden":"true",tabIndex:"-1",href:"#typeline",sourceType:"a"},(0,e.tZ)("span",{className:"icon icon-link"})),(0,e.tZ)("code",null,r[79].value)),(0,e.tZ)(c.Z,{className:"component-api-table"},(0,e.tZ)("thead",null,(0,e.tZ)("tr",null,(0,e.tZ)("th",null,r[80].value),(0,e.tZ)("th",null,r[81].value),(0,e.tZ)("th",null,r[82].value),(0,e.tZ)("th",null,r[83].value),(0,e.tZ)("th",null,r[84].value))),(0,e.tZ)("tbody",null,(0,e.tZ)("tr",null,(0,e.tZ)("td",null,r[85].value),(0,e.tZ)("td",null,r[86].value),(0,e.tZ)("td",null,r[87].value),(0,e.tZ)("td",null,r[88].value),(0,e.tZ)("td",null,r[89].value)),(0,e.tZ)("tr",null,(0,e.tZ)("td",null,r[90].value),(0,e.tZ)("td",null,r[91].value,(0,e.tZ)("code",null,r[92].value),r[93].value,(0,e.tZ)("code",null,r[94].value),r[95].value,(0,e.tZ)("code",null,r[96].value),r[97].value),(0,e.tZ)("td",null,r[98].value),(0,e.tZ)("td",null,r[99].value),(0,e.tZ)("td",null,r[100].value,(0,e.tZ)("code",null,r[101].value))))),(0,e.tZ)("h3",{id:"typecircle"},(0,e.tZ)(t.Z,{"aria-hidden":"true",tabIndex:"-1",href:"#typecircle",sourceType:"a"},(0,e.tZ)("span",{className:"icon ico
|