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.
911 lines
55 KiB
911 lines
55 KiB
"use strict";(self.webpackChunkantd=self.webpackChunkantd||[]).push([[6573],{864982:function(u,c,t){t.r(c);var m=t(502143),g=t(968521),_=t(720719),v=t(28840),h=t(759907),i=t(828089),Z=t(825673),b=t(902068),f=t(574399),x=t(863942),k=t(316073),S=t(24628),P=t(719260),T=t(956140),o=t(127179),l=t(905388),w=t(40428),y=t(606965),D=t(268696),C=t(587302),r=t(424128),E=t(249706),A=t(795127),O=t(116846),L=t(212039),I=t(73024),M=t(553913),s=t(606641),a=t(667294),e=t(370917);function d(){var p=(0,s.eL)(),n=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,n[0].value),(0,e.tZ)("h2",{id:"\u4F55\u65F6\u4F7F\u7528"},(0,e.tZ)(r.Z,{"aria-hidden":"true",tabIndex:"-1",href:"#\u4F55\u65F6\u4F7F\u7528",sourceType:"a"},(0,e.tZ)("span",{className:"icon icon-link"})),"\u4F55\u65F6\u4F7F\u7528"),(0,e.tZ)("p",null,n[1].value),(0,e.tZ)("h2",{id:"\u4EE3\u7801\u6F14\u793A"},(0,e.tZ)(r.Z,{"aria-hidden":"true",tabIndex:"-1",href:"#\u4EE3\u7801\u6F14\u793A",sourceType:"a"},(0,e.tZ)("span",{className:"icon icon-link"})),"\u4EE3\u7801\u6F14\u793A")),(0,e.tZ)(l.Z,{items:[{demo:{id:"components-steps-demo-simple"},previewerProps:{title:"\u57FA\u672C\u7528\u6CD5",filename:"components/steps/demo/simple.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 { Steps } from 'antd';
|
|
const description = 'This is a description.';
|
|
const App = () => (
|
|
<Steps
|
|
current={1}
|
|
items={[
|
|
{
|
|
title: 'Finished',
|
|
description,
|
|
},
|
|
{
|
|
title: 'In Progress',
|
|
description,
|
|
subTitle: 'Left 00:00:08',
|
|
},
|
|
{
|
|
title: 'Waiting',
|
|
description,
|
|
},
|
|
]}
|
|
/>
|
|
);
|
|
export default App;
|
|
`,description:"<p>\u7B80\u5355\u7684\u6B65\u9AA4\u6761\u3002</p>"}},{demo:{id:"components-steps-demo-small-size"},previewerProps:{title:"\u8FF7\u4F60\u7248",filename:"components/steps/demo/small-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 React from 'react';
|
|
import { Steps } from 'antd';
|
|
const App = () => (
|
|
<Steps
|
|
size="small"
|
|
current={1}
|
|
items={[
|
|
{
|
|
title: 'Finished',
|
|
},
|
|
{
|
|
title: 'In Progress',
|
|
},
|
|
{
|
|
title: 'Waiting',
|
|
},
|
|
]}
|
|
/>
|
|
);
|
|
export default App;
|
|
`,description:'<p>\u8FF7\u4F60\u7248\u7684\u6B65\u9AA4\u6761\uFF0C\u901A\u8FC7\u8BBE\u7F6E <code><Steps size="small"></code> \u542F\u7528.</p>'}},{demo:{id:"components-steps-demo-icon"},previewerProps:{title:"\u5E26\u56FE\u6807\u7684\u6B65\u9AA4\u6761",filename:"components/steps/demo/icon.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 { LoadingOutlined, SmileOutlined, SolutionOutlined, UserOutlined } from '@ant-design/icons';
|
|
import { Steps } from 'antd';
|
|
const App = () => (
|
|
<Steps
|
|
items={[
|
|
{
|
|
title: 'Login',
|
|
status: 'finish',
|
|
icon: <UserOutlined />,
|
|
},
|
|
{
|
|
title: 'Verification',
|
|
status: 'finish',
|
|
icon: <SolutionOutlined />,
|
|
},
|
|
{
|
|
title: 'Pay',
|
|
status: 'process',
|
|
icon: <LoadingOutlined />,
|
|
},
|
|
{
|
|
title: 'Done',
|
|
status: 'wait',
|
|
icon: <SmileOutlined />,
|
|
},
|
|
]}
|
|
/>
|
|
);
|
|
export default App;
|
|
`,description:"<p>\u901A\u8FC7\u8BBE\u7F6E <code>items</code> \u7684 <code>icon</code> \u5C5E\u6027\uFF0C\u53EF\u4EE5\u542F\u7528\u81EA\u5B9A\u4E49\u56FE\u6807\u3002</p>"}},{demo:{id:"components-steps-demo-step-next"},previewerProps:{title:"\u6B65\u9AA4\u5207\u6362",filename:"components/steps/demo/step-next.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 { Button, message, Steps, theme } from 'antd';
|
|
const steps = [
|
|
{
|
|
title: 'First',
|
|
content: 'First-content',
|
|
},
|
|
{
|
|
title: 'Second',
|
|
content: 'Second-content',
|
|
},
|
|
{
|
|
title: 'Last',
|
|
content: 'Last-content',
|
|
},
|
|
];
|
|
const App = () => {
|
|
const { token } = theme.useToken();
|
|
const [current, setCurrent] = useState(0);
|
|
const next = () => {
|
|
setCurrent(current + 1);
|
|
};
|
|
const prev = () => {
|
|
setCurrent(current - 1);
|
|
};
|
|
const items = steps.map((item) => ({
|
|
key: item.title,
|
|
title: item.title,
|
|
}));
|
|
const contentStyle = {
|
|
lineHeight: '260px',
|
|
textAlign: 'center',
|
|
color: token.colorTextTertiary,
|
|
backgroundColor: token.colorFillAlter,
|
|
borderRadius: token.borderRadiusLG,
|
|
border: \`1px dashed \${token.colorBorder}\`,
|
|
marginTop: 16,
|
|
};
|
|
return (
|
|
<>
|
|
<Steps current={current} items={items} />
|
|
<div style={contentStyle}>{steps[current].content}</div>
|
|
<div
|
|
style={{
|
|
marginTop: 24,
|
|
}}
|
|
>
|
|
{current < steps.length - 1 && (
|
|
<Button type="primary" onClick={() => next()}>
|
|
Next
|
|
</Button>
|
|
)}
|
|
{current === steps.length - 1 && (
|
|
<Button type="primary" onClick={() => message.success('Processing complete!')}>
|
|
Done
|
|
</Button>
|
|
)}
|
|
{current > 0 && (
|
|
<Button
|
|
style={{
|
|
margin: '0 8px',
|
|
}}
|
|
onClick={() => prev()}
|
|
>
|
|
Previous
|
|
</Button>
|
|
)}
|
|
</div>
|
|
</>
|
|
);
|
|
};
|
|
export default App;
|
|
`,description:"<p>\u901A\u5E38\u914D\u5408\u5185\u5BB9\u53CA\u6309\u94AE\u4F7F\u7528\uFF0C\u8868\u793A\u4E00\u4E2A\u6D41\u7A0B\u7684\u5904\u7406\u8FDB\u5EA6\u3002</p>"}},{demo:{id:"components-steps-demo-vertical"},previewerProps:{title:"\u7AD6\u76F4\u65B9\u5411\u7684\u6B65\u9AA4\u6761",filename:"components/steps/demo/vertical.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 { Steps } from 'antd';
|
|
const description = 'This is a description.';
|
|
const App = () => (
|
|
<Steps
|
|
direction="vertical"
|
|
current={1}
|
|
items={[
|
|
{
|
|
title: 'Finished',
|
|
description,
|
|
},
|
|
{
|
|
title: 'In Progress',
|
|
description,
|
|
},
|
|
{
|
|
title: 'Waiting',
|
|
description,
|
|
},
|
|
]}
|
|
/>
|
|
);
|
|
export default App;
|
|
`,description:"<p>\u7B80\u5355\u7684\u7AD6\u76F4\u65B9\u5411\u7684\u6B65\u9AA4\u6761\u3002</p>"}},{demo:{id:"components-steps-demo-vertical-small"},previewerProps:{title:"\u7AD6\u76F4\u65B9\u5411\u7684\u5C0F\u578B\u6B65\u9AA4\u6761",filename:"components/steps/demo/vertical-small.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 { Steps } from 'antd';
|
|
const description = 'This is a description.';
|
|
const App = () => (
|
|
<Steps
|
|
direction="vertical"
|
|
size="small"
|
|
current={1}
|
|
items={[
|
|
{
|
|
title: 'Finished',
|
|
description,
|
|
},
|
|
{
|
|
title: 'In Progress',
|
|
description,
|
|
},
|
|
{
|
|
title: 'Waiting',
|
|
description,
|
|
},
|
|
]}
|
|
/>
|
|
);
|
|
export default App;
|
|
`,description:"<p>\u7B80\u5355\u7684\u7AD6\u76F4\u65B9\u5411\u7684\u5C0F\u578B\u6B65\u9AA4\u6761\u3002</p>"}},{demo:{id:"components-steps-demo-error"},previewerProps:{title:"\u6B65\u9AA4\u8FD0\u884C\u9519\u8BEF",filename:"components/steps/demo/error.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 { Steps } from 'antd';
|
|
const description = 'This is a description';
|
|
const App = () => (
|
|
<Steps
|
|
current={1}
|
|
status="error"
|
|
items={[
|
|
{
|
|
title: 'Finished',
|
|
description,
|
|
},
|
|
{
|
|
title: 'In Process',
|
|
description,
|
|
},
|
|
{
|
|
title: 'Waiting',
|
|
description,
|
|
},
|
|
]}
|
|
/>
|
|
);
|
|
export default App;
|
|
`,description:"<p>\u4F7F\u7528 Steps \u7684 <code>status</code> \u5C5E\u6027\u6765\u6307\u5B9A\u5F53\u524D\u6B65\u9AA4\u7684\u72B6\u6001\u3002</p>"}},{demo:{id:"components-steps-demo-progress-dot"},previewerProps:{title:"\u70B9\u72B6\u6B65\u9AA4\u6761",filename:"components/steps/demo/progress-dot.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 { Divider, Steps } from 'antd';
|
|
const App = () => (
|
|
<>
|
|
<Steps
|
|
progressDot
|
|
current={1}
|
|
items={[
|
|
{
|
|
title: 'Finished',
|
|
description: 'This is a description.',
|
|
},
|
|
{
|
|
title: 'In Progress',
|
|
description: 'This is a description.',
|
|
},
|
|
{
|
|
title: 'Waiting',
|
|
description: 'This is a description.',
|
|
},
|
|
]}
|
|
/>
|
|
<Divider />
|
|
<Steps
|
|
progressDot
|
|
current={1}
|
|
direction="vertical"
|
|
items={[
|
|
{
|
|
title: 'Finished',
|
|
description: 'This is a description. This is a description.',
|
|
},
|
|
{
|
|
title: 'Finished',
|
|
description: 'This is a description. This is a description.',
|
|
},
|
|
{
|
|
title: 'In Progress',
|
|
description: 'This is a description. This is a description.',
|
|
},
|
|
{
|
|
title: 'Waiting',
|
|
description: 'This is a description.',
|
|
},
|
|
{
|
|
title: 'Waiting',
|
|
description: 'This is a description.',
|
|
},
|
|
]}
|
|
/>
|
|
</>
|
|
);
|
|
export default App;
|
|
`,description:"<p>\u5305\u542B\u6B65\u9AA4\u70B9\u7684\u8FDB\u5EA6\u6761\u3002</p>"}},{demo:{id:"components-steps-demo-customized-progress-dot"},previewerProps:{title:"\u81EA\u5B9A\u4E49\u70B9\u72B6\u6B65\u9AA4\u6761",filename:"components/steps/demo/customized-progress-dot.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 { Popover, Steps } from 'antd';
|
|
const customDot = (dot, { status, index }) => (
|
|
<Popover
|
|
content={
|
|
<span>
|
|
step {index} status: {status}
|
|
</span>
|
|
}
|
|
>
|
|
{dot}
|
|
</Popover>
|
|
);
|
|
const description = 'You can hover on the dot.';
|
|
const App = () => (
|
|
<Steps
|
|
current={1}
|
|
progressDot={customDot}
|
|
items={[
|
|
{
|
|
title: 'Finished',
|
|
description,
|
|
},
|
|
{
|
|
title: 'In Progress',
|
|
description,
|
|
},
|
|
{
|
|
title: 'Waiting',
|
|
description,
|
|
},
|
|
{
|
|
title: 'Waiting',
|
|
description,
|
|
},
|
|
]}
|
|
/>
|
|
);
|
|
export default App;
|
|
`,description:"<p>\u4E3A\u70B9\u72B6\u6B65\u9AA4\u6761\u589E\u52A0\u81EA\u5B9A\u4E49\u5C55\u793A\u3002</p>"}},{demo:{id:"components-steps-demo-progress-dot-small"},previewerProps:{debug:!0,title:"\u8FF7\u4F60\u7248\u70B9\u72B6\u6B65\u9AA4\u6761",filename:"components/steps/demo/progress-dot-small.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 { Divider, Steps } from 'antd';
|
|
const App = () => (
|
|
<>
|
|
<Steps
|
|
progressDot
|
|
current={1}
|
|
size="small"
|
|
items={[
|
|
{
|
|
title: 'Finished',
|
|
description: 'This is a description.',
|
|
},
|
|
{
|
|
title: 'In Progress',
|
|
description: 'This is a description.',
|
|
},
|
|
{
|
|
title: 'Waiting',
|
|
description: 'This is a description.',
|
|
},
|
|
]}
|
|
/>
|
|
<Divider />
|
|
<Steps
|
|
progressDot
|
|
current={1}
|
|
direction="vertical"
|
|
size="small"
|
|
items={[
|
|
{
|
|
title: 'Finished',
|
|
description: 'This is a description. This is a description.',
|
|
},
|
|
{
|
|
title: 'Finished',
|
|
description: 'This is a description. This is a description.',
|
|
},
|
|
{
|
|
title: 'In Progress',
|
|
description: 'This is a description. This is a description.',
|
|
},
|
|
{
|
|
title: 'Waiting',
|
|
description: 'This is a description.',
|
|
},
|
|
{
|
|
title: 'Waiting',
|
|
description: 'This is a description.',
|
|
},
|
|
]}
|
|
/>
|
|
</>
|
|
);
|
|
export default App;
|
|
`,description:"<p>\u5305\u542B\u6B65\u9AA4\u70B9\u7684\u8FDB\u5EA6\u6761\u3002</p>"}},{demo:{id:"components-steps-demo-clickable"},previewerProps:{title:"\u53EF\u70B9\u51FB",filename:"components/steps/demo/clickable.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 { Divider, Steps } from 'antd';
|
|
const App = () => {
|
|
const [current, setCurrent] = useState(0);
|
|
const onChange = (value) => {
|
|
console.log('onChange:', value);
|
|
setCurrent(value);
|
|
};
|
|
const description = 'This is a description.';
|
|
return (
|
|
<>
|
|
<Steps
|
|
current={current}
|
|
onChange={onChange}
|
|
items={[
|
|
{
|
|
title: 'Step 1',
|
|
description,
|
|
},
|
|
{
|
|
title: 'Step 2',
|
|
description,
|
|
},
|
|
{
|
|
title: 'Step 3',
|
|
description,
|
|
},
|
|
]}
|
|
/>
|
|
|
|
<Divider />
|
|
|
|
<Steps
|
|
current={current}
|
|
onChange={onChange}
|
|
direction="vertical"
|
|
items={[
|
|
{
|
|
title: 'Step 1',
|
|
description,
|
|
},
|
|
{
|
|
title: 'Step 2',
|
|
description,
|
|
},
|
|
{
|
|
title: 'Step 3',
|
|
description,
|
|
},
|
|
]}
|
|
/>
|
|
</>
|
|
);
|
|
};
|
|
export default App;
|
|
`,description:"<p>\u8BBE\u7F6E <code>onChange</code> \u540E\uFF0CSteps \u53D8\u4E3A\u53EF\u70B9\u51FB\u72B6\u6001\u3002</p>"}},{demo:{id:"components-steps-demo-nav"},previewerProps:{title:"\u5BFC\u822A\u6B65\u9AA4",filename:"components/steps/demo/nav.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 { Steps } from 'antd';
|
|
const App = () => {
|
|
const [current, setCurrent] = useState(0);
|
|
const onChange = (value) => {
|
|
console.log('onChange:', value);
|
|
setCurrent(value);
|
|
};
|
|
return (
|
|
<>
|
|
<Steps
|
|
type="navigation"
|
|
size="small"
|
|
current={current}
|
|
onChange={onChange}
|
|
className="site-navigation-steps"
|
|
items={[
|
|
{
|
|
title: 'Step 1',
|
|
subTitle: '00:00:05',
|
|
status: 'finish',
|
|
description: 'This is a description.',
|
|
},
|
|
{
|
|
title: 'Step 2',
|
|
subTitle: '00:01:02',
|
|
status: 'process',
|
|
description: 'This is a description.',
|
|
},
|
|
{
|
|
title: 'Step 3',
|
|
subTitle: 'waiting for longlong time',
|
|
status: 'wait',
|
|
description: 'This is a description.',
|
|
},
|
|
]}
|
|
/>
|
|
<Steps
|
|
type="navigation"
|
|
current={current}
|
|
onChange={onChange}
|
|
className="site-navigation-steps"
|
|
items={[
|
|
{
|
|
status: 'finish',
|
|
title: 'Step 1',
|
|
},
|
|
{
|
|
status: 'process',
|
|
title: 'Step 2',
|
|
},
|
|
{
|
|
status: 'wait',
|
|
title: 'Step 3',
|
|
},
|
|
{
|
|
status: 'wait',
|
|
title: 'Step 4',
|
|
},
|
|
]}
|
|
/>
|
|
<Steps
|
|
type="navigation"
|
|
size="small"
|
|
current={current}
|
|
onChange={onChange}
|
|
className="site-navigation-steps"
|
|
items={[
|
|
{
|
|
status: 'finish',
|
|
title: 'finish 1',
|
|
},
|
|
{
|
|
status: 'finish',
|
|
title: 'finish 2',
|
|
},
|
|
{
|
|
status: 'process',
|
|
title: 'current process',
|
|
},
|
|
{
|
|
status: 'wait',
|
|
title: 'wait',
|
|
disabled: true,
|
|
},
|
|
]}
|
|
/>
|
|
</>
|
|
);
|
|
};
|
|
export default App;
|
|
`,description:"<p>\u5BFC\u822A\u7C7B\u578B\u7684\u6B65\u9AA4\u6761\u3002</p>"}},{demo:{id:"components-steps-demo-progress"},previewerProps:{title:"\u5E26\u6709\u8FDB\u5EA6\u7684\u6B65\u9AA4",filename:"components/steps/demo/progress.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 { Steps } from 'antd';
|
|
const description = 'This is a description.';
|
|
const App = () => (
|
|
<Steps
|
|
current={1}
|
|
percent={60}
|
|
items={[
|
|
{
|
|
title: 'Finished',
|
|
description,
|
|
},
|
|
{
|
|
title: 'In Progress',
|
|
subTitle: 'Left 00:00:08',
|
|
description,
|
|
},
|
|
{
|
|
title: 'Waiting',
|
|
description,
|
|
},
|
|
]}
|
|
/>
|
|
);
|
|
export default App;
|
|
`,description:"<p>\u5E26\u6709\u8FDB\u5EA6\u7684\u6B65\u9AA4\u3002</p>"}},{demo:{id:"components-steps-demo-label-placement"},previewerProps:{title:"\u6807\u7B7E\u653E\u7F6E\u4F4D\u7F6E",filename:"components/steps/demo/label-placement.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 { Steps } from 'antd';
|
|
const description = 'This is a description.';
|
|
const items = [
|
|
{
|
|
title: 'Finished',
|
|
description,
|
|
},
|
|
{
|
|
title: 'In Progress',
|
|
description,
|
|
},
|
|
{
|
|
title: 'Waiting',
|
|
description,
|
|
},
|
|
];
|
|
const App = () => (
|
|
<>
|
|
<Steps current={1} labelPlacement="vertical" items={items} />
|
|
<br />
|
|
<Steps current={1} percent={60} labelPlacement="vertical" items={items} />
|
|
<br />
|
|
<Steps current={1} size="small" labelPlacement="vertical" items={items} />
|
|
</>
|
|
);
|
|
export default App;
|
|
`,description:"<p>\u4FEE\u6539\u6807\u7B7E\u653E\u7F6E\u4F4D\u7F6E\u4E3A <code>vertical</code>\u3002</p>"}},{demo:{id:"components-steps-demo-progress-debug"},previewerProps:{debug:!0,title:"Progress Debug",filename:"components/steps/demo/progress-debug.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 { Button, Steps, Space } from 'antd';
|
|
const App = () => {
|
|
const [percent, setPercentage] = useState(0);
|
|
const [current, setCurrent] = useState(1);
|
|
const [status, setStatus] = useState('process');
|
|
const description = 'This is a description.';
|
|
const items = [
|
|
{
|
|
title: 'Finished',
|
|
description,
|
|
},
|
|
{
|
|
title: 'In Progress',
|
|
subTitle: 'Left 00:00:08',
|
|
description,
|
|
},
|
|
{
|
|
title: 'Waiting',
|
|
description,
|
|
},
|
|
];
|
|
return (
|
|
<>
|
|
<Space.Compact block>
|
|
<Button onClick={() => setPercentage(undefined)}>Percentage to undefined</Button>
|
|
<Button onClick={() => setPercentage((prev) => ((prev ?? 0) + 10) % 100)}>
|
|
Percentage +
|
|
</Button>
|
|
<Button onClick={() => setCurrent((prev) => (prev + 1) % 3)}>Current +</Button>
|
|
<Button onClick={() => setStatus('wait')}>Status Wait</Button>
|
|
<Button onClick={() => setStatus('process')}>Status Process</Button>
|
|
<Button onClick={() => setStatus('finish')}>Status Finish</Button>
|
|
<Button onClick={() => setStatus('error')}>Status Error</Button>
|
|
</Space.Compact>
|
|
<br />
|
|
<Steps current={current} percent={percent} status={status} items={items} />
|
|
<Steps current={current} percent={percent} status={status} size="small" items={items} />
|
|
<Steps
|
|
current={current}
|
|
percent={percent}
|
|
status={status}
|
|
direction="vertical"
|
|
items={items}
|
|
/>
|
|
<Steps
|
|
current={current}
|
|
percent={percent}
|
|
status={status}
|
|
size="small"
|
|
direction="vertical"
|
|
items={items}
|
|
/>
|
|
</>
|
|
);
|
|
};
|
|
export default App;
|
|
`,description:"<p>Buggy!</p>"}},{demo:{id:"components-steps-demo-steps-in-steps"},previewerProps:{debug:!0,title:"Steps \u5D4C\u5957 Steps",filename:"components/steps/demo/steps-in-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, { useState } from 'react';
|
|
import { Card, Radio, Steps } from 'antd';
|
|
const App = () => {
|
|
const [size, setSize] = useState('default');
|
|
const description = 'This is a description.';
|
|
const horizontalSteps = (
|
|
<Card>
|
|
<Steps
|
|
size={size}
|
|
items={[
|
|
{
|
|
title: 'Finished',
|
|
description,
|
|
},
|
|
{
|
|
title: 'In Progress',
|
|
description,
|
|
},
|
|
{
|
|
title: 'Waiting',
|
|
description,
|
|
},
|
|
]}
|
|
/>
|
|
</Card>
|
|
);
|
|
return (
|
|
<>
|
|
<Radio.Group
|
|
style={{
|
|
marginBottom: 16,
|
|
}}
|
|
value={size}
|
|
onChange={(e) => setSize(e.target.value)}
|
|
>
|
|
<Radio value="small">Small</Radio>
|
|
<Radio value="default">Default</Radio>
|
|
</Radio.Group>
|
|
<Steps
|
|
size={size}
|
|
direction="vertical"
|
|
items={[
|
|
{
|
|
title: 'Finished',
|
|
description: horizontalSteps,
|
|
},
|
|
{
|
|
title: 'In Progress',
|
|
description,
|
|
},
|
|
{
|
|
title: 'Waiting',
|
|
description,
|
|
},
|
|
]}
|
|
/>
|
|
</>
|
|
);
|
|
};
|
|
export default App;
|
|
`,description:"<p>\u6D4B\u8BD5 Steps \u5D4C\u5957 Steps \u7684\u6837\u5F0F\u3002</p>"}},{demo:{id:"components-steps-demo-inline"},previewerProps:{title:"\u5185\u8054\u6B65\u9AA4",filename:"components/steps/demo/inline.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 { Avatar, List, Steps } from 'antd';
|
|
import React from 'react';
|
|
const data = [
|
|
{
|
|
title: 'Ant Design Title 1',
|
|
current: 0,
|
|
},
|
|
{
|
|
title: 'Ant Design Title 2',
|
|
current: 1,
|
|
status: 'error',
|
|
},
|
|
{
|
|
title: 'Ant Design Title 3',
|
|
current: 2,
|
|
},
|
|
{
|
|
title: 'Ant Design Title 4',
|
|
current: 1,
|
|
},
|
|
];
|
|
const items = [
|
|
{
|
|
title: 'Step 1',
|
|
description: 'This is a Step 1.',
|
|
},
|
|
{
|
|
title: 'Step 2',
|
|
description: 'This is a Step 2.',
|
|
},
|
|
{
|
|
title: 'Step 3',
|
|
description: 'This is a Step 3.',
|
|
},
|
|
];
|
|
const App = () => (
|
|
<div>
|
|
<List
|
|
itemLayout="horizontal"
|
|
dataSource={data}
|
|
renderItem={(item, index) => (
|
|
<List.Item>
|
|
<List.Item.Meta
|
|
avatar={
|
|
<Avatar src={\`https://xsgames.co/randomusers/avatar.php?g=pixel&key=\${index}\`} />
|
|
}
|
|
title={<a href="https://ant.design">{item.title}</a>}
|
|
description="Ant Design, a design language for background applications, is refined by Ant UED Team"
|
|
/>
|
|
<Steps
|
|
style={{
|
|
marginTop: 8,
|
|
}}
|
|
type="inline"
|
|
current={item.current}
|
|
status={item.status}
|
|
items={items}
|
|
/>
|
|
</List.Item>
|
|
)}
|
|
/>
|
|
</div>
|
|
);
|
|
export default App;
|
|
`,description:"<p>\u5185\u8054\u7C7B\u578B\u7684\u6B65\u9AA4\u6761\uFF0C\u9002\u7528\u4E8E\u5217\u8868\u5185\u5BB9\u573A\u666F\u4E2D\u5C55\u793A\u5BF9\u8C61\u6240\u5728\u6D41\u7A0B\u3001\u5F53\u524D\u72B6\u6001\u7684\u60C5\u51B5\u3002</p>"}},{demo:{id:"components-steps-demo-wireframe"},previewerProps:{debug:!0,title:"\u7EBF\u6846\u98CE\u683C",filename:"components/steps/demo/wireframe.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 { ConfigProvider, Steps } from 'antd';
|
|
const description = 'This is a description.';
|
|
const App = () => (
|
|
<ConfigProvider
|
|
theme={{
|
|
token: {
|
|
wireframe: true,
|
|
},
|
|
}}
|
|
>
|
|
<Steps
|
|
current={1}
|
|
items={[
|
|
{
|
|
title: 'Finished',
|
|
description,
|
|
},
|
|
{
|
|
title: 'In Progress',
|
|
description,
|
|
subTitle: 'Left 00:00:08',
|
|
},
|
|
{
|
|
title: 'Waiting',
|
|
description,
|
|
},
|
|
]}
|
|
/>
|
|
</ConfigProvider>
|
|
);
|
|
export default App;
|
|
`,description:"<p>\u7EBF\u6846\u98CE\u683C\u3002</p>"}},{demo:{id:"components-steps-demo-component-token"},previewerProps:{debug:!0,title:"\u7EC4\u4EF6 Token",filename:"components/steps/demo/component-token.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 { ConfigProvider, Steps } from 'antd';
|
|
import { LoadingOutlined, SmileOutlined, SolutionOutlined, UserOutlined } from '@ant-design/icons';
|
|
const description = 'This is a description.';
|
|
const App = () => (
|
|
<ConfigProvider
|
|
theme={{
|
|
components: {
|
|
Steps: {
|
|
titleLineHeight: 20,
|
|
customIconSize: 40,
|
|
customIconTop: 0,
|
|
customIconFontSize: 32,
|
|
iconSize: 20,
|
|
iconTop: 0,
|
|
// magic for ui experience
|
|
iconFontSize: 12,
|
|
iconSizeSM: 16,
|
|
dotSize: 20,
|
|
dotCurrentSize: 24,
|
|
navArrowColor: '#163CFF',
|
|
navContentMaxWidth: 100,
|
|
descriptionMaxWidth: 100,
|
|
},
|
|
},
|
|
}}
|
|
>
|
|
<Steps
|
|
current={1}
|
|
items={[
|
|
{
|
|
title: 'Finished',
|
|
description,
|
|
},
|
|
{
|
|
title: 'In Progress',
|
|
description,
|
|
subTitle: 'Left 00:00:08',
|
|
},
|
|
{
|
|
title: 'Waiting',
|
|
description,
|
|
},
|
|
]}
|
|
/>
|
|
<Steps
|
|
size="small"
|
|
current={1}
|
|
items={[
|
|
{
|
|
title: 'Finished',
|
|
description,
|
|
},
|
|
{
|
|
title: 'In Progress',
|
|
description,
|
|
subTitle: 'Left 00:00:08',
|
|
},
|
|
{
|
|
title: 'Waiting',
|
|
description,
|
|
},
|
|
]}
|
|
/>
|
|
<Steps
|
|
items={[
|
|
{
|
|
title: 'Login',
|
|
status: 'finish',
|
|
icon: <UserOutlined />,
|
|
},
|
|
{
|
|
title: 'Verification',
|
|
status: 'finish',
|
|
icon: <SolutionOutlined />,
|
|
},
|
|
{
|
|
title: 'Pay',
|
|
status: 'process',
|
|
icon: <LoadingOutlined />,
|
|
},
|
|
{
|
|
title: 'Done',
|
|
status: 'wait',
|
|
icon: <SmileOutlined />,
|
|
},
|
|
]}
|
|
/>
|
|
<Steps
|
|
progressDot
|
|
current={1}
|
|
items={[
|
|
{
|
|
title: 'Finished',
|
|
description: 'This is a description.',
|
|
},
|
|
{
|
|
title: 'In Progress',
|
|
description: 'This is a description.',
|
|
},
|
|
{
|
|
title: 'Waiting',
|
|
description: 'This is a description.',
|
|
},
|
|
]}
|
|
/>
|
|
<Steps
|
|
type="navigation"
|
|
current={1}
|
|
items={[
|
|
{
|
|
title: 'Step 1',
|
|
subTitle: '00:00:05',
|
|
status: 'finish',
|
|
description: 'This is a description.',
|
|
},
|
|
{
|
|
title: 'Step 2',
|
|
subTitle: '00:01:02',
|
|
status: 'process',
|
|
description: 'This is a description.',
|
|
},
|
|
{
|
|
title: 'Step 3',
|
|
subTitle: 'waiting for longlong time',
|
|
status: 'wait',
|
|
description: 'This is a description.',
|
|
},
|
|
]}
|
|
/>
|
|
</ConfigProvider>
|
|
);
|
|
export default App;
|
|
`,description:"<p>Component Token Debug.</p>"}}]}),(0,e.tZ)("div",{className:"markdown"},(0,e.tZ)("h2",{id:"api"},(0,e.tZ)(r.Z,{"aria-hidden":"true",tabIndex:"-1",href:"#api",sourceType:"a"},(0,e.tZ)("span",{className:"icon icon-link"})),"API"),(0,e.tZ)("h3",{id:"steps"},(0,e.tZ)(r.Z,{"aria-hidden":"true",tabIndex:"-1",href:"#steps",sourceType:"a"},(0,e.tZ)("span",{className:"icon icon-link"})),"Steps"),(0,e.tZ)("p",null,n[2].value),(0,e.tZ)(i.Z,{className:"component-api-table"},(0,e.tZ)("thead",null,(0,e.tZ)("tr",null,(0,e.tZ)("th",null,n[3].value),(0,e.tZ)("th",null,n[4].value),(0,e.tZ)("th",null,n[5].value),(0,e.tZ)("th",null,n[6].value),(0,e.tZ)("th",null,n[7].value))),(0,e.tZ)("tbody",null,(0,e.tZ)("tr",null,(0,e.tZ)("td",null,n[8].value),(0,e.tZ)("td",null,n[9].value),(0,e.tZ)("td",null,n[10].value),(0,e.tZ)("td",null,n[11].value),(0,e.tZ)("td",null)),(0,e.tZ)("tr",null,(0,e.tZ)("td",null,n[12].value),(0,e.tZ)("td",null,n[13].value,(0,e.tZ)("code",null,n[14].value),n[15].value),(0,e.tZ)("td",null,n[16].value),(0,e.tZ)("td",null,n[17].value),(0,e.tZ)("td",null)),(0,e.tZ)("tr",null,(0,e.tZ)("td",null,n[18].value),(0,e.tZ)("td",null,n[19].value,(0,e.tZ)("code",null,n[20].value),n[21].value,(0,e.tZ)("code",null,n[22].value),n[23].value),(0,e.tZ)("td",null,n[24].value),(0,e.tZ)("td",null,(0,e.tZ)("code",null,n[25].value)),(0,e.tZ)("td",null)),(0,e.tZ)("tr",null,(0,e.tZ)("td",null,n[26].value),(0,e.tZ)("td",null,n[27].value),(0,e.tZ)("td",null,n[28].value),(0,e.tZ)("td",null,n[29].value),(0,e.tZ)("td",null)),(0,e.tZ)("tr",null,(0,e.tZ)("td",null,n[30].value),(0,e.tZ)("td",null,n[31].value,(0,e.tZ)("code",null,n[32].value),n[33].value),(0,e.tZ)("td",null,n[34].value),(0,e.tZ)("td",null,(0,e.tZ)("code",null,n[35].value)),(0,e.tZ)("td",null)),(0,e.tZ)("tr",null,(0,e.tZ)("td",null,n[36].value),(0,e.tZ)("td",null,n[37].value,(0,e.tZ)("code",null,n[38].value),n[39].value),(0,e.tZ)("td",null,n[40].value),(0,e.tZ)("td",null,n[41].value),(0,e.tZ)("td",null,n[42].value)),(0,e.tZ)("tr",null,(0,e.tZ)("td",null,n[43].value),(0,e.tZ)("td",null,n[44].value,(0,e.tZ)("code",null,n[45].value)),(0,e.tZ)("td",null,n[46].value),(0,e.tZ)("td",null,n[47].value),(0,e.tZ)("td",null)),(0,e.tZ)("tr",null,(0,e.tZ)("td",null,n[48].value),(0,e.tZ)("td",null,n[49].value,(0,e.tZ)("code",null,n[50].value),n[51].value),(0,e.tZ)("td",null,n[52].value),(0,e.tZ)("td",null,n[53].value),(0,e.tZ)("td",null)),(0,e.tZ)("tr",null,(0,e.tZ)("td",null,n[54].value),(0,e.tZ)("td",null,n[55].value,(0,e.tZ)("code",null,n[56].value),n[57].value,(0,e.tZ)("code",null,n[58].value),n[59].value),(0,e.tZ)("td",null,n[60].value),(0,e.tZ)("td",null,(0,e.tZ)("code",null,n[61].value)),(0,e.tZ)("td",null)),(0,e.tZ)("tr",null,(0,e.tZ)("td",null,n[62].value),(0,e.tZ)("td",null,n[63].value,(0,e.tZ)("code",null,n[64].value),n[65].value,(0,e.tZ)("code",null,n[66].value),n[67].value,(0,e.tZ)("code",null,n[68].value),n[69].value,(0,e.tZ)("code",null,n[70].value)),(0,e.tZ)("td",null,n[71].value),(0,e.tZ)("td",null,(0,e.tZ)("code",null,n[72].value)),(0,e.tZ)("td",null)),(0,e.tZ)("tr",null,(0,e.tZ)("td",null,n[73].value),(0,e.tZ)("td",null,n[74].value,(0,e.tZ)("code",null,n[75].value),n[76].value,(0,e.tZ)("code",null,n[77].value),n[78].value,(0,e.tZ)("code",null,n[79].value)),(0,e.tZ)("td",null,n[80].value),(0,e.tZ)("td",null,(0,e.tZ)("code",null,n[81].value)),(0,e.tZ)("td",null,n[82].value)),(0,e.tZ)("tr",null,(0,e.tZ)("td",null,n[83].value),(0,e.tZ)("td",null,n[84].value),(0,e.tZ)("td",null,n[85].value),(0,e.tZ)("td",null,n[86].value),(0,e.tZ)("td",null)),(0,e.tZ)("tr",null,(0,e.tZ)("td",null,n[87].value),(0,e.tZ)("td",null,n[88].value),(0,e.tZ)("td",null,(0,e.tZ)(r.Z,{to:"#stepitem",sourceType:"Link"},n[89].value)),(0,e.tZ)("td",null,n[90].value),(0,e.tZ)("td",null,n[91].value)))),(0,e.tZ)("h3",{id:"typeinline"},(0,e.tZ)(r.Z,{"aria-hidden":"true",tabIndex:"-1",href:"#typeinline",sourceType:"a"},(0,e.tZ)("span",{className:"icon icon-link"})),(0,e.tZ)("code",null,n[92].value)),(0,e.tZ)(i.Z,{className:"component-api-table"},(0,e.tZ)("thead",null,(0,e.tZ)("tr",null,(0,e.tZ)("th",null,n[93].value),(0,e.tZ)("th",null,n[94].value),(0,e.tZ)("th",null,n[95].value),(0,e.tZ)("th",null,n[96].value),(0,e.tZ)("th",null,n[97].value))),(0,e.tZ)("tbody",null,(0,e.tZ)("tr",null,(0,e.tZ)("td",null,n[98].value),(0,e.tZ)("td",null,n[99].value),(0,e.tZ)("td",null,n[100].value),(0,e.tZ)("td",null,n[101].value),(0,e.tZ)("td",null)),(0,e.tZ)("tr",null,(0,e.tZ)("td",null,n[102].value),(0,e.tZ)("td",null,n[103].value,(0,e.tZ)("code",null,n[104].value),n[105].value),(0,e.tZ)("td",null,n[106].value),(0,e.tZ)("td",null,n[107].value),(0,e.tZ)("td",null)),(0,e.tZ)("tr",null,(0,e.tZ)("td",null,n[108].value),(0,e.tZ)("td",null,n[109].value),(0,e.tZ)("td",null,n[110].value),(0,e.tZ)("td",null,n[111].value),(0,e.tZ)("td",null)),(0,e.tZ)("tr",null,(0,e.tZ)("td",null,n[112].value),(0,e.tZ)("td",null,n[113].value,(0,e.tZ)("code",null,n[114].value),n[115].value,(0,e.tZ)("code",null,n[116].value),n[117].value,(0,e.tZ)("code",null,n[118].value),n[119].value,(0,e.tZ)("code",null,n[120].value)),(0,e.tZ)("td",null,n[121].value),(0,e.tZ)("td",null,(0,e.tZ)("code",null,n[122].value)),(0,e.tZ)("td",null)),(0,e.tZ)("tr",null,(0,e.tZ)("td",null,n[123].value),(0,e.tZ)("td",null,n[124].value),(0,e.tZ)("td",null,n[125].value),(0,e.tZ)("td",null,n[126].value),(0,e.tZ)("td",null)),(0,e.tZ)("tr",null,(0,e.tZ)("td",null,n[127].value),(0,e.tZ)("td",null,n[128].value,(0,e.tZ)("code",null,n[129].value),n[130].value,(0,e.tZ)("code",null,n[131].value)),(0,e.tZ)("td",null,(0,e.tZ)(r.Z,{to:"#stepitem",sourceType:"Link"},n[132].value)),(0,e.tZ)("td",null,n[133].value),(0,e.tZ)("td",null,n[134].value)))),(0,e.tZ)("h3",{id:"stepitem"},(0,e.tZ)(r.Z,{"aria-hidden":"true",tabIndex:"-1",href:"#stepitem",sourceType:"a"},(0,e.tZ)("span",{className:"icon icon-link"})),"StepItem"),(0,e.tZ)("p",null,n[135].value),(0,e.tZ)(i.Z,{className:"component-api-table"},(0,e.tZ)("thead",null,(0,e.tZ)("tr",null,(0,e.tZ)("th",null,n[136].value),(0,e.tZ)("th",null,n[137].value),(0,e.tZ)("th",null,n[138].value),(0,e.tZ)("th",null,n[139].value),(0,e.tZ)("th",null,n[140].value))),(0,e.tZ)("tbody",null,(0,e.tZ)("tr",null,(0,e.tZ)("td",null,n[141].value),(0,e.tZ)("td",null,n[142].value),(0,e.tZ)("td",null,n[143].value),(0,e.tZ)("td",null,n[144].value),(0,e.tZ)("td",null)),(0,e.tZ)("tr",null,(0,e.tZ)("td",null,n[145].value),(0,e.tZ)("td",null,n[146].value),(0,e.tZ)("td",null,n[147].value),(0,e.tZ)("td",null,n[148].value),(0,e.tZ)("td",null)),(0,e.tZ)("tr",null,(0,e.tZ)("td",null,n[149].value),(0,e.tZ)("td",null,n[150].value),(0,e.tZ)("td",null,n[151].value),(0,e.tZ)("td",null,n[152].value),(0,e.tZ)("td",null)),(0,e.tZ)("tr",null,(0,e.tZ)("td",null,n[153].value),(0,e.tZ)("td",null,n[154].value,(0,e.tZ)("code",null,n[155].value),n[156].value,(0,e.tZ)("code",null,n[157].value),n[158].value,(0,e.tZ)("code",null,n[159].value),n[160].value,(0,e.tZ)("code",null,n[161].value),n[162].value,(0,e.tZ)("code",null,n[163].value)),(0,e.tZ)("td",null,n[164].value),(0,e.tZ)("td",null,(0,e.tZ)("code",null,n[165].value)),(0,e.tZ)("td",null)),(0,e.tZ)("tr",null,(0,e.tZ)("td",null,n[166].value),(0,e.tZ)("td",null,n[167].value),(0,e.tZ)("td",null,n[168].value),(0,e.tZ)("td",null,n[169].value),(0,e.tZ)("td",null)),(0,e.tZ)("tr",null,(0,e.tZ)("td",null,n[170].value),(0,e.tZ)("td",null,n[171].value),(0,e.tZ)("td",null,n[172].value),(0,e.tZ)("td",null,n[173].value),(0,e.tZ)("td",null)))),(0,e.tZ)("h2",{id:"design-token"},(0,e.tZ)(r.Z,{"aria-hidden":"true",tabIndex:"-1",href:"#design-token",sourceType:"a"},(0,e.tZ)("span",{className:"icon icon-link"})),"Design Token")),(0,e.tZ)(o.Z,{component:"Steps"})))}c.default=d}}]);
|
|
|