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
54 KiB
911 lines
54 KiB
"use strict";(self.webpackChunkantd=self.webpackChunkantd||[]).push([[48],{68537: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),S=t(316073),k=t(24628),y=t(719260),P=t(956140),o=t(127179),l=t(905388),T=t(40428),w=t(606965),D=t(268696),C=t(587302),r=t(424128),E=t(249706),A=t(795127),L=t(116846),O=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,(0,e.tZ)("code",null,n[0].value),n[1].value),(0,e.tZ)("h2",{id:"when-to-use"},(0,e.tZ)(r.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,n[2].value),(0,e.tZ)("h2",{id:"examples"},(0,e.tZ)(r.Z,{"aria-hidden":"true",tabIndex:"-1",href:"#examples",sourceType:"a"},(0,e.tZ)("span",{className:"icon icon-link"})),"Examples")),(0,e.tZ)(l.Z,{items:[{demo:{id:"components-steps-demo-simple"},previewerProps:{title:"Basic",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>The most basic step bar.</p>"}},{demo:{id:"components-steps-demo-small-size"},previewerProps:{title:"Mini version",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>By setting like this: <code><Steps size="small"></code>, you can get a mini version.</p>'}},{demo:{id:"components-steps-demo-icon"},previewerProps:{title:"With icon",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>You can use your own custom icons by setting the property <code>icon</code> for <code>items</code>.</p>"}},{demo:{id:"components-steps-demo-step-next"},previewerProps:{title:"Switch Step",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>Cooperate with the content and buttons, to represent the progress of a process.</p>"}},{demo:{id:"components-steps-demo-vertical"},previewerProps:{title:"Vertical",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>A simple step bar in the vertical direction.</p>"}},{demo:{id:"components-steps-demo-vertical-small"},previewerProps:{title:"Vertical mini version",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>A simple mini version step bar in the vertical direction.</p>"}},{demo:{id:"components-steps-demo-error"},previewerProps:{title:"Error status",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>By using <code>status</code> of <code>Steps</code>, you can specify the state for current step.</p>"}},{demo:{id:"components-steps-demo-progress-dot"},previewerProps:{title:"Dot Style",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>Steps with progress dot style.</p>"}},{demo:{id:"components-steps-demo-customized-progress-dot"},previewerProps:{title:"Customized Dot Style",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>You can customize the display for Steps with progress dot style.</p>"}},{demo:{id:"components-steps-demo-progress-dot-small"},previewerProps:{debug:!0,title:"Dot Style Size Small",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>Steps with progress dot style.</p>"}},{demo:{id:"components-steps-demo-clickable"},previewerProps:{title:"Clickable",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>Setting <code>onChange</code> makes Steps clickable.</p>"}},{demo:{id:"components-steps-demo-nav"},previewerProps:{title:"Navigation Steps",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>Navigation steps.</p>"}},{demo:{id:"components-steps-demo-progress"},previewerProps:{title:"Steps with progress",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>Steps with progress.</p>"}},{demo:{id:"components-steps-demo-label-placement"},previewerProps:{title:"Label Placement",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>Set labelPlacement to <code>vertical</code>.</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 inside 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>Test style of Steps inside Steps.</p>"}},{demo:{id:"components-steps-demo-inline"},previewerProps:{title:"Inline Steps",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>Inline type steps, suitable for displaying the process and current state of the object in the list content scene.</p>"}},{demo:{id:"components-steps-demo-wireframe"},previewerProps:{debug:!0,title:"Wireframe",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>Wireframe style.</p>"}},{demo:{id:"components-steps-demo-component-token"},previewerProps:{debug:!0,title:"Component 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[3].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[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)("th",null,n[8].value))),(0,e.tZ)("tbody",null,(0,e.tZ)("tr",null,(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,n[12].value),(0,e.tZ)("td",null)),(0,e.tZ)("tr",null,(0,e.tZ)("td",null,n[13].value),(0,e.tZ)("td",null,n[14].value,(0,e.tZ)("code",null,n[15].value),n[16].value,(0,e.tZ)("code",null,n[17].value)),(0,e.tZ)("td",null,n[18].value),(0,e.tZ)("td",null,n[19].value),(0,e.tZ)("td",null)),(0,e.tZ)("tr",null,(0,e.tZ)("td",null,n[20].value),(0,e.tZ)("td",null,n[21].value,(0,e.tZ)("code",null,n[22].value),n[23].value,(0,e.tZ)("code",null,n[24].value)),(0,e.tZ)("td",null,n[25].value),(0,e.tZ)("td",null,(0,e.tZ)("code",null,n[26].value)),(0,e.tZ)("td",null)),(0,e.tZ)("tr",null,(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,n[30].value),(0,e.tZ)("td",null)),(0,e.tZ)("tr",null,(0,e.tZ)("td",null,n[31].value),(0,e.tZ)("td",null,n[32].value,(0,e.tZ)("code",null,n[33].value),n[34].value,(0,e.tZ)("code",null,n[35].value),n[36].value),(0,e.tZ)("td",null,n[37].value),(0,e.tZ)("td",null,(0,e.tZ)("code",null,n[38].value)),(0,e.tZ)("td",null)),(0,e.tZ)("tr",null,(0,e.tZ)("td",null,n[39].value),(0,e.tZ)("td",null,n[40].value,(0,e.tZ)("code",null,n[41].value),n[42].value),(0,e.tZ)("td",null,n[43].value),(0,e.tZ)("td",null,n[44].value),(0,e.tZ)("td",null,n[45].value)),(0,e.tZ)("tr",null,(0,e.tZ)("td",null,n[46].value),(0,e.tZ)("td",null,n[47].value,(0,e.tZ)("code",null,n[48].value)),(0,e.tZ)("td",null,n[49].value),(0,e.tZ)("td",null,n[50].value),(0,e.tZ)("td",null)),(0,e.tZ)("tr",null,(0,e.tZ)("td",null,n[51].value),(0,e.tZ)("td",null,n[52].value,(0,e.tZ)("code",null,n[53].value)),(0,e.tZ)("td",null,n[54].value),(0,e.tZ)("td",null,n[55].value),(0,e.tZ)("td",null)),(0,e.tZ)("tr",null,(0,e.tZ)("td",null,n[56].value),(0,e.tZ)("td",null,n[57].value,(0,e.tZ)("code",null,n[58].value),n[59].value,(0,e.tZ)("code",null,n[60].value),n[61].value),(0,e.tZ)("td",null,n[62].value),(0,e.tZ)("td",null,(0,e.tZ)("code",null,n[63].value)),(0,e.tZ)("td",null)),(0,e.tZ)("tr",null,(0,e.tZ)("td",null,n[64].value),(0,e.tZ)("td",null,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),n[71].value,(0,e.tZ)("code",null,n[72].value)),(0,e.tZ)("td",null,n[73].value),(0,e.tZ)("td",null,(0,e.tZ)("code",null,n[74].value)),(0,e.tZ)("td",null)),(0,e.tZ)("tr",null,(0,e.tZ)("td",null,n[75].value),(0,e.tZ)("td",null,n[76].value,(0,e.tZ)("code",null,n[77].value),n[78].value,(0,e.tZ)("code",null,n[79].value),n[80].value,(0,e.tZ)("code",null,n[81].value)),(0,e.tZ)("td",null,n[82].value),(0,e.tZ)("td",null,(0,e.tZ)("code",null,n[83].value)),(0,e.tZ)("td",null,n[84].value)),(0,e.tZ)("tr",null,(0,e.tZ)("td",null,n[85].value),(0,e.tZ)("td",null,n[86].value),(0,e.tZ)("td",null,n[87].value),(0,e.tZ)("td",null,n[88].value),(0,e.tZ)("td",null)),(0,e.tZ)("tr",null,(0,e.tZ)("td",null,n[89].value),(0,e.tZ)("td",null,n[90].value),(0,e.tZ)("td",null,(0,e.tZ)(r.Z,{to:"#stepitem",sourceType:"Link"},n[91].value)),(0,e.tZ)("td",null,n[92].value),(0,e.tZ)("td",null,n[93].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[94].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[95].value),(0,e.tZ)("th",null,n[96].value),(0,e.tZ)("th",null,n[97].value),(0,e.tZ)("th",null,n[98].value),(0,e.tZ)("th",null,n[99].value))),(0,e.tZ)("tbody",null,(0,e.tZ)("tr",null,(0,e.tZ)("td",null,n[100].value),(0,e.tZ)("td",null,n[101].value),(0,e.tZ)("td",null,n[102].value),(0,e.tZ)("td",null,n[103].value),(0,e.tZ)("td",null)),(0,e.tZ)("tr",null,(0,e.tZ)("td",null,n[104].value),(0,e.tZ)("td",null,n[105].value,(0,e.tZ)("code",null,n[106].value),n[107].value,(0,e.tZ)("code",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)),(0,e.tZ)("tr",null,(0,e.tZ)("td",null,n[111].value),(0,e.tZ)("td",null,n[112].value),(0,e.tZ)("td",null,n[113].value),(0,e.tZ)("td",null,n[114].value),(0,e.tZ)("td",null)),(0,e.tZ)("tr",null,(0,e.tZ)("td",null,n[115].value),(0,e.tZ)("td",null,n[116].value,(0,e.tZ)("code",null,n[117].value),n[118].value,(0,e.tZ)("code",null,n[119].value),n[120].value,(0,e.tZ)("code",null,n[121].value),n[122].value,(0,e.tZ)("code",null,n[123].value)),(0,e.tZ)("td",null,n[124].value),(0,e.tZ)("td",null,(0,e.tZ)("code",null,n[125].value)),(0,e.tZ)("td",null)),(0,e.tZ)("tr",null,(0,e.tZ)("td",null,n[126].value),(0,e.tZ)("td",null,n[127].value),(0,e.tZ)("td",null,n[128].value),(0,e.tZ)("td",null,n[129].value),(0,e.tZ)("td",null)),(0,e.tZ)("tr",null,(0,e.tZ)("td",null,n[130].value),(0,e.tZ)("td",null,n[131].value,(0,e.tZ)("code",null,n[132].value),n[133].value,(0,e.tZ)("code",null,n[134].value)),(0,e.tZ)("td",null,(0,e.tZ)(r.Z,{to:"#stepitem",sourceType:"Link"},n[135].value)),(0,e.tZ)("td",null,n[136].value),(0,e.tZ)("td",null,n[137].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[138].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[139].value),(0,e.tZ)("th",null,n[140].value),(0,e.tZ)("th",null,n[141].value),(0,e.tZ)("th",null,n[142].value),(0,e.tZ)("th",null,n[143].value))),(0,e.tZ)("tbody",null,(0,e.tZ)("tr",null,(0,e.tZ)("td",null,n[144].value),(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)),(0,e.tZ)("tr",null,(0,e.tZ)("td",null,n[148].value),(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)),(0,e.tZ)("tr",null,(0,e.tZ)("td",null,n[152].value),(0,e.tZ)("td",null,n[153].value),(0,e.tZ)("td",null,n[154].value),(0,e.tZ)("td",null,n[155].value),(0,e.tZ)("td",null)),(0,e.tZ)("tr",null,(0,e.tZ)("td",null,n[156].value),(0,e.tZ)("td",null,n[157].value,(0,e.tZ)("code",null,n[158].value),n[159].value,(0,e.tZ)("code",null,n[160].value),n[161].value,(0,e.tZ)("code",null,n[162].value),n[163].value,(0,e.tZ)("code",null,n[164].value),n[165].value,(0,e.tZ)("code",null,n[166].value),n[167].value,(0,e.tZ)("code",null,n[168].value)),(0,e.tZ)("td",null,n[169].value),(0,e.tZ)("td",null,(0,e.tZ)("code",null,n[170].value)),(0,e.tZ)("td",null)),(0,e.tZ)("tr",null,(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,n[174].value),(0,e.tZ)("td",null)),(0,e.tZ)("tr",null,(0,e.tZ)("td",null,n[175].value),(0,e.tZ)("td",null,n[176].value),(0,e.tZ)("td",null,n[177].value),(0,e.tZ)("td",null,n[178].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}}]);
|
|
|