ant.design
Open in
urlscan Pro
2a06:98c1:3120::3
Public Scan
URL:
https://ant.design/components/steps/
Submission: On March 15 via manual from IN — Scanned from NL
Submission: On March 15 via manual from IN — Scanned from NL
Form analysis 28 forms found in the DOM
POST https://codesandbox.io/api/v1/sandboxes/define
<form class="code-box-code-action" action="https://codesandbox.io/api/v1/sandboxes/define" method="POST" target="_blank"><input type="hidden" name="parameters"
value="N4IgZglgNgpgziAXKADgQwMYGs0HMYB0AVnAPYB2SoGFALjObVSLRLbEiAEJpwQYACALQC0jACYABAKwEAzAQCMIADQgAtmgiVEIbeJgAPYgjUGUDA-QwR4zMbXGdZC5WskOhBvrnIB6fgoEXSg0ejgmd1oATws4PwAnGEwmXQA9RQAOAgAGXNUQSRi4xOSMWi9SdU4M7LycgqSUmqzc_LUm8srq9Nb6xrKKuAwEiBRaYJA0gBY2hoBfMxgANwARGAtyKxs7ZBZY-BGx1KnZvOkQRZBh0fHg0Ai0BJPOoaO7gUfngoAjAFdoE5dK8hDdjnABP9AQVwi9BqD3hMBLDhEIGMsALwkcRVAowIgwcqcEFgj74wlMK4_BKkADucBgCTgUAgESQAG0QAA-PIAJgApAVyKRaAIDGgnABdeZXfRGAgYOD3EA0RgME6XNRy4wTQzMVX0RicCDqFCkZ4CABKgwEYBp6gEAHJXo6ANwAHXIJrNFuAAhGyXoltIIoE81t9qdIJx6j8GBZ6rdnu95tF63UpAjVSdBD8BgzSfInoDYRgwZFAAocRg_up1QR8LQAKKwOuMLjRACS4grjoNWnIjMdAEphwQkltGRWADzpzN-LnDj3kAQCTUgfOkAi6_V0dXG02pq02u3Z52DQspi2O3PahVKy-H30CADK9BQEPDp4djoc4kLxZBKK3iIhAFACBiToACoABasgI8FoGKhy3KwFAEIWqoRAIACCKAoIgx4pAQABiADCEECBWw4QVyVGequ05vhscAMau_p_AkE60BiwCKPMbGrmwMDqHAvHsoJ7HAJJ7HImwsCEY6JHaKyMEwP-KgyexIGoWB5CaSuslhgZRkCNJhmmaw7AwIpnYrgACjSuBJA-JmmchpJofpWmrnAfw_FB8k2U6AAyMBgKKOQ5IgUUxZkjpubJixaeZ7lydZikAOpaKw5C4AlPkeaBFCJexyUWQI0psQunpLp6npGD6wHhWgfxQKKeEoK6653jBtDqFAu5qkauiSdOACEqwAPJkVBACa9lNgIfUDVyWnTitUACKEeUYu6IAMPta0VbJG3JOIx1pYxda0EhGAwU8DI8ftfy0GAQiZEdhXXTAt0COQaB1ntIDLLYtJNft_p7owwO0hA4i0DBGIGKDGAwEIcMIzBKgIV6rBoFACIEzAGKKDjcAwaM5BYEItCkEIkA8cKX0nUZ043UhANA_tiMiejNBQOakMGuqwMAMRRZLOQs2l05-GpEqXe504_KQ4jRErsviBAywIeIwP9tojKQxE0SwMD6DiNreWEby0woIYkM1azp2eVyWGihmfyMAAcmrMCUdWtb1o2LZ8-2XY9n2dADkOS5y27hVy6r6ua-xcubWnlwykAA"><span
role="img" class="anticon code-box-codesandbox"><svg viewBox="0 0 1024 1024" fill="currentColor">
<path
d="M755 140.3l0.5-0.3h0.3L512 0 268.3 140h-0.3l0.8 0.4L68.6 256v512L512 1024l443.4-256V256L755 140.3z m-30 506.4v171.2L548 920.1V534.7L883.4 341v215.7l-158.4 90z m-584.4-90.6V340.8L476 534.4v385.7L300 818.5V646.7l-159.4-90.6zM511.7 280l171.1-98.3 166.3 96-336.9 194.5-337-194.6 165.7-95.7L511.7 280z">
</path>
</svg></span></form>POST https://codepen.io/pen/define
<form class="code-box-code-action" action="https://codepen.io/pen/define" method="POST" target="_blank"><input type="hidden" name="data"
value="{"title":"Basic - antd@5.3.1","html":"\n <!DOCTYPE html>\n <html lang=\"en\">\n <head>\n <meta charset=\"utf-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1, shrink-to-fit=no\">\n <meta name=\"theme-color\" content=\"#000000\">\n </head>\n <body>\n <div id=\"container\" style=\"padding: 24px\" />\n <script>const mountNode = document.getElementById('container');</script>\n </body>\n </html>\n ","js":"const { createRoot } = ReactDOM;\nconst { Steps } = antd;\nconst description = 'This is a description.';\nconst App = () => (\n <Steps\n current={1}\n items={[\n {\n title: 'Finished',\n description,\n },\n {\n title: 'In Progress',\n description,\n subTitle: 'Left 00:00:08',\n },\n {\n title: 'Waiting',\n description,\n },\n ]}\n />\n);\nconst ComponentDemo = App;\n\n\ncreateRoot(mountNode).render(<ComponentDemo />);\n","editors":"001","css":"","js_external":"https://unpkg.com/react@18/umd/react.development.js;https://unpkg.com/react-dom@18/umd/react-dom.development.js;https://unpkg.com/dayjs@1/dayjs.min.js;https://unpkg.com/antd@5.3.1/dist/antd-with-locales.js;https://unpkg.com/@ant-design/icons/dist/index.umd.js;https://unpkg.com/react-router-dom/dist/umd/react-router-dom.production.min.js;https://unpkg.com/react-router/dist/umd/react-router.production.min.js","js_pre_processor":"typescript"}"><span
role="img" class="anticon code-box-codepen"><svg viewBox="0 0 15 15" fill="currentColor">
<path
d="M14.777304,4.75062256 L7.77734505,0.0839936563 C7.60939924,-0.0279665065 7.39060662,-0.0279665065 7.22266081,0.0839936563 L0.222701813,4.75062256 C0.0836082937,4.84334851 5.66973453e-05,4.99945222 4.6875e-05,5.16662013 L4.6875e-05,9.83324903 C4.6875e-05,10.0004355 0.0836088906,10.1565596 0.222701812,10.2492466 L7.22266081,14.9158755 C7.30662908,14.9718752 7.403316,14.999875 7.50000292,14.999875 C7.59668984,14.999875 7.69337678,14.9718752 7.77734505,14.9158755 L14.777304,10.2492466 C14.9163976,10.1565206 14.9999492,10.0004169 14.999959,9.83324903 L14.999959,5.16662013 C14.9999492,4.99945222 14.9163976,4.84334851 14.777304,4.75062256 Z M7.50000292,9.23237755 L4.90139316,7.4999502 L7.50000292,5.76755409 L10.0986127,7.4999502 L7.50000292,9.23237755 Z M8,4.89905919 L8,1.43423573 L13.598561,5.16665138 L10.9999824,6.89904747 L8,4.89905919 Z M7.00000586,4.89905919 L4.00002344,6.89904747 L1.40141366,5.16665138 L7.00000586,1.43423573 L7.00000586,4.89905919 Z M3.09865372,7.4999502 L1.00004102,8.89903575 L1.00004102,6.10089589 L3.09865372,7.4999502 Z M4.00002344,8.10085292 L7.00000586,10.1008412 L7.00000586,13.5656334 L1.40141366,9.83328028 L4.00002344,8.10085292 Z M8,10.1008412 L10.9999824,8.10085292 L13.5985922,9.83328028 L8,13.5656647 L8,10.1008412 L8,10.1008412 Z M11.9013521,7.4999502 L13.9999648,6.10089589 L13.9999648,8.899067 L11.9013521,7.4999502 Z">
</path>
</svg></span></form>POST https://codesandbox.io/api/v1/sandboxes/define
<form class="code-box-code-action" action="https://codesandbox.io/api/v1/sandboxes/define" method="POST" target="_blank"><input type="hidden" name="parameters"
value="N4IgZglgNgpgziAXKADgQwMYGs0HMYB0AVnAPYB2SoGFALjObVSLRLbEiALITkQAEANxgAnOBAr8AtPzSMAJgAEArAQDMBAIwgANCAC2aXp17yYAD2II9ZlAzPkMEeMzm15nVRu17FbqWbiuOQA9BA05AiIIFBo9HBMvrQAnnZwISIwmEzRAHqaABwEAAwluiCKKWkZWRi0AaT6nPlFpcXlmdnNhSVlep11DU15PW0dtfVwGCIQKLRRILkALL3tAL42MIIAIjB25A5OLsgsqfDTszmLK6XKIBsgUzNzUaAJaCJXA5MXL_zvn3KACMAK7QDzRb5SJ6XOD8UHg8rxL4TaG_eb8ZHSKQMQQAXhI8ka5RgRBgdU4UJhf1J5KYDyBIlIAHc4KI4FAIAkkABtEAAPlKACYAKTlcikWj8MxoDwAXTWD1MFgIGDgrxAEXojE49z0yss83MzC1DCuEH0KFIn34ACUJvwwEz9PwAOTfV0AbgAOnxLdapcB-NMsvRbaRJfw1o7nW6oUT9CEMJyzV7fRarTbdvpSDHGm6CCEzDm0-RfSG4jBw5KABREjAg_Rmgj4WgAUVgTcYACFkgBJeQ111aozkUSugCUE4ImQOohrAB5s7mQvyJz7yPx-HqQMXSAQjSa6GaTP6bfbsnmXe6JqWMwGC2E55Y1XA72fA_wAMr0FBw6NOvmrpuPIpblhQCT8AAgigKCIHaEwEAAYgAwvweL8DWE7ofymG-luC4_nscD4Vu_wQAAXjAeLeo8hhQFAtGkVuDYiLOtB4sAmhrMx_BsDA-hwJxPK8VuwCiWRrDsDA8GukhvBcgAFjAoE6BJGwSeJm5kTpUmwLJfabgACkyuCZOqrpqdpOkadZZFaTpulsPpboAOpGKw5C4JZ6lWTpCqkauvrrr6voWJmUpmGAaAglAUowSgno7gaBCKbQ-hQEejAntEvELgAhNsADyKEACoAJpGW2_BpRl_ISQutVQPwsReTRIAMLR9V2TpjVZPI3WOY5C5NrQaDBopHxshxtEgrQYBSAUXUSb1o3jeQaBNu1gjOMyEW0cGx6MO1zIQPItCKXiZg7RgMBSKd52KTofF8KwaBQGi73UZoz1wIpMzkFgUi0KQUiQBxErLT1w1rfwG1bbRF0CXdNBQNaB2msdtEAMTFHj-NQ0NBEhMpsqDUTC5AqQ8jJOTRP8Au8gQIIfHyO1I68KIB0JMksDteg8hM158FCksKDmAdQXQ711K0PyESQTmIKMAActTMDodKpANl2tAtjA7admavYDkOHNjiIk6eguISy3Tw0hFTNP28TTX2_cipAA"><span
role="img" class="anticon code-box-codesandbox"><svg viewBox="0 0 1024 1024" fill="currentColor">
<path
d="M755 140.3l0.5-0.3h0.3L512 0 268.3 140h-0.3l0.8 0.4L68.6 256v512L512 1024l443.4-256V256L755 140.3z m-30 506.4v171.2L548 920.1V534.7L883.4 341v215.7l-158.4 90z m-584.4-90.6V340.8L476 534.4v385.7L300 818.5V646.7l-159.4-90.6zM511.7 280l171.1-98.3 166.3 96-336.9 194.5-337-194.6 165.7-95.7L511.7 280z">
</path>
</svg></span></form>POST https://codepen.io/pen/define
<form class="code-box-code-action" action="https://codepen.io/pen/define" method="POST" target="_blank"><input type="hidden" name="data"
value="{"title":"Mini version - antd@5.3.1","html":"\n <!DOCTYPE html>\n <html lang=\"en\">\n <head>\n <meta charset=\"utf-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1, shrink-to-fit=no\">\n <meta name=\"theme-color\" content=\"#000000\">\n </head>\n <body>\n <div id=\"container\" style=\"padding: 24px\" />\n <script>const mountNode = document.getElementById('container');</script>\n </body>\n </html>\n ","js":"const { createRoot } = ReactDOM;\nconst { Steps } = antd;\nconst App = () => (\n <Steps\n size=\"small\"\n current={1}\n items={[\n {\n title: 'Finished',\n },\n {\n title: 'In Progress',\n },\n {\n title: 'Waiting',\n },\n ]}\n />\n);\nconst ComponentDemo = App;\n\n\ncreateRoot(mountNode).render(<ComponentDemo />);\n","editors":"001","css":"","js_external":"https://unpkg.com/react@18/umd/react.development.js;https://unpkg.com/react-dom@18/umd/react-dom.development.js;https://unpkg.com/dayjs@1/dayjs.min.js;https://unpkg.com/antd@5.3.1/dist/antd-with-locales.js;https://unpkg.com/@ant-design/icons/dist/index.umd.js;https://unpkg.com/react-router-dom/dist/umd/react-router-dom.production.min.js;https://unpkg.com/react-router/dist/umd/react-router.production.min.js","js_pre_processor":"typescript"}"><span
role="img" class="anticon code-box-codepen"><svg viewBox="0 0 15 15" fill="currentColor">
<path
d="M14.777304,4.75062256 L7.77734505,0.0839936563 C7.60939924,-0.0279665065 7.39060662,-0.0279665065 7.22266081,0.0839936563 L0.222701813,4.75062256 C0.0836082937,4.84334851 5.66973453e-05,4.99945222 4.6875e-05,5.16662013 L4.6875e-05,9.83324903 C4.6875e-05,10.0004355 0.0836088906,10.1565596 0.222701812,10.2492466 L7.22266081,14.9158755 C7.30662908,14.9718752 7.403316,14.999875 7.50000292,14.999875 C7.59668984,14.999875 7.69337678,14.9718752 7.77734505,14.9158755 L14.777304,10.2492466 C14.9163976,10.1565206 14.9999492,10.0004169 14.999959,9.83324903 L14.999959,5.16662013 C14.9999492,4.99945222 14.9163976,4.84334851 14.777304,4.75062256 Z M7.50000292,9.23237755 L4.90139316,7.4999502 L7.50000292,5.76755409 L10.0986127,7.4999502 L7.50000292,9.23237755 Z M8,4.89905919 L8,1.43423573 L13.598561,5.16665138 L10.9999824,6.89904747 L8,4.89905919 Z M7.00000586,4.89905919 L4.00002344,6.89904747 L1.40141366,5.16665138 L7.00000586,1.43423573 L7.00000586,4.89905919 Z M3.09865372,7.4999502 L1.00004102,8.89903575 L1.00004102,6.10089589 L3.09865372,7.4999502 Z M4.00002344,8.10085292 L7.00000586,10.1008412 L7.00000586,13.5656334 L1.40141366,9.83328028 L4.00002344,8.10085292 Z M8,10.1008412 L10.9999824,8.10085292 L13.5985922,9.83328028 L8,13.5656647 L8,10.1008412 L8,10.1008412 Z M11.9013521,7.4999502 L13.9999648,6.10089589 L13.9999648,8.899067 L11.9013521,7.4999502 Z">
</path>
</svg></span></form>POST https://codesandbox.io/api/v1/sandboxes/define
<form class="code-box-code-action" action="https://codesandbox.io/api/v1/sandboxes/define" method="POST" target="_blank"><input type="hidden" name="parameters"
value="N4IgZglgNgpgziAXKADgQwMYGs0HMYB0AVnAPYB2SoGFALjObVSLRLbEiAOpsAWABBBrl-AWn5pGAEwACAVgIBmAgEYQAGhABbNBEqIQeqTAAexBJuMoGx8hgjxmk2lM4LlazTOejjcCLjkAPRCFAgGUGj0cExetACe1nBBAE4wmEwGAHoqABwEAAyFGiAyCUmp6Ri0vqRanDn5RQUlaRkNeYXFmm3VtfXZnc2tVTVwGCkQKLThIFkALF0tAL6WMABuACIw1uS29o7ILInwE1OZc4tFciCrIOOT0-GgMWgpF71jZ0_8r-8lACMAK7QVwGT6iB7nOD8YGgkrRD6jSHfGb8RFiUQMdYAXhIUjqJRgRBg1U4EKhP2JpKYdwBKVIAHc4DAUnAoBAYkgANogAB8RQATABSErkUi0fjGNCuAC6yzuRlMBAwcGeIGE9EYnFumiVZhmJmYmoYFwgWhQpHe_AASqN-GAGVp-AByT4ugDcAB1yObLdbgPwJul6DbSBL-MsHU7XRCCVoghgOabPT6_VbJdstKRo3VXQQgsZs6nyD7g1EYGGJQAKAkYIFaU0EfC0ACisEbjAAQvEAJJSasuzW6cisl0ASnHBDSe1Z1YAPFmc0E-ePvSJ-LqQEXSARDca6KbOOnrXaMrnnW7RiWT5KXQX9Sq1TeLRn-IGADKkGV6XAAeSBdg9BgKR1H4ABlLRoBgACgNHUCINIKBAIgChYI5eCwIAVRZFJ0OAqRIwvV1vEYXx4ACYJQnIOAX39SVA3A-gUBhKNHTzF1nCkEsyzCSUAEEUBQRBbVGAgADEAGF-Bxfhq3HGS-Tkn1-H4ecmJ2OAVNUwR6C0OAcWAbltJ098TNM9E2FgESXS_XA9BddRzNM15aCBOAbMgX04F4RznJ06iRPnHDWXw-D-BXJyN1M1Z_OAfzVNYdgYBsgA1VkIEgDAolQ8g_OiizXPczy9E5XyoosgLhCC8CkJQtDAIwkCIr5CqLNigrVPizqdKS6zXQABTQeJ8sq1Sio810UAZDB4FotrKsCtSvx_ch_0agiWoWnSOsq7qxss5KbM2CgYFGsaJpsxldFoc7FuqtTIOgsLmsi_zdp0-VtJXH01x9H1THoqUYDANAgSgAShI9LdH14WgtCgA9GCPAxzPnABCTY_0kgAVABNAbW34OGEb5fz5xJqB-EiNacS9EAGHpsmetUin0ikZmDtZxtaDQINeDeFlaDpkBALAURciZhKdPnHm-fINBGxF9YHEZej6aDQ9GBFxkICkWheBxYwVdm0Rdf13gwNK1g0CgFFbZgHEVDAnzJnILBRFoUhREgYXxSllmZbl_gFaV-mDZgRtRBoKArQ1k1tfpgBiApU7TgODvnIJeHZzmxvnAFSCkeI88zqQIHWQQpBF4dgJSDWYniWARfQKRy7WkTBXmFATA1n7A9ZylaD5YQYn4bMgUYAA5IuYBkqVSHrTtaGbGA2w7U0e37Qda9HFIJw9LOh9Liys8L4uT9Z7P4agE_bgVIA"><span
role="img" class="anticon code-box-codesandbox"><svg viewBox="0 0 1024 1024" fill="currentColor">
<path
d="M755 140.3l0.5-0.3h0.3L512 0 268.3 140h-0.3l0.8 0.4L68.6 256v512L512 1024l443.4-256V256L755 140.3z m-30 506.4v171.2L548 920.1V534.7L883.4 341v215.7l-158.4 90z m-584.4-90.6V340.8L476 534.4v385.7L300 818.5V646.7l-159.4-90.6zM511.7 280l171.1-98.3 166.3 96-336.9 194.5-337-194.6 165.7-95.7L511.7 280z">
</path>
</svg></span></form>POST https://codepen.io/pen/define
<form class="code-box-code-action" action="https://codepen.io/pen/define" method="POST" target="_blank"><input type="hidden" name="data"
value="{"title":"With icon - antd@5.3.1","html":"\n <!DOCTYPE html>\n <html lang=\"en\">\n <head>\n <meta charset=\"utf-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1, shrink-to-fit=no\">\n <meta name=\"theme-color\" content=\"#000000\">\n </head>\n <body>\n <div id=\"container\" style=\"padding: 24px\" />\n <script>const mountNode = document.getElementById('container');</script>\n </body>\n </html>\n ","js":"const { createRoot } = ReactDOM;\nconst { LoadingOutlined, SmileOutlined, SolutionOutlined, UserOutlined } = icons;\nconst { Steps } = antd;\nconst App = () => (\n <Steps\n items={[\n {\n title: 'Login',\n status: 'finish',\n icon: <UserOutlined />,\n },\n {\n title: 'Verification',\n status: 'finish',\n icon: <SolutionOutlined />,\n },\n {\n title: 'Pay',\n status: 'process',\n icon: <LoadingOutlined />,\n },\n {\n title: 'Done',\n status: 'wait',\n icon: <SmileOutlined />,\n },\n ]}\n />\n);\nconst ComponentDemo = App;\n\n\ncreateRoot(mountNode).render(<ComponentDemo />);\n","editors":"001","css":"","js_external":"https://unpkg.com/react@18/umd/react.development.js;https://unpkg.com/react-dom@18/umd/react-dom.development.js;https://unpkg.com/dayjs@1/dayjs.min.js;https://unpkg.com/antd@5.3.1/dist/antd-with-locales.js;https://unpkg.com/@ant-design/icons/dist/index.umd.js;https://unpkg.com/react-router-dom/dist/umd/react-router-dom.production.min.js;https://unpkg.com/react-router/dist/umd/react-router.production.min.js","js_pre_processor":"typescript"}"><span
role="img" class="anticon code-box-codepen"><svg viewBox="0 0 15 15" fill="currentColor">
<path
d="M14.777304,4.75062256 L7.77734505,0.0839936563 C7.60939924,-0.0279665065 7.39060662,-0.0279665065 7.22266081,0.0839936563 L0.222701813,4.75062256 C0.0836082937,4.84334851 5.66973453e-05,4.99945222 4.6875e-05,5.16662013 L4.6875e-05,9.83324903 C4.6875e-05,10.0004355 0.0836088906,10.1565596 0.222701812,10.2492466 L7.22266081,14.9158755 C7.30662908,14.9718752 7.403316,14.999875 7.50000292,14.999875 C7.59668984,14.999875 7.69337678,14.9718752 7.77734505,14.9158755 L14.777304,10.2492466 C14.9163976,10.1565206 14.9999492,10.0004169 14.999959,9.83324903 L14.999959,5.16662013 C14.9999492,4.99945222 14.9163976,4.84334851 14.777304,4.75062256 Z M7.50000292,9.23237755 L4.90139316,7.4999502 L7.50000292,5.76755409 L10.0986127,7.4999502 L7.50000292,9.23237755 Z M8,4.89905919 L8,1.43423573 L13.598561,5.16665138 L10.9999824,6.89904747 L8,4.89905919 Z M7.00000586,4.89905919 L4.00002344,6.89904747 L1.40141366,5.16665138 L7.00000586,1.43423573 L7.00000586,4.89905919 Z M3.09865372,7.4999502 L1.00004102,8.89903575 L1.00004102,6.10089589 L3.09865372,7.4999502 Z M4.00002344,8.10085292 L7.00000586,10.1008412 L7.00000586,13.5656334 L1.40141366,9.83328028 L4.00002344,8.10085292 Z M8,10.1008412 L10.9999824,8.10085292 L13.5985922,9.83328028 L8,13.5656647 L8,10.1008412 L8,10.1008412 Z M11.9013521,7.4999502 L13.9999648,6.10089589 L13.9999648,8.899067 L11.9013521,7.4999502 Z">
</path>
</svg></span></form>POST https://codesandbox.io/api/v1/sandboxes/define
<form class="code-box-code-action" action="https://codesandbox.io/api/v1/sandboxes/define" method="POST" target="_blank"><input type="hidden" name="parameters"
value="N4IgZglgNgpgziAXKADgQwMYGs0HMYB0AVnAPYB2SoGFALjObVSLRLbEiAMoDubGACwAEXeiiEBaIWkYATAAIBWAgGYCARhAAaEAFs0ESohCHZMAB7EEOsygZnyGCPGYzaszsrWadAJxiYTMYAeuoAHAQADFHaIPJuEmZwELjkAPQQNOQIxlBo9HBMOvK0AJ52cGn-gZyhEdGRsSXl8FUBGLSJpLq14VExfu2dst299QMg1R0ScBi-ECi0OSDBACz9jQC-NjAAbgAiMHbkDk4uyCwts_OLtevRiiDbINcLS8yFaL5Bk0Mzc284EJPt9YgAjACu0A8ximnVeiyBkOhsQKPzh_xuSyEaMkEgYuwAvCQRj0dDAiDAOpwMQjsRSqUxnmDfKQeHAYL44FAIIUkABtEAAPmiACYAKSxcikWhCMxoDwAXU2z1MFgIGDgOWodAYPyeOjVliW5mYWXojE4EF0KFI3yEACUhkIwKzdEIAORwj0AbgAOuRrbb7cAhHMAvQHaQZUJNi63Z6MaS0hgeXrfQGg3bZYddKR491PQQ0mY8xnyAHw_kYFGZQAKEYYCG6PUEfC0ACisBbjAAQqUAJKyOse80Gcicj0ASinBH8J05dYAPLn82khVP_eQhEIDSBS6QCCazbrLcYs_anYEtEJQxCOaJq7GC-6vUNyxfZR7i0aNVqPza2a3kIvYQrQtAUDeLZangMA3qIRxwDetACDALbPq6hYem4sjlpWFCFMCYhAoSQj8gGO7ABRO44mwsCIJ6ABiEBcrQHpaNRO7mnqDEesxrESNxjDsdR2zUVR240aw7AwLxXBUhQuEcZJXGnrQckKScglqSJkliZJEk0bRMm8QAMmghS6UZQnqZ65mFNpjDpspO76YqW74dksoAIIoCgDFXh0BCMQAwkIpF1lO4VCre1FZIRoYQVgDDPqRKFoYQ94wAAKqQyXkJFW6qV5ZFNr4860DeHK0CFELlXqirhUIWWPvQdaRJuAZxQRsoTuYsoRVFhIxYZNHVbV9WMHWZUVUIADUQjqJ1ekeZJ8Wyig_i7E1kXRbFKnAjANV1RV00nXqkiLctrmrcVhFsGhJFEYhBD6CgdZ1g9uhDTFdahslpQMV9R50XBxn0UIwPSbAsYzrdYY9QjTmMKIpQQ4FtAECFXBcAACqydjfM4T2jTuPITgAEjAKQCLZHqigAbJEKDmFZUkWLQ3k8qkvEYHqk4uTRNBQHaDFJQwGqkCLvjZRzstE18pSCzuYKYFguCshCJwhVLos4nlEvC3azFQFAXP0L4ytCGCdpmL4DoKhA95iwb5AEDbvh2w7shO3ApkAOJWx7dsMQABuoLNyhZqGyEIAAkwDi27Ru-L2tucpsodW_ovi4IYuX-YtDOC5s8P-LQdXbnWnFCEuQo1zuS4ISgQIzXqhLAG3jBxl9cAd73cbrg3tc-9thRozAHc2ajsCbEKwCFIh_Jd7QiqS8jtCbEuJYQLs9cHY3o9ERPHehjnefkAXDGiqssZz8PlEr7Xz0twQsDkLgKGXeoQgAGS_0IauB8jK11AuBCgOIWiEj9CATa1pFYwKEBQEKPJsAd12sNIQfVaCRXvsAkBQgAByHMH40W3mAiC5B94EJ3FOTYpDO7nUYOFQkpFF6v3fp_YQUgf7_0AaQxuFCIFlDsNA2B8wc6lEQcg1BWB0E_SENBOAsECBwAhBgPmWoRz41IJo5IH8EY2lgPQAAhNOPBNCQH7AoDAARtc0hCKoaQuhDCn4xUiH_ABQDLGCLApQ4-sBT6KK-BfXiHiwgsw9HfJB5AUGZDkcADBMVNp7FwdQnxO58Z7AgKQe8djyF-IoOkghLjgHb1HsU-x6Tlqly6n1YMsozBgDQBCKAPk_I-j3L-WmugoAng3pwGuS4TH7AAPIhWygATVxh2IQPSoCVMbvMoQeQP5iIYDAxZZDUIKi2UZJcLZaBoDDAIL41UxFgTABIMImz8mHOOeQNALYxG7GcDwBpiCbJiL4LIFChIzCvL5hIH5KEbyGDYBANAUB_hQsnuoKqAh5jkCwBICCEhIC0EJNKW5-CyH3KwU8yeMD0otm0tLT5akxEAGJIi0rpTiyx28dmyD2bXG2shSissPrvSGsgxFjkMJyRB49AkwPQLIH2H9r6rBZogoeuLG50iFOtRRuTGCENIGYJqjZmytnbF2DKfZBzDlHHQcck5NzbyVaQ7e7LOXDyZbQXplSngqiAA"><span
role="img" class="anticon code-box-codesandbox"><svg viewBox="0 0 1024 1024" fill="currentColor">
<path
d="M755 140.3l0.5-0.3h0.3L512 0 268.3 140h-0.3l0.8 0.4L68.6 256v512L512 1024l443.4-256V256L755 140.3z m-30 506.4v171.2L548 920.1V534.7L883.4 341v215.7l-158.4 90z m-584.4-90.6V340.8L476 534.4v385.7L300 818.5V646.7l-159.4-90.6zM511.7 280l171.1-98.3 166.3 96-336.9 194.5-337-194.6 165.7-95.7L511.7 280z">
</path>
</svg></span></form>POST https://codepen.io/pen/define
<form class="code-box-code-action" action="https://codepen.io/pen/define" method="POST" target="_blank"><input type="hidden" name="data"
value="{"title":"Switch Step - antd@5.3.1","html":"\n <!DOCTYPE html>\n <html lang=\"en\">\n <head>\n <meta charset=\"utf-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1, shrink-to-fit=no\">\n <meta name=\"theme-color\" content=\"#000000\">\n </head>\n <body>\n <div id=\"container\" style=\"padding: 24px\" />\n <script>const mountNode = document.getElementById('container');</script>\n </body>\n </html>\n ","js":"const { createRoot } = ReactDOM;\nconst { Button, message, Steps, theme } = antd;\nconst { useState } = React;;\nconst steps = [\n {\n title: 'First',\n content: 'First-content',\n },\n {\n title: 'Second',\n content: 'Second-content',\n },\n {\n title: 'Last',\n content: 'Last-content',\n },\n];\nconst App = () => {\n const { token } = theme.useToken();\n const [current, setCurrent] = useState(0);\n const next = () => {\n setCurrent(current + 1);\n };\n const prev = () => {\n setCurrent(current - 1);\n };\n const items = steps.map((item) => ({\n key: item.title,\n title: item.title,\n }));\n const contentStyle = {\n lineHeight: '260px',\n textAlign: 'center',\n color: token.colorTextTertiary,\n backgroundColor: token.colorFillAlter,\n borderRadius: token.borderRadiusLG,\n border: `1px dashed ${token.colorBorder}`,\n marginTop: 16,\n };\n return (\n <>\n <Steps current={current} items={items} />\n <div style={contentStyle}>{steps[current].content}</div>\n <div\n style={{\n marginTop: 24,\n }}\n >\n {current < steps.length - 1 && (\n <Button type=\"primary\" onClick={() => next()}>\n Next\n </Button>\n )}\n {current === steps.length - 1 && (\n <Button type=\"primary\" onClick={() => message.success('Processing complete!')}>\n Done\n </Button>\n )}\n {current > 0 && (\n <Button\n style={{\n margin: '0 8px',\n }}\n onClick={() => prev()}\n >\n Previous\n </Button>\n )}\n </div>\n </>\n );\n};\nconst ComponentDemo = App;\n\n\ncreateRoot(mountNode).render(<ComponentDemo />);\n","editors":"001","css":"","js_external":"https://unpkg.com/react@18/umd/react.development.js;https://unpkg.com/react-dom@18/umd/react-dom.development.js;https://unpkg.com/dayjs@1/dayjs.min.js;https://unpkg.com/antd@5.3.1/dist/antd-with-locales.js;https://unpkg.com/@ant-design/icons/dist/index.umd.js;https://unpkg.com/react-router-dom/dist/umd/react-router-dom.production.min.js;https://unpkg.com/react-router/dist/umd/react-router.production.min.js","js_pre_processor":"typescript"}"><span
role="img" class="anticon code-box-codepen"><svg viewBox="0 0 15 15" fill="currentColor">
<path
d="M14.777304,4.75062256 L7.77734505,0.0839936563 C7.60939924,-0.0279665065 7.39060662,-0.0279665065 7.22266081,0.0839936563 L0.222701813,4.75062256 C0.0836082937,4.84334851 5.66973453e-05,4.99945222 4.6875e-05,5.16662013 L4.6875e-05,9.83324903 C4.6875e-05,10.0004355 0.0836088906,10.1565596 0.222701812,10.2492466 L7.22266081,14.9158755 C7.30662908,14.9718752 7.403316,14.999875 7.50000292,14.999875 C7.59668984,14.999875 7.69337678,14.9718752 7.77734505,14.9158755 L14.777304,10.2492466 C14.9163976,10.1565206 14.9999492,10.0004169 14.999959,9.83324903 L14.999959,5.16662013 C14.9999492,4.99945222 14.9163976,4.84334851 14.777304,4.75062256 Z M7.50000292,9.23237755 L4.90139316,7.4999502 L7.50000292,5.76755409 L10.0986127,7.4999502 L7.50000292,9.23237755 Z M8,4.89905919 L8,1.43423573 L13.598561,5.16665138 L10.9999824,6.89904747 L8,4.89905919 Z M7.00000586,4.89905919 L4.00002344,6.89904747 L1.40141366,5.16665138 L7.00000586,1.43423573 L7.00000586,4.89905919 Z M3.09865372,7.4999502 L1.00004102,8.89903575 L1.00004102,6.10089589 L3.09865372,7.4999502 Z M4.00002344,8.10085292 L7.00000586,10.1008412 L7.00000586,13.5656334 L1.40141366,9.83328028 L4.00002344,8.10085292 Z M8,10.1008412 L10.9999824,8.10085292 L13.5985922,9.83328028 L8,13.5656647 L8,10.1008412 L8,10.1008412 Z M11.9013521,7.4999502 L13.9999648,6.10089589 L13.9999648,8.899067 L11.9013521,7.4999502 Z">
</path>
</svg></span></form>POST https://codesandbox.io/api/v1/sandboxes/define
<form class="code-box-code-action" action="https://codesandbox.io/api/v1/sandboxes/define" method="POST" target="_blank"><input type="hidden" name="parameters"
value="N4IgZglgNgpgziAXKADgQwMYGs0HMYB0AVnAPYB2SoGFALjObVSLRLbEiAGowBOrGNFAAEAWmFpGAEwACAVgIBmAgEYQAGhABbNBEqIQeqTAAexBJuMoGx8hgjxmk2lM4LlazTOejjcCLjkAPQQNOQIBlBo9HBMXrQAntZwQbwwmEwGAHoqABwEAAyFGiAyicmp6Ri0vqRanDn5RQUlaRkNeYXFmm3VtfXZnc2tVTVwGLwQKLQRIFkALF0tAL6WMABuACIw1uS29o7ILEnwE1OZc4tFciCrIOOT0xGgsWj8nL1jZ0_Cr--aACMAK7QVwGT6iB7nODCYGgkoxC4QqE_RFiUQMdYAXhIUjqJRgRBg1Q-o0h3xmwkJxKYdwBvFIAHc4Hw4FAILEkABtEAAPiKACYAKQlcikWjCYxoVwAXWWdyMpgIGDgzxAYXojE4t00irMMxMzA1DAuEC0KFI_GEACVRsIwAytMIAOSfZ0AbgAOuQzRarcBhBN0vRraRxcJlvbHS6IXitEEMOyTR7vb7LRLtlpSFG6i6CEFjFmU-RvUHojBQ-KABR4jBArQmgj4WgAUVgDcYACEEgBJKRV50a3TkPjOgCUY4IaT2fCrAB5M9mgryx17yMJhDqQIXSAQDUa6CbOGmrbaMjmna7RsWTxLnfm9crVTfzenhAGAMr0FAwyMO3POs4UjFqWFCxJKpyPKwFDCFiLoACoABYcsIKFoBBKLQeQBDFmE4EAIIoCgiA2qMBAAGIAMKwcIVZjrBvK0d6G5zl-OxwMxG6ShAaTVBAFBYp6IDrHwAhCEJnEbnWvDTrQWLACoyySah9BaHA8lcspG7AFpXGsOwMAkc65F6ByiEwMB6i6RufgUvx5BWeuXEbqsuk6U5zkbvpsBGT264AAoMrgaTPo5nlcbZUH2WFnmuR5XHueFXlsD5LoAOq6Kw5C4M6MXhZF5zRbpcXOXKnHLt6q7et6ph-hKxhgGgQJQBKhEoO6W6PohtBaFAB6MEeBjKXOACEmwAPKUfBACa_ktsI3W9byulzotIhRNlgkgAwQnLfFzmrekUh7UlXFzg2tDoRgiFvCyclCUCtBgKIuS7dZZ0Xeh5BoA2W3rA4jJ1UJgaHowW2MhAUi0IhWLGP9GAwKIENQ4h6ioT6rBCOSQgwFiKho3AiGTOQWCiLQpCiJAclim9-2eedMCXcI32_UJ0MwA2og0FAlrA8aYNCQAxAUIui7Tp1zkE5nSidSVzgCpBSAkssS1IEDrKhUhbUOeh8MDsQJLAW3oFIavZSRArzCgJjAxVdMHZhvJ4RKWZAowAByiswDRtb1o2zZthzJrdn2A46yOvDju6kuO-9ksK0rKtnVLPVQEntzykAA"><span
role="img" class="anticon code-box-codesandbox"><svg viewBox="0 0 1024 1024" fill="currentColor">
<path
d="M755 140.3l0.5-0.3h0.3L512 0 268.3 140h-0.3l0.8 0.4L68.6 256v512L512 1024l443.4-256V256L755 140.3z m-30 506.4v171.2L548 920.1V534.7L883.4 341v215.7l-158.4 90z m-584.4-90.6V340.8L476 534.4v385.7L300 818.5V646.7l-159.4-90.6zM511.7 280l171.1-98.3 166.3 96-336.9 194.5-337-194.6 165.7-95.7L511.7 280z">
</path>
</svg></span></form>POST https://codepen.io/pen/define
<form class="code-box-code-action" action="https://codepen.io/pen/define" method="POST" target="_blank"><input type="hidden" name="data"
value="{"title":"Vertical - antd@5.3.1","html":"\n <!DOCTYPE html>\n <html lang=\"en\">\n <head>\n <meta charset=\"utf-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1, shrink-to-fit=no\">\n <meta name=\"theme-color\" content=\"#000000\">\n </head>\n <body>\n <div id=\"container\" style=\"padding: 24px\" />\n <script>const mountNode = document.getElementById('container');</script>\n </body>\n </html>\n ","js":"const { createRoot } = ReactDOM;\nconst { Steps } = antd;\nconst description = 'This is a description.';\nconst App = () => (\n <Steps\n direction=\"vertical\"\n current={1}\n items={[\n {\n title: 'Finished',\n description,\n },\n {\n title: 'In Progress',\n description,\n },\n {\n title: 'Waiting',\n description,\n },\n ]}\n />\n);\nconst ComponentDemo = App;\n\n\ncreateRoot(mountNode).render(<ComponentDemo />);\n","editors":"001","css":"","js_external":"https://unpkg.com/react@18/umd/react.development.js;https://unpkg.com/react-dom@18/umd/react-dom.development.js;https://unpkg.com/dayjs@1/dayjs.min.js;https://unpkg.com/antd@5.3.1/dist/antd-with-locales.js;https://unpkg.com/@ant-design/icons/dist/index.umd.js;https://unpkg.com/react-router-dom/dist/umd/react-router-dom.production.min.js;https://unpkg.com/react-router/dist/umd/react-router.production.min.js","js_pre_processor":"typescript"}"><span
role="img" class="anticon code-box-codepen"><svg viewBox="0 0 15 15" fill="currentColor">
<path
d="M14.777304,4.75062256 L7.77734505,0.0839936563 C7.60939924,-0.0279665065 7.39060662,-0.0279665065 7.22266081,0.0839936563 L0.222701813,4.75062256 C0.0836082937,4.84334851 5.66973453e-05,4.99945222 4.6875e-05,5.16662013 L4.6875e-05,9.83324903 C4.6875e-05,10.0004355 0.0836088906,10.1565596 0.222701812,10.2492466 L7.22266081,14.9158755 C7.30662908,14.9718752 7.403316,14.999875 7.50000292,14.999875 C7.59668984,14.999875 7.69337678,14.9718752 7.77734505,14.9158755 L14.777304,10.2492466 C14.9163976,10.1565206 14.9999492,10.0004169 14.999959,9.83324903 L14.999959,5.16662013 C14.9999492,4.99945222 14.9163976,4.84334851 14.777304,4.75062256 Z M7.50000292,9.23237755 L4.90139316,7.4999502 L7.50000292,5.76755409 L10.0986127,7.4999502 L7.50000292,9.23237755 Z M8,4.89905919 L8,1.43423573 L13.598561,5.16665138 L10.9999824,6.89904747 L8,4.89905919 Z M7.00000586,4.89905919 L4.00002344,6.89904747 L1.40141366,5.16665138 L7.00000586,1.43423573 L7.00000586,4.89905919 Z M3.09865372,7.4999502 L1.00004102,8.89903575 L1.00004102,6.10089589 L3.09865372,7.4999502 Z M4.00002344,8.10085292 L7.00000586,10.1008412 L7.00000586,13.5656334 L1.40141366,9.83328028 L4.00002344,8.10085292 Z M8,10.1008412 L10.9999824,8.10085292 L13.5985922,9.83328028 L8,13.5656647 L8,10.1008412 L8,10.1008412 Z M11.9013521,7.4999502 L13.9999648,6.10089589 L13.9999648,8.899067 L11.9013521,7.4999502 Z">
</path>
</svg></span></form>POST https://codesandbox.io/api/v1/sandboxes/define
<form class="code-box-code-action" action="https://codesandbox.io/api/v1/sandboxes/define" method="POST" target="_blank"><input type="hidden" name="parameters"
value="N4IgZglgNgpgziAXKADgQwMYGs0HMYB0AVnAPYB2SoGFALjObVSLRLbEiAGowBOrGNFAAEAWwjkIwgG584ECsIC0wtIwAmAAQCsBAMwEAjCAA0IUWgmcJ6mAA9iCM7ZQNb5DBHjM1tdZ10DYzNNXyVbeVxyAHoIGnIERBAoNHo4JhDaAE9XOGjeGEwmJIA9QwAOAgAGatMQTWzc_MKMWnDSUU4yypqquoKirorq2rMB1vbO0uHe_pa2uAxeCBRaRJASgBYRvoBfZxhpABEYV3J3T29kFhz4JZXije2a7RB9kEXl1cTQdLR-TjjBb3b7CP4AswAIwArtB_EkgUpPg84MIYXC6mlHojkaCscolAxpABeEjqDp1GBEGCtQHzJEgtbCKk0pjvSG8UgAdzgcigEHSSAA2iAAHw1ABMAFI6uRSLRhLY0P4ALq7d42ewEDBwH4geL0RicN5mTUONZ2ZgGhiPCCiFCkfjCABK82EYE5omEAHIgd6ANwAHUk9sdCuAwiWhXoztI8uEu3dnp9iPJomiGH5NoDwbtDqdJ1EpCTHR9BGitiLOfIwajqRgsflAApyRhoaIbQR8LQAKKwDuMABCWQAkuom96DZZyHxvQBKOcEArnPhNgA8heL0VFc6D5GEwhNIErpAIFqtdBt1lDTtdRRLXt982rebDZdiK4cOrgL5v4eEADK9AoKiiYeqW3q-Oo1a1hQ6SKncXysIoxI-gAKgAFgKwjYWgCG4sh5AENW8TwQAgigKCIC68wEAAYgAwsIqFNnOzGisITbBgea5AaccDcQeioQAUrQKOQxKBiAsj8HEQhSYJB7yAAXjAkkfBYUBQAp-5CW2vDLrQxLAIYuyKTh9CiHAxlCuZB4Rqw7AwNR3p0RIAoYTA0EmPhjLiQmJh2cIwBBQejmwC5I77gACpyuAFLq3qBbpQlCREfkUMlqUHvsQUhSl2Xhc5PoAOqWKw5C4EloW-Uh4lZdluUFWqgnbsGu7BsG9j5gqthgGg0JQAqFEoP6R5mgQGG0KIUAXowV5JOZa4AIRHAA8gxaEAJrRT2whTTNopBWuB0iCklXqQwUlHQVqUnYU6g3dl2Vrh2tB4RgGH_LyRlSdCtBgEo5TXTVPFvXh5BoB26nSF4XI9VJkaXow6lchA6i0BhxK2LDGAwEoaMYxhPnuawQgMkIamGD5cAYcs5BYEotCkEokBGXKIO3S94PCJD0NSZjMAdkoNBQI6iPWijUkAMRVHL8uc89PHRJ5ypPUra6QqQ6hZOrSvCGu6gQNIOHqOpU4SHwiPpFksDqeg6hG5V1ESpsKB2IjbVc3dBGiqRCpFtCjAAHLazAzGKqQbYDrQXYwL2_Y2sOY4ThbM68PO_prtEvs1dnWs63rQnZ6dRdvOqQA"><span
role="img" class="anticon code-box-codesandbox"><svg viewBox="0 0 1024 1024" fill="currentColor">
<path
d="M755 140.3l0.5-0.3h0.3L512 0 268.3 140h-0.3l0.8 0.4L68.6 256v512L512 1024l443.4-256V256L755 140.3z m-30 506.4v171.2L548 920.1V534.7L883.4 341v215.7l-158.4 90z m-584.4-90.6V340.8L476 534.4v385.7L300 818.5V646.7l-159.4-90.6zM511.7 280l171.1-98.3 166.3 96-336.9 194.5-337-194.6 165.7-95.7L511.7 280z">
</path>
</svg></span></form>POST https://codepen.io/pen/define
<form class="code-box-code-action" action="https://codepen.io/pen/define" method="POST" target="_blank"><input type="hidden" name="data"
value="{"title":"Vertical mini version - antd@5.3.1","html":"\n <!DOCTYPE html>\n <html lang=\"en\">\n <head>\n <meta charset=\"utf-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1, shrink-to-fit=no\">\n <meta name=\"theme-color\" content=\"#000000\">\n </head>\n <body>\n <div id=\"container\" style=\"padding: 24px\" />\n <script>const mountNode = document.getElementById('container');</script>\n </body>\n </html>\n ","js":"const { createRoot } = ReactDOM;\nconst { Steps } = antd;\nconst description = 'This is a description.';\nconst App = () => (\n <Steps\n direction=\"vertical\"\n size=\"small\"\n current={1}\n items={[\n {\n title: 'Finished',\n description,\n },\n {\n title: 'In Progress',\n description,\n },\n {\n title: 'Waiting',\n description,\n },\n ]}\n />\n);\nconst ComponentDemo = App;\n\n\ncreateRoot(mountNode).render(<ComponentDemo />);\n","editors":"001","css":"","js_external":"https://unpkg.com/react@18/umd/react.development.js;https://unpkg.com/react-dom@18/umd/react-dom.development.js;https://unpkg.com/dayjs@1/dayjs.min.js;https://unpkg.com/antd@5.3.1/dist/antd-with-locales.js;https://unpkg.com/@ant-design/icons/dist/index.umd.js;https://unpkg.com/react-router-dom/dist/umd/react-router-dom.production.min.js;https://unpkg.com/react-router/dist/umd/react-router.production.min.js","js_pre_processor":"typescript"}"><span
role="img" class="anticon code-box-codepen"><svg viewBox="0 0 15 15" fill="currentColor">
<path
d="M14.777304,4.75062256 L7.77734505,0.0839936563 C7.60939924,-0.0279665065 7.39060662,-0.0279665065 7.22266081,0.0839936563 L0.222701813,4.75062256 C0.0836082937,4.84334851 5.66973453e-05,4.99945222 4.6875e-05,5.16662013 L4.6875e-05,9.83324903 C4.6875e-05,10.0004355 0.0836088906,10.1565596 0.222701812,10.2492466 L7.22266081,14.9158755 C7.30662908,14.9718752 7.403316,14.999875 7.50000292,14.999875 C7.59668984,14.999875 7.69337678,14.9718752 7.77734505,14.9158755 L14.777304,10.2492466 C14.9163976,10.1565206 14.9999492,10.0004169 14.999959,9.83324903 L14.999959,5.16662013 C14.9999492,4.99945222 14.9163976,4.84334851 14.777304,4.75062256 Z M7.50000292,9.23237755 L4.90139316,7.4999502 L7.50000292,5.76755409 L10.0986127,7.4999502 L7.50000292,9.23237755 Z M8,4.89905919 L8,1.43423573 L13.598561,5.16665138 L10.9999824,6.89904747 L8,4.89905919 Z M7.00000586,4.89905919 L4.00002344,6.89904747 L1.40141366,5.16665138 L7.00000586,1.43423573 L7.00000586,4.89905919 Z M3.09865372,7.4999502 L1.00004102,8.89903575 L1.00004102,6.10089589 L3.09865372,7.4999502 Z M4.00002344,8.10085292 L7.00000586,10.1008412 L7.00000586,13.5656334 L1.40141366,9.83328028 L4.00002344,8.10085292 Z M8,10.1008412 L10.9999824,8.10085292 L13.5985922,9.83328028 L8,13.5656647 L8,10.1008412 L8,10.1008412 Z M11.9013521,7.4999502 L13.9999648,6.10089589 L13.9999648,8.899067 L11.9013521,7.4999502 Z">
</path>
</svg></span></form>POST https://codesandbox.io/api/v1/sandboxes/define
<form class="code-box-code-action" action="https://codesandbox.io/api/v1/sandboxes/define" method="POST" target="_blank"><input type="hidden" name="parameters"
value="N4IgZglgNgpgziAXKADgQwMYGs0HMYB0AVnAPYB2SoGFALjObVSLRLbEiAKIBOPpPAARxaaWgFc4ggLSC0jACYABAKwEAzAQCMIADQgAtmgiVEIEwpgAPYgn2WUDS-QwR4zebQWc1mnfqVPaUs4CFxyAHoIGnIEMygxeCYA2gBPRzgInhhMJjMAPS0ADgIABjK9ECU0jKycjFpg0gNOQpLy0srs3Nbisor9boamloK-jq76xrgMHggUWjiQfIAWfs6AX3sYADcAERhHcmdXd2QWdPhZ-bzltfKVEC2QGbmFuNARNB5boenr97CUQ_SoAI3E0G8Zj-0leNyk4MhlXoIk4MLhgJRtBk0gYOwAvCQFM1KjAiDAGmiprCAYtBGSKUxnqD-AB3OAwHhwKAQVGIADaIAAfOUAEwAUkq5FI2MsaG8AF0Ns8LNYCBg4B8QDF6IxOE99KqbIsrMwdQxbhADCgBNiAEpTQRgfgGQQAcj-boA3AAdchWm0_QTAQSzHL0O2kGWCDZOl3umHEgwRDA8i3ev0B22CA4GUhx5ruggRSx5jPkP1hxKRmUACmJGHEBgtBHwtC4sGbjAAQqkAJIKWtunXGcict0ASgnBGyx05tYAPLn8xEhRPfeRBIIDSBS6QCCazXQLZws0GHbkC66PVNy2fsW7i0b1Zq79bsyGAMr0FBSWPOws3U8BRy0rCgREEEJaQgChBHxd0ABUAAteUEVC0Egq43lYChyxiCCAEEUBQRBBAvBoCAAMQAYTgwRawnOChXov0twXb9DjgVit1DcQ-AtfFgC0DZuK3L4JDgfEfRATl-B4aTRLQ-gDEk4B-UUrdgA0njWHYGBSLdSiTF5JCYBA3RtK3KDsJg8gLM3Hity2bStIcxyt102ADL7TcAAV-AweA4Ddez3J46ybls0L3OctyeNcsKPLYLz3QAdWMVhyFwELLMwjEcLs7TYscpVuNXP11z9P1rEDWUYDANBxCgbEiJQL0d2fJDaAMKAj0YE8zEUhcAEI9gAeWohCAE1fK4QQup6oVtIXBaoEEBIsqkmSK2FXKVpyBQlrisKF2bURQyQ74OVoLbxFoMBpCKaSjsSnjTpgc7yDQZstp2NxWVq6TQ2PRgttZCAFFoJD8UsP7AukcHIaQ3Q0P9Vg0CgGkMZgfEtBRuAkLmcgsGkWhSGkSAbulZ7crYs6MK-n7pKhmBm2kGgoAEIHzVB6SAGJSkFoWaeOt6IlM-UXsShdQVIBRUil16FwUCAdjQhQtpHExOSBkRUlgLb0AUFWstI0UVhQKwgfK0XHIXfKhXw7E83ERgADk5ZgOiGybFs2w7VmLV7Achy1sceEnL0FwiB29oiWX5cVsXVqTp5lSAA"><span
role="img" class="anticon code-box-codesandbox"><svg viewBox="0 0 1024 1024" fill="currentColor">
<path
d="M755 140.3l0.5-0.3h0.3L512 0 268.3 140h-0.3l0.8 0.4L68.6 256v512L512 1024l443.4-256V256L755 140.3z m-30 506.4v171.2L548 920.1V534.7L883.4 341v215.7l-158.4 90z m-584.4-90.6V340.8L476 534.4v385.7L300 818.5V646.7l-159.4-90.6zM511.7 280l171.1-98.3 166.3 96-336.9 194.5-337-194.6 165.7-95.7L511.7 280z">
</path>
</svg></span></form>POST https://codepen.io/pen/define
<form class="code-box-code-action" action="https://codepen.io/pen/define" method="POST" target="_blank"><input type="hidden" name="data"
value="{"title":"Error status - antd@5.3.1","html":"\n <!DOCTYPE html>\n <html lang=\"en\">\n <head>\n <meta charset=\"utf-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1, shrink-to-fit=no\">\n <meta name=\"theme-color\" content=\"#000000\">\n </head>\n <body>\n <div id=\"container\" style=\"padding: 24px\" />\n <script>const mountNode = document.getElementById('container');</script>\n </body>\n </html>\n ","js":"const { createRoot } = ReactDOM;\nconst { Steps } = antd;\nconst description = 'This is a description';\nconst App = () => (\n <Steps\n current={1}\n status=\"error\"\n items={[\n {\n title: 'Finished',\n description,\n },\n {\n title: 'In Process',\n description,\n },\n {\n title: 'Waiting',\n description,\n },\n ]}\n />\n);\nconst ComponentDemo = App;\n\n\ncreateRoot(mountNode).render(<ComponentDemo />);\n","editors":"001","css":"","js_external":"https://unpkg.com/react@18/umd/react.development.js;https://unpkg.com/react-dom@18/umd/react-dom.development.js;https://unpkg.com/dayjs@1/dayjs.min.js;https://unpkg.com/antd@5.3.1/dist/antd-with-locales.js;https://unpkg.com/@ant-design/icons/dist/index.umd.js;https://unpkg.com/react-router-dom/dist/umd/react-router-dom.production.min.js;https://unpkg.com/react-router/dist/umd/react-router.production.min.js","js_pre_processor":"typescript"}"><span
role="img" class="anticon code-box-codepen"><svg viewBox="0 0 15 15" fill="currentColor">
<path
d="M14.777304,4.75062256 L7.77734505,0.0839936563 C7.60939924,-0.0279665065 7.39060662,-0.0279665065 7.22266081,0.0839936563 L0.222701813,4.75062256 C0.0836082937,4.84334851 5.66973453e-05,4.99945222 4.6875e-05,5.16662013 L4.6875e-05,9.83324903 C4.6875e-05,10.0004355 0.0836088906,10.1565596 0.222701812,10.2492466 L7.22266081,14.9158755 C7.30662908,14.9718752 7.403316,14.999875 7.50000292,14.999875 C7.59668984,14.999875 7.69337678,14.9718752 7.77734505,14.9158755 L14.777304,10.2492466 C14.9163976,10.1565206 14.9999492,10.0004169 14.999959,9.83324903 L14.999959,5.16662013 C14.9999492,4.99945222 14.9163976,4.84334851 14.777304,4.75062256 Z M7.50000292,9.23237755 L4.90139316,7.4999502 L7.50000292,5.76755409 L10.0986127,7.4999502 L7.50000292,9.23237755 Z M8,4.89905919 L8,1.43423573 L13.598561,5.16665138 L10.9999824,6.89904747 L8,4.89905919 Z M7.00000586,4.89905919 L4.00002344,6.89904747 L1.40141366,5.16665138 L7.00000586,1.43423573 L7.00000586,4.89905919 Z M3.09865372,7.4999502 L1.00004102,8.89903575 L1.00004102,6.10089589 L3.09865372,7.4999502 Z M4.00002344,8.10085292 L7.00000586,10.1008412 L7.00000586,13.5656334 L1.40141366,9.83328028 L4.00002344,8.10085292 Z M8,10.1008412 L10.9999824,8.10085292 L13.5985922,9.83328028 L8,13.5656647 L8,10.1008412 L8,10.1008412 Z M11.9013521,7.4999502 L13.9999648,6.10089589 L13.9999648,8.899067 L11.9013521,7.4999502 Z">
</path>
</svg></span></form>POST https://codesandbox.io/api/v1/sandboxes/define
<form class="code-box-code-action" action="https://codesandbox.io/api/v1/sandboxes/define" method="POST" target="_blank"><input type="hidden" name="parameters"
value="N4IgZglgNgpgziAXKADgQwMYGs0HMYB0AVnAPYB2SoGFALjObVSLRLbEiACKm0AEAZVoBPWHwC0fNIwAmAAQCsBAMwEAjCAA0IALZoIlRCAMyYAD2IJtplA1PkMEeM2m0ZnJao3a5r8abgIXHIAeggacgQjKDR6OCYfEVs4EIAnGEwmIwA9NQAOAgAGIq0QOST4NIyMWn9SHU5cguLC0vTMxvyiku12mrqGnK6WturauAxUiBRaKJBsgBZu1oBfaxgANy4YW3J7R2dkFmFkyems-aXihRA1kAmpmajQeLRUi77xs6e-V_fSgBGAFdoO4jJ9xA9znA-MDQaU4h8xpDvrM-IiJOIGBsALwkGT1UowIgwGqcCFQn7E0lMO4A1KkADucBgqTgUAg8SQAG0QAA-YoAJgApKVyLw-KY0O4ALorO4mcwEDBwZ4gCL0RicW7aRUWWZmZgahgXCA6FCkd58ABKYz4YAZOj4AHJPs6ANwAHXIZotVuAfEmGXo1tIEpW9sdLohBJ0IQwHJNHu9vst_G2OlIkfqLoIIVMmeT5G9QdiMFDvAAFASMECdCaCPhaABRWD1xgAIWEAEkZJXnRr9ORWc6AJSjgjpPasysAHgzWZCfNHXvIfD4OpABdIBANRroJs4qattsy2adrrGReP_Gdeb1ytV1_Nab4Aa4EA2EFMqU0gnoKAwhGDo5s6rgyEWJYUPEfAAIIoCgiA2mMBAAGIAMJ8DifCVqOWF8jh3rrrOfJEeufCzkIOxwGR5F8CgDK4Okqo8LQtHkbWqRTrQOLAGoKzseubAwDocC8dygnkcAkl0aw7AwEhzqoQYnIABYwBBmgyeRASohAFCKQAKqpnJ8KZaCSvAekUAQzpaWudHkWs2nSQ5jnkXJsCKd2a4AAqMcxcB2dp666Y8rAGS6xmmeZlmUhF5C2fZ7nrs5bmOa5KUeWwXkugA6vorDkLgwXpe5YXnPp5BGSZMKxRVMxVUl2lpe5crsUu7Hzp-36snwnXpZRAE0WV9EBfAcCsZJnHcbx_GSTIEDpDUVU4p6IAbKyrAYGgUDrZJwmieJLkheiOUKS6yk-nA6maadDUJTVMUwhZD1NXw0V1S9cXWYlpVZa1KWZVlZ3yYpV1qRp_0g29kXOp9ZnfbDiUfbViNSD94VNdD7mA-5wNZZ5F3Oj5fD-aQTETTjKXI09X0Y8jBCo89DNWVjNnU3ReMZadROKQVbAGCVyUw2zlVwwj9Vi41HMi7jcs86NsnnfzhVC5zjm01FaNS_F2MK1zBt8O16UDcRA0rt63rmH6_CmGAaBAlA_DwSg7qbg-qm0DoUD7owh5GF1ACEXAAPLoYZACavnNnwXs-6Ro2zvHUB8DExVrSADDrYnWXJxkMi5yDs71rQFkYKpbwsjx61ArQYDiHkOenSXMBl3w5BoPWmdfjAjK2-tgYHowmeMt-tCqTiphfhgMDiGPMgT3-KmsLtKK7TAOJqH-N1TOQWDiLQpDiJAPHis3Svka37ed9360TyJc80FAlqD8aI_rQAxIUP-_xfechHUtKIu7lZwAlIDIYQICUqzkWhsMyMhM6DgMKyQe8RRCb3WugGQi1ipIUFAsFAZhB5m2LvFPkEQYKZiBIwAAchAmAWFJSkFrO2WgjY26tkfp2HsfYBx0CHCOFcs4QjkO0iI8BkDoHmxTtA248ogA"><span
role="img" class="anticon code-box-codesandbox"><svg viewBox="0 0 1024 1024" fill="currentColor">
<path
d="M755 140.3l0.5-0.3h0.3L512 0 268.3 140h-0.3l0.8 0.4L68.6 256v512L512 1024l443.4-256V256L755 140.3z m-30 506.4v171.2L548 920.1V534.7L883.4 341v215.7l-158.4 90z m-584.4-90.6V340.8L476 534.4v385.7L300 818.5V646.7l-159.4-90.6zM511.7 280l171.1-98.3 166.3 96-336.9 194.5-337-194.6 165.7-95.7L511.7 280z">
</path>
</svg></span></form>POST https://codepen.io/pen/define
<form class="code-box-code-action" action="https://codepen.io/pen/define" method="POST" target="_blank"><input type="hidden" name="data"
value="{"title":"Dot Style - antd@5.3.1","html":"\n <!DOCTYPE html>\n <html lang=\"en\">\n <head>\n <meta charset=\"utf-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1, shrink-to-fit=no\">\n <meta name=\"theme-color\" content=\"#000000\">\n </head>\n <body>\n <div id=\"container\" style=\"padding: 24px\" />\n <script>const mountNode = document.getElementById('container');</script>\n </body>\n </html>\n ","js":"const { createRoot } = ReactDOM;\nconst { Divider, Steps } = antd;\nconst App = () => (\n <>\n <Steps\n progressDot\n current={1}\n items={[\n {\n title: 'Finished',\n description: 'This is a description.',\n },\n {\n title: 'In Progress',\n description: 'This is a description.',\n },\n {\n title: 'Waiting',\n description: 'This is a description.',\n },\n ]}\n />\n <Divider />\n <Steps\n progressDot\n current={1}\n direction=\"vertical\"\n items={[\n {\n title: 'Finished',\n description: 'This is a description. This is a description.',\n },\n {\n title: 'Finished',\n description: 'This is a description. This is a description.',\n },\n {\n title: 'In Progress',\n description: 'This is a description. This is a description.',\n },\n {\n title: 'Waiting',\n description: 'This is a description.',\n },\n {\n title: 'Waiting',\n description: 'This is a description.',\n },\n ]}\n />\n </>\n);\nconst ComponentDemo = App;\n\n\ncreateRoot(mountNode).render(<ComponentDemo />);\n","editors":"001","css":"","js_external":"https://unpkg.com/react@18/umd/react.development.js;https://unpkg.com/react-dom@18/umd/react-dom.development.js;https://unpkg.com/dayjs@1/dayjs.min.js;https://unpkg.com/antd@5.3.1/dist/antd-with-locales.js;https://unpkg.com/@ant-design/icons/dist/index.umd.js;https://unpkg.com/react-router-dom/dist/umd/react-router-dom.production.min.js;https://unpkg.com/react-router/dist/umd/react-router.production.min.js","js_pre_processor":"typescript"}"><span
role="img" class="anticon code-box-codepen"><svg viewBox="0 0 15 15" fill="currentColor">
<path
d="M14.777304,4.75062256 L7.77734505,0.0839936563 C7.60939924,-0.0279665065 7.39060662,-0.0279665065 7.22266081,0.0839936563 L0.222701813,4.75062256 C0.0836082937,4.84334851 5.66973453e-05,4.99945222 4.6875e-05,5.16662013 L4.6875e-05,9.83324903 C4.6875e-05,10.0004355 0.0836088906,10.1565596 0.222701812,10.2492466 L7.22266081,14.9158755 C7.30662908,14.9718752 7.403316,14.999875 7.50000292,14.999875 C7.59668984,14.999875 7.69337678,14.9718752 7.77734505,14.9158755 L14.777304,10.2492466 C14.9163976,10.1565206 14.9999492,10.0004169 14.999959,9.83324903 L14.999959,5.16662013 C14.9999492,4.99945222 14.9163976,4.84334851 14.777304,4.75062256 Z M7.50000292,9.23237755 L4.90139316,7.4999502 L7.50000292,5.76755409 L10.0986127,7.4999502 L7.50000292,9.23237755 Z M8,4.89905919 L8,1.43423573 L13.598561,5.16665138 L10.9999824,6.89904747 L8,4.89905919 Z M7.00000586,4.89905919 L4.00002344,6.89904747 L1.40141366,5.16665138 L7.00000586,1.43423573 L7.00000586,4.89905919 Z M3.09865372,7.4999502 L1.00004102,8.89903575 L1.00004102,6.10089589 L3.09865372,7.4999502 Z M4.00002344,8.10085292 L7.00000586,10.1008412 L7.00000586,13.5656334 L1.40141366,9.83328028 L4.00002344,8.10085292 Z M8,10.1008412 L10.9999824,8.10085292 L13.5985922,9.83328028 L8,13.5656647 L8,10.1008412 L8,10.1008412 Z M11.9013521,7.4999502 L13.9999648,6.10089589 L13.9999648,8.899067 L11.9013521,7.4999502 Z">
</path>
</svg></span></form>POST https://codesandbox.io/api/v1/sandboxes/define
<form class="code-box-code-action" action="https://codesandbox.io/api/v1/sandboxes/define" method="POST" target="_blank"><input type="hidden" name="parameters"
value="N4IgZglgNgpgziAXKADgQwMYGs0HMYB0AVnAPYB2SoGFALjObVSLRLbEiAMICuctpALYQAXjAAmAAgAipWpIDKtAJ6xJAWklpG4gAIBWAgGYCARhAAaEILQRKiEHfEwAHsQRXnKBs_IYI8MzatOKchibmVrrB6s5wELjkAPQQNOQIDlBo9PyWILoq3nBJAE4wmEwOAHqmABwEAAyNeQXKRaXlGLSxQpw19U0NeWUVfXWNzVYjXT2CYwOTINPdcBglECi0GSBVACwTQwC-njAAbtIw3uS-_oHILG3waxuVO_tN-iDHIKvrmxmgfhoEqvZbqX4vOCSIEgvIAIx40FCDjBEP-kgRSLyOVBnRWz3ROI06gYpwAvCRxL0rDAiDAupxUQStpJafSmN84SVSAB3OAwEpwKAQXKIADaIAAfE0AEwAUjy5DkkmcaFCAF1Dt8nK4CBg4ACQGl6IxOF8rDq3FsXMxjQxXhBBChSCDJAAlPGSMDcwSSADkyz9AG4ADrkR3O13ASRrcr0N2kZWHL0-_1gqmCJIYYX24NhiMu-QXQSkFNCf0EJLOEt58hh2PZGAJuQACipGB4gntBHwtAAorAu4wAELKACS4hbfuNtnIAr9AEoFwQytcBS2ADzF0tJSUL0PkSSSc0gaukAjW210e2cAuuj0VMu-gN42t3-R-yuWvUGt9OwuSIUMCSNGSiXHAAAK3IoFCybeuWfrBOIf6RvI0YQaQzqnAKFiKPQMGSHBqaITotb1hQ_AxnwAiCLItCIHh4FQZhcBin6KDcrgZQGnRfrqpIZKSG2ci4dGQK0HwuGWoRC4CZKQlhkeG4YVhAqKUeMbXowZLAOpGmSBucDoOQkp6fp0L4SBlrJuJfAMcAtlwIcZlKUkRnaKZh4ac5XmefpwBUrQPmuSppDYSUnn7uR6TyHEzIQBQAn-gAmqQPAxtokgABZhQKkiJbQWXAYFBC1mklEAIIoCgDEPl0BAAGJcElLayWS8ktupG5gTBZkdiUq60DppjBRpHGkFx8BwHROkdvwQh0aNR5sDAghwDpYouSBW1Hqw7AwAxfoNXYIpFchFg7SqTx_KwFAXV5-nHFtukPeZe2wIdY6Hsxk2_vd5kaXFN0JeQ_3mU9r1Hi9AO7WwH3-gA6rYrDkLgfpgwDQMvCDGPebjUOXe9B2I8jdho_jgPXdjd1bRD-maupu5hlFdZzi4qFXWAaA8FA8hVSgQYnt-WW0IIUBXowN4OGZG4AITSAA8lwAAqyUQX22Wi1AfnmRuIti5IWSo2SIYgAwps6wDevlOIlswxuXa0GgMZZcC_JDabPC0GA6i1Bbl1KY7zvkGgXYmyApwBDyqGm5pkvaabPIQOIhVks4kcYDA6hJynWVSeGrBoFA4IYEXMBkqYuFwFl6zkFg6gCOokBDUq_uQ7rQeSCHYem4Vq1ZzQUAurHdoJyAADEDRT9PbcwwZSRFWqdv6RucKkOIyjL7r4gQKckjJ-HM52GpIAWao5em-g4g76jDEyrsKAuLHTPtyvaK0JK5XyCWPCMAAcuvYCgl2ydm7L2Ac_cRzjknNOOgs55z7g3G5ZkW9XJrw3lvJB-ttZmS-FqIAA"><span
role="img" class="anticon code-box-codesandbox"><svg viewBox="0 0 1024 1024" fill="currentColor">
<path
d="M755 140.3l0.5-0.3h0.3L512 0 268.3 140h-0.3l0.8 0.4L68.6 256v512L512 1024l443.4-256V256L755 140.3z m-30 506.4v171.2L548 920.1V534.7L883.4 341v215.7l-158.4 90z m-584.4-90.6V340.8L476 534.4v385.7L300 818.5V646.7l-159.4-90.6zM511.7 280l171.1-98.3 166.3 96-336.9 194.5-337-194.6 165.7-95.7L511.7 280z">
</path>
</svg></span></form>POST https://codepen.io/pen/define
<form class="code-box-code-action" action="https://codepen.io/pen/define" method="POST" target="_blank"><input type="hidden" name="data"
value="{"title":"Customized Dot Style - antd@5.3.1","html":"\n <!DOCTYPE html>\n <html lang=\"en\">\n <head>\n <meta charset=\"utf-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1, shrink-to-fit=no\">\n <meta name=\"theme-color\" content=\"#000000\">\n </head>\n <body>\n <div id=\"container\" style=\"padding: 24px\" />\n <script>const mountNode = document.getElementById('container');</script>\n </body>\n </html>\n ","js":"const { createRoot } = ReactDOM;\nconst { Popover, Steps } = antd;\nconst customDot = (dot, { status, index }) => (\n <Popover\n content={\n <span>\n step {index} status: {status}\n </span>\n }\n >\n {dot}\n </Popover>\n);\nconst description = 'You can hover on the dot.';\nconst App = () => (\n <Steps\n current={1}\n progressDot={customDot}\n items={[\n {\n title: 'Finished',\n description,\n },\n {\n title: 'In Progress',\n description,\n },\n {\n title: 'Waiting',\n description,\n },\n {\n title: 'Waiting',\n description,\n },\n ]}\n />\n);\nconst ComponentDemo = App;\n\n\ncreateRoot(mountNode).render(<ComponentDemo />);\n","editors":"001","css":"","js_external":"https://unpkg.com/react@18/umd/react.development.js;https://unpkg.com/react-dom@18/umd/react-dom.development.js;https://unpkg.com/dayjs@1/dayjs.min.js;https://unpkg.com/antd@5.3.1/dist/antd-with-locales.js;https://unpkg.com/@ant-design/icons/dist/index.umd.js;https://unpkg.com/react-router-dom/dist/umd/react-router-dom.production.min.js;https://unpkg.com/react-router/dist/umd/react-router.production.min.js","js_pre_processor":"typescript"}"><span
role="img" class="anticon code-box-codepen"><svg viewBox="0 0 15 15" fill="currentColor">
<path
d="M14.777304,4.75062256 L7.77734505,0.0839936563 C7.60939924,-0.0279665065 7.39060662,-0.0279665065 7.22266081,0.0839936563 L0.222701813,4.75062256 C0.0836082937,4.84334851 5.66973453e-05,4.99945222 4.6875e-05,5.16662013 L4.6875e-05,9.83324903 C4.6875e-05,10.0004355 0.0836088906,10.1565596 0.222701812,10.2492466 L7.22266081,14.9158755 C7.30662908,14.9718752 7.403316,14.999875 7.50000292,14.999875 C7.59668984,14.999875 7.69337678,14.9718752 7.77734505,14.9158755 L14.777304,10.2492466 C14.9163976,10.1565206 14.9999492,10.0004169 14.999959,9.83324903 L14.999959,5.16662013 C14.9999492,4.99945222 14.9163976,4.84334851 14.777304,4.75062256 Z M7.50000292,9.23237755 L4.90139316,7.4999502 L7.50000292,5.76755409 L10.0986127,7.4999502 L7.50000292,9.23237755 Z M8,4.89905919 L8,1.43423573 L13.598561,5.16665138 L10.9999824,6.89904747 L8,4.89905919 Z M7.00000586,4.89905919 L4.00002344,6.89904747 L1.40141366,5.16665138 L7.00000586,1.43423573 L7.00000586,4.89905919 Z M3.09865372,7.4999502 L1.00004102,8.89903575 L1.00004102,6.10089589 L3.09865372,7.4999502 Z M4.00002344,8.10085292 L7.00000586,10.1008412 L7.00000586,13.5656334 L1.40141366,9.83328028 L4.00002344,8.10085292 Z M8,10.1008412 L10.9999824,8.10085292 L13.5985922,9.83328028 L8,13.5656647 L8,10.1008412 L8,10.1008412 Z M11.9013521,7.4999502 L13.9999648,6.10089589 L13.9999648,8.899067 L11.9013521,7.4999502 Z">
</path>
</svg></span></form>POST https://codesandbox.io/api/v1/sandboxes/define
<form class="code-box-code-action" action="https://codesandbox.io/api/v1/sandboxes/define" method="POST" target="_blank"><input type="hidden" name="parameters"
value="N4IgZglgNgpgziAXKADgQwMYGs0HMYB0AVnAPYB2SoGFALjObVSLRLbEiAMJQTZoAjWAAIAtMLSMAJgAEArAQDMBAIwgANCAC2aCJUQg9UmAA9iCTcZQNj5DBHjNJtKZwXK1mgE4xMTAwB6KgAcBAAM4RogMs6ixnAQuOQA9HwUCAZQaPRwTJoytACe1nDJPn6cQaERYVEFxfBlvhi0caRalSHhkd7NrVLtndU9IOUtonAYXhAotBkgAQAs3bUAvpYwAG4AIjDW5Lb2jsgsDZPTs5XLEXIg6yDnM3PMuWhe_qN9E1NPcMKv7yiAgArtBXAYxq1HrM_iCwVEch9Id8LnNhIixKIGJsALwkAYdTQwIgwFqcZHQtHE0lMe4CLykADucBgXjgvFySAA2iAAHwRABMAFIouRSLRhMY0K4ALqre5GUwEDBwDLUOgMD53TSKsxzEzMGiMTWcCBaFCkd7CABKfWEYAZWmEAHJIc6ANwAHXIZotVuAwimvno1tI4uEq3tjpdyIJyQwvE1Hu9vstEt2WlIUfaLoIyWMmeT5G9QeyMFD4oAFAMMMCtJqCPhaABRWD1xgAIUKAEkpJXnUbaLpyKznQBKMcEHwHVmVgA8GazyV5Y695GEwm1IALpAI-sNGsYpvNaZtfXUwgDwJZAGUh_QI9mna6-kXU1bnXndcrVW-T_7hG2CBNggYwvAvO89j-SMHRzZ1nCkIsS3SCUAEEUBQRAzz8AgADEuGEHFhErMdCN5S9vQ3I1cmELlay8adaAvFlaC4YEGM1GVCOEa8YDvMtKzCVdvUowMUOECguAAC0kfBuMrTY0CgYEYCw8g6wEVlSJxcjgFEqj0lIWACCgUhcH7SSZPIfBEGdC9FOUmBhPXDd_hgVj2MYhSlJU5yN1WNcDPIGj4h-WYIAobjnQAFSkiA_niiRJXgMLWAoAgkJcnxaHY9dK304Q515AqNznSCUDgErXPoxicWAGrNVWKqN0s2SYDq1rrJgJqXNc1y2BgLQ4DqrlmtcvTer6qbWHYVSXXK4QVDssa-tC1EIvIdQVojLbJqmii9v29E2FgLDnQWgVlsO_a1qeDbdqO1z1m2ibHr6mbTvm-gUGERQrre1zbvCigHre57ruEOUquXETDoXYDQNZYQYeLOHysqiGGsYOqsdoHrHs6_AOvIaS2vxo6pAgHwWg2nFPRATZWVYDAlPpsaBqGkaXu2jcPrm87vsW_6AeSyl7u28GAdekW-bOi7hYBoG0s2iXQce6WAdlr69l-hW3qV8WIf8tWpqhw6Ub6ucLeEZyAth0w_QlYwwDQYEoDQjD3S3b8pNoLQoAPY0jwMAq5wAQm2AB5LhooATQABWbYRff94q4ZTqBhCyay6ZABh6bTx65yk3wpELt653rIdAxktl3Nz4FaDAURggL7bK_ctBhHINB61zkCYEZR36bEoPaFzxlQNoKScWMECMBgURJ6kaeLz0NgICU74lPalRmKk6ZyCwURaFIURIHHsU26Nwqq67nu-_p6fBsXmhTK8EfB01XOAGIwn_gB18i7JBLtKcu-05wCFIFIQo4CjpzkppsYQoFc6DmHKyEeuRCiwFzugKQlNrJYQFIsFAJgR7WyLpSXk1EJSZmBIwAActAmA3Eax1gbE2VsL9Ow9j7AOOg6CvDjndFbKhY0rZQJgXA0qIC_ZQDgXceUQA"><span
role="img" class="anticon code-box-codesandbox"><svg viewBox="0 0 1024 1024" fill="currentColor">
<path
d="M755 140.3l0.5-0.3h0.3L512 0 268.3 140h-0.3l0.8 0.4L68.6 256v512L512 1024l443.4-256V256L755 140.3z m-30 506.4v171.2L548 920.1V534.7L883.4 341v215.7l-158.4 90z m-584.4-90.6V340.8L476 534.4v385.7L300 818.5V646.7l-159.4-90.6zM511.7 280l171.1-98.3 166.3 96-336.9 194.5-337-194.6 165.7-95.7L511.7 280z">
</path>
</svg></span></form>POST https://codepen.io/pen/define
<form class="code-box-code-action" action="https://codepen.io/pen/define" method="POST" target="_blank"><input type="hidden" name="data"
value="{"title":"Clickable - antd@5.3.1","html":"\n <!DOCTYPE html>\n <html lang=\"en\">\n <head>\n <meta charset=\"utf-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1, shrink-to-fit=no\">\n <meta name=\"theme-color\" content=\"#000000\">\n </head>\n <body>\n <div id=\"container\" style=\"padding: 24px\" />\n <script>const mountNode = document.getElementById('container');</script>\n </body>\n </html>\n ","js":"const { createRoot } = ReactDOM;\nconst { Divider, Steps } = antd;\nconst { useState } = React;;\nconst App = () => {\n const [current, setCurrent] = useState(0);\n const onChange = (value) => {\n console.log('onChange:', value);\n setCurrent(value);\n };\n const description = 'This is a description.';\n return (\n <>\n <Steps\n current={current}\n onChange={onChange}\n items={[\n {\n title: 'Step 1',\n description,\n },\n {\n title: 'Step 2',\n description,\n },\n {\n title: 'Step 3',\n description,\n },\n ]}\n />\n\n <Divider />\n\n <Steps\n current={current}\n onChange={onChange}\n direction=\"vertical\"\n items={[\n {\n title: 'Step 1',\n description,\n },\n {\n title: 'Step 2',\n description,\n },\n {\n title: 'Step 3',\n description,\n },\n ]}\n />\n </>\n );\n};\nconst ComponentDemo = App;\n\n\ncreateRoot(mountNode).render(<ComponentDemo />);\n","editors":"001","css":"","js_external":"https://unpkg.com/react@18/umd/react.development.js;https://unpkg.com/react-dom@18/umd/react-dom.development.js;https://unpkg.com/dayjs@1/dayjs.min.js;https://unpkg.com/antd@5.3.1/dist/antd-with-locales.js;https://unpkg.com/@ant-design/icons/dist/index.umd.js;https://unpkg.com/react-router-dom/dist/umd/react-router-dom.production.min.js;https://unpkg.com/react-router/dist/umd/react-router.production.min.js","js_pre_processor":"typescript"}"><span
role="img" class="anticon code-box-codepen"><svg viewBox="0 0 15 15" fill="currentColor">
<path
d="M14.777304,4.75062256 L7.77734505,0.0839936563 C7.60939924,-0.0279665065 7.39060662,-0.0279665065 7.22266081,0.0839936563 L0.222701813,4.75062256 C0.0836082937,4.84334851 5.66973453e-05,4.99945222 4.6875e-05,5.16662013 L4.6875e-05,9.83324903 C4.6875e-05,10.0004355 0.0836088906,10.1565596 0.222701812,10.2492466 L7.22266081,14.9158755 C7.30662908,14.9718752 7.403316,14.999875 7.50000292,14.999875 C7.59668984,14.999875 7.69337678,14.9718752 7.77734505,14.9158755 L14.777304,10.2492466 C14.9163976,10.1565206 14.9999492,10.0004169 14.999959,9.83324903 L14.999959,5.16662013 C14.9999492,4.99945222 14.9163976,4.84334851 14.777304,4.75062256 Z M7.50000292,9.23237755 L4.90139316,7.4999502 L7.50000292,5.76755409 L10.0986127,7.4999502 L7.50000292,9.23237755 Z M8,4.89905919 L8,1.43423573 L13.598561,5.16665138 L10.9999824,6.89904747 L8,4.89905919 Z M7.00000586,4.89905919 L4.00002344,6.89904747 L1.40141366,5.16665138 L7.00000586,1.43423573 L7.00000586,4.89905919 Z M3.09865372,7.4999502 L1.00004102,8.89903575 L1.00004102,6.10089589 L3.09865372,7.4999502 Z M4.00002344,8.10085292 L7.00000586,10.1008412 L7.00000586,13.5656334 L1.40141366,9.83328028 L4.00002344,8.10085292 Z M8,10.1008412 L10.9999824,8.10085292 L13.5985922,9.83328028 L8,13.5656647 L8,10.1008412 L8,10.1008412 Z M11.9013521,7.4999502 L13.9999648,6.10089589 L13.9999648,8.899067 L11.9013521,7.4999502 Z">
</path>
</svg></span></form>POST https://codesandbox.io/api/v1/sandboxes/define
<form class="code-box-code-action" action="https://codesandbox.io/api/v1/sandboxes/define" method="POST" target="_blank"><input type="hidden" name="parameters"
value="N4IgZglgNgpgziAXKADgQwMYGs0HMYB0AVnAPYB2SoGFALjObVSLRLbEiAHJoBuEuNKwoACAMr0UcEQFoRaRgBMAAgFYCAZgIBGEABoQAWzQRKiEKcUwAHsQQGrKBlfIYI8ZgtqLO6rboMAJxhMJnMAPW0ADgIABjj9EGUvGSs4AXIAeggacgRzKCF4JgNlWgBPJzhM4NDOSJj42MSyyvgakIxaVNJDeui4hKDO7sVe_sahkFqumTgMQIgUWnyQcIAWQeaAXwcYXgARGCdyFzcPZBY2-cXl-s341RBdkBulleY4WjRAsOmRuYLd7SL4_EogABGAFdoD5zDNum9ltJobDEvQvpwEYDbisRBjaLIZAxeABeEhjPoGGBEGBdLEApF4ml0pgvCGBUgAdzgMECcCgEExiAA2iAAHzxABMAFJEuRSISrGgfABdbYvSw2AgYOD5ah0Bh_Z4GLW2FbWZi5eiMTgQQwoUi_EQAJRGIjAnMMIgA5AifQBuAA65HtjudwBECxC9BdpEVIm2Hq9vuxlMyGEFRsDIbDTsJR0MpGTvV9BEyViLOfIIejRTjioAFGMMFDDEaCPhaABRWDtxgAIXKAElFI2fdaTOQ-T6AJSzgjBU58xsAHkLxcy4tnwfIIhEJpAldIBAtVsNtvMeedbtCehEkahvIkRUTJe9fpG1evhJ95bNOp6t-Dr5g-4iSNISaeqWPpeIo1a1hQXwiAAgigKCIK6IwEAAYgAwiIpIiI2s6EeKD4hvuuTISKraBEutD3rytB4VC9FGqqhEiE-MAvvQjaxDuIaUVGSGEhQeEABYKPgXGNrwaBQFCMCYeQbYQnypGkuRwAiVRSGkLABBQKQuDjhJ0nkPgiA-veClKTAQl7vuIjMax7GMPJinKU5-7bLuInBLQbF7o2ekiKu4rhfuq4SMccDRS5FROKSQYgOQfACEIEAUGliX7ukABeMCpa8xhQFAeXOS5Ll0QxpLAHVRrbPlIgWTJJXAO1VkwC11U1VGhR6jw7alek9AyBl_CCMI5BzBBVUDS5bAwIYcANSKrX7rp_VLfurDsCpvpxSgIjaLZW0uXAUIQgAKmwsCYT6sSxIgL1vaoF27XtoLBXAT2QKGcCSV9e0DWkQLLDl5BPbdklCiICNoCIEO4tDBCg2DiZ6JdO1Y0lD1HT6J0iFKmP49dd2E0972xNob1kzj31Lb9T5PSgnIYPAcDk1jqPvNDsPw9ISMo_AkOzRjTP47suOXft1PHZIIgaLzYOU_dh1PVyJisFZHpOiIJlWcbuD4vaMBqz93x_drutW0t_NQxQQsI6LTuSw7Lmy8zIjqolW6JbFC2-8lJVpVNWWzYte1NYwDVx7QfVg91-ANanvWtZmaDDWgo1peNMCTZlM3Q_N8Ux0tK1rRtcu-zVrP_b6gNCiD0v4-bWtK8cZ1e357dg3jHeN-znPc33BNd8TyuM5dPv40PFM22zvo62wE8K1PJOqwPe3z1ji9YyPq_27vYMHY93enesE_70t_vfYH33BxXodtKVkel7lICtUV4dlYpSqP9faJwTmxBiyc9oZ3TuQKSHVIFLWzrnfOrwVrF2mtlCg5cpCVwGtXdawBNr1wosQgqy8m4-hbsDDendL6UNMK3XuZ8Bp3z2ofdW5CAYMOocwpaF8iZUMkqTW-vCXLsOtkIFePoOakC5kBURNV-FPUTiIGRcieYKOxnXDurlOEn3XpozedC160BoYoIUaAISwEUJhWggRlKaNYTVB-S0n41VXG4kQTl_LCWnNYcMSoYBgDQFCKAhI0IoADIeACklaCGCgOeRgRpODhVXAAQgOAAeTwrdAAmgABW7CIWJ8SorPxKVAI2MlSoMDSmUsGq5JIhEUPUrGq52zfCjNJfkMBaClShLQMAMgoh1Muu03pyMMooP4DALkAS0qiSSfHNKXIICKFoJJUkVh-BcxkKs9Zkl7wMNYIpQEikSraCYpJRY5AsAyFoKQGQkA-kKlGcQ8ZnSpn_w2atIuNATKBAWdaI0pUADEL0IWxDeQ0zITSVStKWquCEpBFDlARXtVc5jeCI0UKVScpg-QLK-OUWApV0CKHMVZTCUp1goGsAszxDSmTimooSIsUJGBcBRTALiLY2wdi7L2X5g4RxjgnHQKcM4dweOZa1DxyLUXopirCuJUB0XPA1EAA"><span
role="img" class="anticon code-box-codesandbox"><svg viewBox="0 0 1024 1024" fill="currentColor">
<path
d="M755 140.3l0.5-0.3h0.3L512 0 268.3 140h-0.3l0.8 0.4L68.6 256v512L512 1024l443.4-256V256L755 140.3z m-30 506.4v171.2L548 920.1V534.7L883.4 341v215.7l-158.4 90z m-584.4-90.6V340.8L476 534.4v385.7L300 818.5V646.7l-159.4-90.6zM511.7 280l171.1-98.3 166.3 96-336.9 194.5-337-194.6 165.7-95.7L511.7 280z">
</path>
</svg></span></form>POST https://codepen.io/pen/define
<form class="code-box-code-action" action="https://codepen.io/pen/define" method="POST" target="_blank"><input type="hidden" name="data"
value="{"title":"Navigation Steps - antd@5.3.1","html":"\n <!DOCTYPE html>\n <html lang=\"en\">\n <head>\n <meta charset=\"utf-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1, shrink-to-fit=no\">\n <meta name=\"theme-color\" content=\"#000000\">\n </head>\n <body>\n <div id=\"container\" style=\"padding: 24px\" />\n <script>const mountNode = document.getElementById('container');</script>\n </body>\n </html>\n ","js":"const { createRoot } = ReactDOM;\nconst { Steps } = antd;\nconst { useState } = React;;\nconst App = () => {\n const [current, setCurrent] = useState(0);\n const onChange = (value) => {\n console.log('onChange:', value);\n setCurrent(value);\n };\n return (\n <>\n <Steps\n type=\"navigation\"\n size=\"small\"\n current={current}\n onChange={onChange}\n className=\"site-navigation-steps\"\n items={[\n {\n title: 'Step 1',\n subTitle: '00:00:05',\n status: 'finish',\n description: 'This is a description.',\n },\n {\n title: 'Step 2',\n subTitle: '00:01:02',\n status: 'process',\n description: 'This is a description.',\n },\n {\n title: 'Step 3',\n subTitle: 'waiting for longlong time',\n status: 'wait',\n description: 'This is a description.',\n },\n ]}\n />\n <Steps\n type=\"navigation\"\n current={current}\n onChange={onChange}\n className=\"site-navigation-steps\"\n items={[\n {\n status: 'finish',\n title: 'Step 1',\n },\n {\n status: 'process',\n title: 'Step 2',\n },\n {\n status: 'wait',\n title: 'Step 3',\n },\n {\n status: 'wait',\n title: 'Step 4',\n },\n ]}\n />\n <Steps\n type=\"navigation\"\n size=\"small\"\n current={current}\n onChange={onChange}\n className=\"site-navigation-steps\"\n items={[\n {\n status: 'finish',\n title: 'finish 1',\n },\n {\n status: 'finish',\n title: 'finish 2',\n },\n {\n status: 'process',\n title: 'current process',\n },\n {\n status: 'wait',\n title: 'wait',\n disabled: true,\n },\n ]}\n />\n </>\n );\n};\nconst ComponentDemo = App;\n\n\ncreateRoot(mountNode).render(<ComponentDemo />);\n","editors":"001","css":"","js_external":"https://unpkg.com/react@18/umd/react.development.js;https://unpkg.com/react-dom@18/umd/react-dom.development.js;https://unpkg.com/dayjs@1/dayjs.min.js;https://unpkg.com/antd@5.3.1/dist/antd-with-locales.js;https://unpkg.com/@ant-design/icons/dist/index.umd.js;https://unpkg.com/react-router-dom/dist/umd/react-router-dom.production.min.js;https://unpkg.com/react-router/dist/umd/react-router.production.min.js","js_pre_processor":"typescript"}"><span
role="img" class="anticon code-box-codepen"><svg viewBox="0 0 15 15" fill="currentColor">
<path
d="M14.777304,4.75062256 L7.77734505,0.0839936563 C7.60939924,-0.0279665065 7.39060662,-0.0279665065 7.22266081,0.0839936563 L0.222701813,4.75062256 C0.0836082937,4.84334851 5.66973453e-05,4.99945222 4.6875e-05,5.16662013 L4.6875e-05,9.83324903 C4.6875e-05,10.0004355 0.0836088906,10.1565596 0.222701812,10.2492466 L7.22266081,14.9158755 C7.30662908,14.9718752 7.403316,14.999875 7.50000292,14.999875 C7.59668984,14.999875 7.69337678,14.9718752 7.77734505,14.9158755 L14.777304,10.2492466 C14.9163976,10.1565206 14.9999492,10.0004169 14.999959,9.83324903 L14.999959,5.16662013 C14.9999492,4.99945222 14.9163976,4.84334851 14.777304,4.75062256 Z M7.50000292,9.23237755 L4.90139316,7.4999502 L7.50000292,5.76755409 L10.0986127,7.4999502 L7.50000292,9.23237755 Z M8,4.89905919 L8,1.43423573 L13.598561,5.16665138 L10.9999824,6.89904747 L8,4.89905919 Z M7.00000586,4.89905919 L4.00002344,6.89904747 L1.40141366,5.16665138 L7.00000586,1.43423573 L7.00000586,4.89905919 Z M3.09865372,7.4999502 L1.00004102,8.89903575 L1.00004102,6.10089589 L3.09865372,7.4999502 Z M4.00002344,8.10085292 L7.00000586,10.1008412 L7.00000586,13.5656334 L1.40141366,9.83328028 L4.00002344,8.10085292 Z M8,10.1008412 L10.9999824,8.10085292 L13.5985922,9.83328028 L8,13.5656647 L8,10.1008412 L8,10.1008412 Z M11.9013521,7.4999502 L13.9999648,6.10089589 L13.9999648,8.899067 L11.9013521,7.4999502 Z">
</path>
</svg></span></form>POST https://codesandbox.io/api/v1/sandboxes/define
<form class="code-box-code-action" action="https://codesandbox.io/api/v1/sandboxes/define" method="POST" target="_blank"><input type="hidden" name="parameters"
value="N4IgZglgNgpgziAXKADgQwMYGs0HMYB0AVnAPYB2SoGFALjObVSLRLbEiAMr0pwAEAdzYALfigBOpXBPgCAtPzSMAJgAEArAQDMBAIwgANCAC2aCJUQgLKmAA9iCY7ZQNb5DBHjNltFZy1dA2M1X3lbOAhccgB6CBpyBCsoNHo4JhDaAE9XOBjZTCYrAD09AA4CAAYqoxA1bNz8mELw0hNOUorqytqCjCKQTqqa4z7aVvaS8uGe0eb--TgMCQgUWiTBgBYZkABfZxgANwARGFdyd09vZBYc-GXVgeLt6o094yWVtaTQdLQJAZjRYPb78P4A2oAIwArtB_FYgZ9HgIYXDamlAfNxkjQRj-PJ5AxDgBeEgqNq1GBEGD9TiIkHrfhUmlMfYgSFSQRwGASOBQCDpJAAbRAAD5qgAmACktXIpFo_FsaH8AF1dmybPYCBg4D8QAl6IxOO9rBctes7MwDQwBhATChSAD-AAlLH8MBSEz8ADkY29AG4ADrkO0Op3AfjLZr0Z2keX8Xbuz0-oHkkwxDD8m0B4Ohx0K04mUhJto-ggxWxFnPkYNR1IwWPygAU5Iw0JMNoI-FoAFFYB3GAAhLIASRUTe9BvM5B53oAlHOCLIzRImwAeQvFmKiudB8j8fgmyukAgWq10G2cPNO12FEte31Y6vXhXe8uahw6uDP-35_gRngzgERMPVLb1fBUatawodJFXuL5WAofhiR9AAVEQBX4TC0DgnFEPIAhqwSWCAEEUBQRAXSxAgADEAGFkP4Js52Q0UmODA810AvgOIPSNoQkZdaGJYA9F2XiD1cCQMBtESADZKnE_c-LYGATDgEShQkvjgG0vj-FYdgYEo70aIsAURBgSDDD0viIgZCAKBs5T9P2WzdJc_SDLYWATJHfcAAUpBkORvWcry-LgaFIVQnzjJ9AAZGAwAVSpKkQNKMrKMLbIPeyEMc8hwq8tzPIPDyIoPQzfJ9AB1cxWHIXAcrKuz4MeQritcrr-DVXjt2DXdg2DewwwVWwwDQaEoAVMiUH9E0PwIERaBMKBz0YS8rG0tcAEJjgAeTo1CAE0Ap7fgVrW0VbLXK6oH4FImuJQMQAYV6btazjLOVT7Kr4tcO1oHCMBEf5uWE17oVoMB5DKD7coBoGcPINAOxekBDi8QQxteyML0YDHhBUWgRGJWwsZk-RidJwwsJDVg0CgYEmZgYk9DpuARBWcgsHkWhSHkSBhLlBGvqRmBgf4VH0de0m1JgeQaCgR08etQnXoAYjSnXKjF_61xiH6VD-yq10hUgVCyU2DZUCBDiwlQManCweTx9IslgDH0BUO2msoiVNhQOw8YG8XOLw0ViIVItoUYAA5S2YEY1t207bs-wVodR3HSc6GnWdd0NyPEcNi2rZtgGjdWqBK72dUgA"><span
role="img" class="anticon code-box-codesandbox"><svg viewBox="0 0 1024 1024" fill="currentColor">
<path
d="M755 140.3l0.5-0.3h0.3L512 0 268.3 140h-0.3l0.8 0.4L68.6 256v512L512 1024l443.4-256V256L755 140.3z m-30 506.4v171.2L548 920.1V534.7L883.4 341v215.7l-158.4 90z m-584.4-90.6V340.8L476 534.4v385.7L300 818.5V646.7l-159.4-90.6zM511.7 280l171.1-98.3 166.3 96-336.9 194.5-337-194.6 165.7-95.7L511.7 280z">
</path>
</svg></span></form>POST https://codepen.io/pen/define
<form class="code-box-code-action" action="https://codepen.io/pen/define" method="POST" target="_blank"><input type="hidden" name="data"
value="{"title":"Steps with progress - antd@5.3.1","html":"\n <!DOCTYPE html>\n <html lang=\"en\">\n <head>\n <meta charset=\"utf-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1, shrink-to-fit=no\">\n <meta name=\"theme-color\" content=\"#000000\">\n </head>\n <body>\n <div id=\"container\" style=\"padding: 24px\" />\n <script>const mountNode = document.getElementById('container');</script>\n </body>\n </html>\n ","js":"const { createRoot } = ReactDOM;\nconst { Steps } = antd;\nconst description = 'This is a description.';\nconst App = () => (\n <Steps\n current={1}\n percent={60}\n items={[\n {\n title: 'Finished',\n description,\n },\n {\n title: 'In Progress',\n subTitle: 'Left 00:00:08',\n description,\n },\n {\n title: 'Waiting',\n description,\n },\n ]}\n />\n);\nconst ComponentDemo = App;\n\n\ncreateRoot(mountNode).render(<ComponentDemo />);\n","editors":"001","css":"","js_external":"https://unpkg.com/react@18/umd/react.development.js;https://unpkg.com/react-dom@18/umd/react-dom.development.js;https://unpkg.com/dayjs@1/dayjs.min.js;https://unpkg.com/antd@5.3.1/dist/antd-with-locales.js;https://unpkg.com/@ant-design/icons/dist/index.umd.js;https://unpkg.com/react-router-dom/dist/umd/react-router-dom.production.min.js;https://unpkg.com/react-router/dist/umd/react-router.production.min.js","js_pre_processor":"typescript"}"><span
role="img" class="anticon code-box-codepen"><svg viewBox="0 0 15 15" fill="currentColor">
<path
d="M14.777304,4.75062256 L7.77734505,0.0839936563 C7.60939924,-0.0279665065 7.39060662,-0.0279665065 7.22266081,0.0839936563 L0.222701813,4.75062256 C0.0836082937,4.84334851 5.66973453e-05,4.99945222 4.6875e-05,5.16662013 L4.6875e-05,9.83324903 C4.6875e-05,10.0004355 0.0836088906,10.1565596 0.222701812,10.2492466 L7.22266081,14.9158755 C7.30662908,14.9718752 7.403316,14.999875 7.50000292,14.999875 C7.59668984,14.999875 7.69337678,14.9718752 7.77734505,14.9158755 L14.777304,10.2492466 C14.9163976,10.1565206 14.9999492,10.0004169 14.999959,9.83324903 L14.999959,5.16662013 C14.9999492,4.99945222 14.9163976,4.84334851 14.777304,4.75062256 Z M7.50000292,9.23237755 L4.90139316,7.4999502 L7.50000292,5.76755409 L10.0986127,7.4999502 L7.50000292,9.23237755 Z M8,4.89905919 L8,1.43423573 L13.598561,5.16665138 L10.9999824,6.89904747 L8,4.89905919 Z M7.00000586,4.89905919 L4.00002344,6.89904747 L1.40141366,5.16665138 L7.00000586,1.43423573 L7.00000586,4.89905919 Z M3.09865372,7.4999502 L1.00004102,8.89903575 L1.00004102,6.10089589 L3.09865372,7.4999502 Z M4.00002344,8.10085292 L7.00000586,10.1008412 L7.00000586,13.5656334 L1.40141366,9.83328028 L4.00002344,8.10085292 Z M8,10.1008412 L10.9999824,8.10085292 L13.5985922,9.83328028 L8,13.5656647 L8,10.1008412 L8,10.1008412 Z M11.9013521,7.4999502 L13.9999648,6.10089589 L13.9999648,8.899067 L11.9013521,7.4999502 Z">
</path>
</svg></span></form>POST https://codesandbox.io/api/v1/sandboxes/define
<form class="code-box-code-action" action="https://codesandbox.io/api/v1/sandboxes/define" method="POST" target="_blank"><input type="hidden" name="parameters"
value="N4IgZglgNgpgziAXKADgQwMYGs0HMYB0AVnAPYB2SoGFALjObVSLRLbEiADJoBGMUAAQAFKJhgBbBrUEBaQWkYATAAIBWAgGYCARhAAaEBLQRKiEKaUwAHsQSGrKBlfIYI8ZotpLOG7XsMVL1krOAhccgB6CBpyBHMxejgmQNoATyc4SIAnGEwmcwA9HQAOAgAGCoMQFXTMnLyMWhDSCU5issry6tz89tKKqsNeppa2ooGunsbmuAxsiBRaeJBCgBZB7oBfBxgANwARGCdyFzcPZBYM-HnFgtWNyrUQHZA5haX40GS0bPuR2a3T6CH5_aq8ACu0B85gBsnedzggkh0OqSX-M3hQOWgnRclkDD2AF4SEpWtUYEQYE1OHCEcDKdSmK9eNlSAB3OAwbJwKAQZJIADaIAAfJUAEwAUmq5FIMisaB8AF0tq9LDYCBg4F8QLF6IxOC9DOrbMtrMw9dJOBAJChSH9BAAlGaCMBsiSCADkAM9AG4ADrkG12h3AQTzPL0R2kOWCLau91euFkiSRDB86R-wPB-0yI4SUgJ1pegiRKwFrPkQMRtBRmO0AAUZIwEKkjAI-FoAFFYG3aAAhNIASSUDc9epM5G5noAlDOCLlTtyGwAefOFyIimcB8iCQRGkDl0gEM0WuhW8w5h3O_JFj3emaVq8yT2lk2a7VP225wRhgDK9AoEi8ZusWnpeEolbVhQySCKE2IQBQghEl6AAqAAW_KCFhaBwTcHysBQBCVrEsFsJISIoYKgZ7sANF7ribCwIgXoAGKmPy6EwJB-j0Xu8EEYh5C8bucYibRfGMewMAsZ6Q67sIbK4Lkn7iQxAl3EJak7PRdGiXurDSbJADqJisOQuCemp_H4ZpFDaSJSo7qRMgAIIoCgLE3k0BCsQAwshggNjOyEikF9EriKkkrgBxxIi22SLrQRLADo8ZiPwUCiOIfZEv6IB7NyrAYGgUD5dh9ASHAKXkVV8abtFrKCA1-mCDFgHxRCiXSClaWCE42QYD1wAAGzlOlfACNlQ25flhV_DEpXlbV1XACt9VRa1K5NS1DFtbFQHhl1SW9fGYQAF4wHlbzGFAZUgIIGVTWIM09XNRWLfdFUUTVlVwBtEUtdugaBjYIbyjAYBoBCUBuR5voHu-6G0BIUBnowF4gNFACEBwAPJ-ahACawhdoIyOo5te17iuFNCGIFnXQw-VU9TNNcYqrNszTUi0LhGDob8XLJflEK0GAsglCzklsyuvO4eQaBSNdezuOy4PlZajDXeyEBKLQ6FElYqtDbIuv6-h-jYUGrClVipVXToVtwOhCzkFgsi0KQsiQMlsrS61svy4IivK_lBuSDAsg0FA9qa-e2v5QAxOUqdpwH3NtZEHNKFz1PbaQShpHnstKBAezYUo10TqY3LlckaSwNd6BKGXFkseKawoNY5W7ZnbX0rQIouYIBYQowAByhcwIFzattIHYwN2vbSIOI5jjXU7ZLOvorpEg8lwxe-8IXxcy1ndN5y8qpAA"><span
role="img" class="anticon code-box-codesandbox"><svg viewBox="0 0 1024 1024" fill="currentColor">
<path
d="M755 140.3l0.5-0.3h0.3L512 0 268.3 140h-0.3l0.8 0.4L68.6 256v512L512 1024l443.4-256V256L755 140.3z m-30 506.4v171.2L548 920.1V534.7L883.4 341v215.7l-158.4 90z m-584.4-90.6V340.8L476 534.4v385.7L300 818.5V646.7l-159.4-90.6zM511.7 280l171.1-98.3 166.3 96-336.9 194.5-337-194.6 165.7-95.7L511.7 280z">
</path>
</svg></span></form>POST https://codepen.io/pen/define
<form class="code-box-code-action" action="https://codepen.io/pen/define" method="POST" target="_blank"><input type="hidden" name="data"
value="{"title":"Label Placement - antd@5.3.1","html":"\n <!DOCTYPE html>\n <html lang=\"en\">\n <head>\n <meta charset=\"utf-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1, shrink-to-fit=no\">\n <meta name=\"theme-color\" content=\"#000000\">\n </head>\n <body>\n <div id=\"container\" style=\"padding: 24px\" />\n <script>const mountNode = document.getElementById('container');</script>\n </body>\n </html>\n ","js":"const { createRoot } = ReactDOM;\nconst { Steps } = antd;\nconst description = 'This is a description.';\nconst items = [\n {\n title: 'Finished',\n description,\n },\n {\n title: 'In Progress',\n description,\n },\n {\n title: 'Waiting',\n description,\n },\n];\nconst App = () => (\n <>\n <Steps current={1} labelPlacement=\"vertical\" items={items} />\n <br />\n <Steps current={1} percent={60} labelPlacement=\"vertical\" items={items} />\n <br />\n <Steps current={1} size=\"small\" labelPlacement=\"vertical\" items={items} />\n </>\n);\nconst ComponentDemo = App;\n\n\ncreateRoot(mountNode).render(<ComponentDemo />);\n","editors":"001","css":"","js_external":"https://unpkg.com/react@18/umd/react.development.js;https://unpkg.com/react-dom@18/umd/react-dom.development.js;https://unpkg.com/dayjs@1/dayjs.min.js;https://unpkg.com/antd@5.3.1/dist/antd-with-locales.js;https://unpkg.com/@ant-design/icons/dist/index.umd.js;https://unpkg.com/react-router-dom/dist/umd/react-router-dom.production.min.js;https://unpkg.com/react-router/dist/umd/react-router.production.min.js","js_pre_processor":"typescript"}"><span
role="img" class="anticon code-box-codepen"><svg viewBox="0 0 15 15" fill="currentColor">
<path
d="M14.777304,4.75062256 L7.77734505,0.0839936563 C7.60939924,-0.0279665065 7.39060662,-0.0279665065 7.22266081,0.0839936563 L0.222701813,4.75062256 C0.0836082937,4.84334851 5.66973453e-05,4.99945222 4.6875e-05,5.16662013 L4.6875e-05,9.83324903 C4.6875e-05,10.0004355 0.0836088906,10.1565596 0.222701812,10.2492466 L7.22266081,14.9158755 C7.30662908,14.9718752 7.403316,14.999875 7.50000292,14.999875 C7.59668984,14.999875 7.69337678,14.9718752 7.77734505,14.9158755 L14.777304,10.2492466 C14.9163976,10.1565206 14.9999492,10.0004169 14.999959,9.83324903 L14.999959,5.16662013 C14.9999492,4.99945222 14.9163976,4.84334851 14.777304,4.75062256 Z M7.50000292,9.23237755 L4.90139316,7.4999502 L7.50000292,5.76755409 L10.0986127,7.4999502 L7.50000292,9.23237755 Z M8,4.89905919 L8,1.43423573 L13.598561,5.16665138 L10.9999824,6.89904747 L8,4.89905919 Z M7.00000586,4.89905919 L4.00002344,6.89904747 L1.40141366,5.16665138 L7.00000586,1.43423573 L7.00000586,4.89905919 Z M3.09865372,7.4999502 L1.00004102,8.89903575 L1.00004102,6.10089589 L3.09865372,7.4999502 Z M4.00002344,8.10085292 L7.00000586,10.1008412 L7.00000586,13.5656334 L1.40141366,9.83328028 L4.00002344,8.10085292 Z M8,10.1008412 L10.9999824,8.10085292 L13.5985922,9.83328028 L8,13.5656647 L8,10.1008412 L8,10.1008412 Z M11.9013521,7.4999502 L13.9999648,6.10089589 L13.9999648,8.899067 L11.9013521,7.4999502 Z">
</path>
</svg></span></form>POST https://codesandbox.io/api/v1/sandboxes/define
<form class="code-box-code-action" action="https://codesandbox.io/api/v1/sandboxes/define" method="POST" target="_blank"><input type="hidden" name="parameters"
value="N4IgZglgNgpgziAXKADgQwMYGs0HMYB0AVnAPYB2SoGFALjObVSLRLbEiAJLlQTkwABAGV6KOIIC0gtIwAmAAQCsBAMwEAjCAA0IALZp-nfnJgAPYgl2mUDU-QwR4zWbTmcV6rboWvJpuAhccgB6CBpyBEQQKDR6OCYfWgBPWzgQgCcYTCZogD0NAA4CAAZSnRAFFLTM7Ixaf1I9TgLispKKrJyWotLy3S76xub83vbOuoa4DAyIFFookDyAFj6OgF9rGAA3ABEYW3J7R2dkFlT4GbncpdWypRBNkGnZ-ajQBLQMm8Gpq7fBJ9vhUAEYAV2g7miv0kL2uEnBkIq8R-k1h_wWghRUkkDG2AF4SHImhUYEQYPVODC4QCyRSmE8QRlSAB3OAwDJwPgJJAAbRAAD4ygAmACkFXIpFoglMaHcAF11k8TOYCBg4O8QBF6IxOI9dCqLAszMxtQwbhA9ChSN9BAAlSaCMDMvSCADkvzdAG4ADrkS3W23AQQzbL0O2kKWCdZOl3umHEvQhDB8c3ev0Bm3S_Z6UixprugghUy59PkP2huIwCNSgAUxIwYL05oI-FoAFFYM3GAAhZJcOS1t3awwCDJugCUE4IWSOHNrAB4c3mQgKJ77yIJBPqQCXSARjaa6ObjFas_bHc6Cx7JmXM7a3UXDWqNXez7bqkJg6IDnAAArMuI0b5q6bquHIb6BtKwYAILbHEXzaIIAAyEAJEhP5ATGV6geBZZ-hWFAJDKCGCPigi8n6W7AFRW5YmwsCIO6MGMII-yBMEggACoMUIGhutotFbo2GSzrQTElIJm7RlJ1FCfR7AwExbosdm8BBJuPGKYIwoCfJIliUxGiyXRny0GCcDKRyzLjiZmy0TR0lbqwinKapbHqZxWmwIIqh6U5IZgqJ5pMcKdkmY5dEKYxzGsexGncbxgjLP5UUGSFgjGbR9nkPKG6EZE0psDAegSORlHSZFdEuTFbqYZlqV0QEGIQBQylcQAFmhgjdWgIhiJlBCNTlckBTVSnuvVukmVuzWvKwbXup13W9f1Bw6UN4UOfJ43KfVfkzTKlzza15DtV1Eirftm3ZVJeUEQ4RHSjBKAoExDo5AQABiADCZGCLWE5kQKAO0QucgQNsAryQuqEJPJW7FXoyFoMkpBgrQ-I-iAHU2hAABedBoFA2MIyRtBoMI6MZBgMD4sAcgIesZOzqYGRcPQej07WSNIYaQP4iDtZk1usNobQBAcyV0MBVFotwxLUt6AQACyMAUyLctoPBFMZPTC5wQhGSAjT9MAAYdbQtDiIgIQhEQpCXB1BC5jAIRoCgEAhNsGiZLIiYAPxYDAyT4gAJMAhrrGbMarszsty85vH631HVZGAWM41bNt264BABBp2MCpHnMHrx6wLu7Arx4nidzdcp2Z-58XBEhfUF5xsTkLgYJ4EIYA2oIIKYFguDMmCRwyK9fAYHEp1wHzEjp_wMByEPySCO5ACq7a7Nx2R6KTCdRaumui5hcBn6ZKSwPTwYGBkuD8FxpBvYIhTRjXtdRZ-mf8HwAgj7fzSkFMS9MkZqlAeaL-wDAQU3MnAcBpczIWRkBIC-AFX5wF5G6FBcA3SKivojTmiCS4lTgDA2up9j6CErgrSWnMZaJwnJQ6hotiyQxluuB65goJHTAGgMEUBnqvS9DuZ8ls9BQCPIwE80QYYAEJdgAHkfpcQAJp_nbIISRUAmFywXLowQXdcCZwYEXTWhjshyH0d_BczYKYhg6l8dkmNsYYzAJIQoFiaGiwcX1cgaBmyZ22E4FkUFsYhmPIwTOLIIByFoB1fEphQm00kHEhJHU-b-lYMTdExM6bGUBGnfgWBJC0FIJISAmNJQ-NgfY9WASgl02xokkqMBJA0CgDaSJZoYnYwAMQlGGSMuptdK4dWsbYgxIJSByGSNMxO4NIY9TkJnEcK8MiRISMkW-2N0ByAht3UKywUBmEiWw4BC4aS0AFBEYiuYJ60AAHJzKEORBsTYWxtk7O03s_ZBzDiJpsycXpK43MWXRSusz5mQombQKR0zHhKiAA"><span
role="img" class="anticon code-box-codesandbox"><svg viewBox="0 0 1024 1024" fill="currentColor">
<path
d="M755 140.3l0.5-0.3h0.3L512 0 268.3 140h-0.3l0.8 0.4L68.6 256v512L512 1024l443.4-256V256L755 140.3z m-30 506.4v171.2L548 920.1V534.7L883.4 341v215.7l-158.4 90z m-584.4-90.6V340.8L476 534.4v385.7L300 818.5V646.7l-159.4-90.6zM511.7 280l171.1-98.3 166.3 96-336.9 194.5-337-194.6 165.7-95.7L511.7 280z">
</path>
</svg></span></form>POST https://codepen.io/pen/define
<form class="code-box-code-action" action="https://codepen.io/pen/define" method="POST" target="_blank"><input type="hidden" name="data"
value="{"title":"Inline Steps - antd@5.3.1","html":"\n <!DOCTYPE html>\n <html lang=\"en\">\n <head>\n <meta charset=\"utf-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1, shrink-to-fit=no\">\n <meta name=\"theme-color\" content=\"#000000\">\n </head>\n <body>\n <div id=\"container\" style=\"padding: 24px\" />\n <script>const mountNode = document.getElementById('container');</script>\n </body>\n </html>\n ","js":"const { createRoot } = ReactDOM;\nconst { Avatar, List, Steps } = antd;\nconst data = [\n {\n title: 'Ant Design Title 1',\n current: 0,\n },\n {\n title: 'Ant Design Title 2',\n current: 1,\n status: 'error',\n },\n {\n title: 'Ant Design Title 3',\n current: 2,\n },\n {\n title: 'Ant Design Title 4',\n current: 1,\n },\n];\nconst items = [\n {\n title: 'Step 1',\n description: 'This is a Step 1.',\n },\n {\n title: 'Step 2',\n description: 'This is a Step 2.',\n },\n {\n title: 'Step 3',\n description: 'This is a Step 3.',\n },\n];\nconst App = () => (\n <div>\n <List\n itemLayout=\"horizontal\"\n dataSource={data}\n renderItem={(item, index) => (\n <List.Item>\n <List.Item.Meta\n avatar={<Avatar src={`https://joesch.moe/api/v1/random?key=${index}`} />}\n title={<a href=\"https://ant.design\">{item.title}</a>}\n description=\"Ant Design, a design language for background applications, is refined by Ant UED Team\"\n />\n <Steps\n style={{\n marginTop: 8,\n }}\n type=\"inline\"\n current={item.current}\n status={item.status}\n items={items}\n />\n </List.Item>\n )}\n />\n </div>\n);\nconst ComponentDemo = App;\n\n\ncreateRoot(mountNode).render(<ComponentDemo />);\n","editors":"001","css":"","js_external":"https://unpkg.com/react@18/umd/react.development.js;https://unpkg.com/react-dom@18/umd/react-dom.development.js;https://unpkg.com/dayjs@1/dayjs.min.js;https://unpkg.com/antd@5.3.1/dist/antd-with-locales.js;https://unpkg.com/@ant-design/icons/dist/index.umd.js;https://unpkg.com/react-router-dom/dist/umd/react-router-dom.production.min.js;https://unpkg.com/react-router/dist/umd/react-router.production.min.js","js_pre_processor":"typescript"}"><span
role="img" class="anticon code-box-codepen"><svg viewBox="0 0 15 15" fill="currentColor">
<path
d="M14.777304,4.75062256 L7.77734505,0.0839936563 C7.60939924,-0.0279665065 7.39060662,-0.0279665065 7.22266081,0.0839936563 L0.222701813,4.75062256 C0.0836082937,4.84334851 5.66973453e-05,4.99945222 4.6875e-05,5.16662013 L4.6875e-05,9.83324903 C4.6875e-05,10.0004355 0.0836088906,10.1565596 0.222701812,10.2492466 L7.22266081,14.9158755 C7.30662908,14.9718752 7.403316,14.999875 7.50000292,14.999875 C7.59668984,14.999875 7.69337678,14.9718752 7.77734505,14.9158755 L14.777304,10.2492466 C14.9163976,10.1565206 14.9999492,10.0004169 14.999959,9.83324903 L14.999959,5.16662013 C14.9999492,4.99945222 14.9163976,4.84334851 14.777304,4.75062256 Z M7.50000292,9.23237755 L4.90139316,7.4999502 L7.50000292,5.76755409 L10.0986127,7.4999502 L7.50000292,9.23237755 Z M8,4.89905919 L8,1.43423573 L13.598561,5.16665138 L10.9999824,6.89904747 L8,4.89905919 Z M7.00000586,4.89905919 L4.00002344,6.89904747 L1.40141366,5.16665138 L7.00000586,1.43423573 L7.00000586,4.89905919 Z M3.09865372,7.4999502 L1.00004102,8.89903575 L1.00004102,6.10089589 L3.09865372,7.4999502 Z M4.00002344,8.10085292 L7.00000586,10.1008412 L7.00000586,13.5656334 L1.40141366,9.83328028 L4.00002344,8.10085292 Z M8,10.1008412 L10.9999824,8.10085292 L13.5985922,9.83328028 L8,13.5656647 L8,10.1008412 L8,10.1008412 Z M11.9013521,7.4999502 L13.9999648,6.10089589 L13.9999648,8.899067 L11.9013521,7.4999502 Z">
</path>
</svg></span></form>Text Content
Enable JavaScript to run this app.
ANT DESIGN
Ctrl K
* Design
* Development
* Components
* Blog
* Resources
5.3.1
More
中En
* Components Overview
* General
* Button
* Icon
* Typography
* Layout
* Divider
* Grid
* Layout
* Space
* Navigation
* Anchor
* Breadcrumb
* Dropdown
* Menu
* Pagination
* Steps
* Data Entry
* AutoComplete
* Cascader
* Checkbox
* DatePicker
* Form
* Input
* InputNumber
* Mentions
* Radio
* Rate
* Select
* Slider
* Switch
* TimePicker
* Transfer
* TreeSelect
* Upload
* Data Display
* Avatar
* Badge
* Calendar
* Card
* Carousel
* Collapse
* Descriptions
* Empty
* Image
* List
* Popover
* QRCode
* Segmented
* Statistic
* Table
* Tabs
* Tag
* Timeline
* Tooltip
* Tour
* Tree
* Feedback
* Alert
* Drawer
* Message
* Modal
* Notification
* Popconfirm
* Progress
* Result
* Skeleton
* Spin
* Other
* Affix
* App
* ConfigProvider
* FloatButton
* Watermark
When To Use
Examples
Basic
Mini version
With icon
Switch Step
Vertical
Vertical mini version
Error status
Dot Style
Customized Dot Style
Clickable
Navigation Steps
Steps with progress
Label Placement
Inline Steps
API
Steps
type="inline"
StepItem
STEPS
Steps is a navigation bar that guides users through the steps of a task.
Steps is a navigation bar that guides users through the steps of a task.
WHEN TO USE
When a given task is complicated or has a certain sequence in the series of
subtasks, we can decompose it into several steps to make things easier.
EXAMPLES
Finished
This is a description.
2
In Progress
Left 00:00:08
This is a description.
3
Waiting
This is a description.
Basic
The most basic step bar.
TypeScript
JavaScript
import React from 'react';
import { Steps } from 'antd';
const description = 'This is a description.';
const App: React.FC = () => (
<Steps
current={1}
items={[
{
title: 'Finished',
description,
},
{
title: 'In Progress',
description,
subTitle: 'Left 00:00:08',
},
{
title: 'Waiting',
description,
},
]}
/>
);
export default App;
Finished
2
In Progress
3
Waiting
Mini version
By setting like this: <Steps size="small">, you can get a mini version.
TypeScript
JavaScript
import React from 'react';
import { Steps } from 'antd';
const App: React.FC = () => (
<Steps
size="small"
current={1}
items={[
{
title: 'Finished',
},
{
title: 'In Progress',
},
{
title: 'Waiting',
},
]}
/>
);
export default App;
Login
Verification
Pay
Done
With icon
You can use your own custom icons by setting the property icon for items.
TypeScript
JavaScript
import React from 'react';
import { LoadingOutlined, SmileOutlined, SolutionOutlined, UserOutlined } from '@ant-design/icons';
import { Steps } from 'antd';
const App: React.FC = () => (
<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;
1
First
2
Second
3
Last
First-content
Next
Switch Step
Cooperate with the content and buttons, to represent the progress of a process.
TypeScript
JavaScript
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: React.FC = () => {
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: React.CSSProperties = {
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;
Finished
This is a description.
2
In Progress
This is a description.
3
Waiting
This is a description.
Vertical
A simple step bar in the vertical direction.
TypeScript
JavaScript
import React from 'react';
import { Steps } from 'antd';
const description = 'This is a description.';
const App: React.FC = () => (
<Steps
direction="vertical"
current={1}
items={[
{
title: 'Finished',
description,
},
{
title: 'In Progress',
description,
},
{
title: 'Waiting',
description,
},
]}
/>
);
export default App;
Finished
This is a description.
2
In Progress
This is a description.
3
Waiting
This is a description.
Vertical mini version
A simple mini version step bar in the vertical direction.
TypeScript
JavaScript
import React from 'react';
import { Steps } from 'antd';
const description = 'This is a description.';
const App: React.FC = () => (
<Steps
direction="vertical"
size="small"
current={1}
items={[
{ title: 'Finished', description },
{
title: 'In Progress',
description,
},
{
title: 'Waiting',
description,
},
]}
/>
);
export default App;
Finished
This is a description
In Process
This is a description
3
Waiting
This is a description
Error status
By using status of Steps, you can specify the state for current step.
TypeScript
JavaScript
import React from 'react';
import { Steps } from 'antd';
const description = 'This is a description';
const App: React.FC = () => (
<Steps
current={1}
status="error"
items={[
{
title: 'Finished',
description,
},
{
title: 'In Process',
description,
},
{
title: 'Waiting',
description,
},
]}
/>
);
export default App;
Finished
This is a description.
In Progress
This is a description.
Waiting
This is a description.
Finished
This is a description. This is a description.
Finished
This is a description. This is a description.
In Progress
This is a description. This is a description.
Waiting
This is a description.
Waiting
This is a description.
Dot Style
Steps with progress dot style.
TypeScript
JavaScript
import React from 'react';
import { Divider, Steps } from 'antd';
const App: React.FC = () => (
<>
<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;
Finished
You can hover on the dot.
In Progress
You can hover on the dot.
Waiting
You can hover on the dot.
Waiting
You can hover on the dot.
Customized Dot Style
You can customize the display for Steps with progress dot style.
TypeScript
JavaScript
import React from 'react';
import type { StepsProps } from 'antd';
import { Popover, Steps } from 'antd';
const customDot: StepsProps['progressDot'] = (dot, { status, index }) => (
<Popover
content={
<span>
step {index} status: {status}
</span>
}
>
{dot}
</Popover>
);
const description = 'You can hover on the dot.';
const App: React.FC = () => (
<Steps
current={1}
progressDot={customDot}
items={[
{
title: 'Finished',
description,
},
{
title: 'In Progress',
description,
},
{
title: 'Waiting',
description,
},
{
title: 'Waiting',
description,
},
]}
/>
);
export default App;
1
Step 1
This is a description.
2
Step 2
This is a description.
3
Step 3
This is a description.
1
Step 1
This is a description.
2
Step 2
This is a description.
3
Step 3
This is a description.
Clickable
Setting onChange makes Steps clickable.
TypeScript
JavaScript
import React, { useState } from 'react';
import { Divider, Steps } from 'antd';
const App: React.FC = () => {
const [current, setCurrent] = useState(0);
const onChange = (value: number) => {
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;
Step 1
00:00:05
This is a description.
2
Step 2
00:01:02
This is a description.
3
Step 3
waiting for longlong time
This is a description.
Step 1
2
Step 2
3
Step 3
4
Step 4
finish 1
finish 2
3
current process
4
wait
Navigation Steps
Navigation steps.
TypeScript
JavaScript
import React, { useState } from 'react';
import { Steps } from 'antd';
const App: React.FC = () => {
const [current, setCurrent] = useState(0);
const onChange = (value: number) => {
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;
Finished
This is a description.
2
In Progress
Left 00:00:08
This is a description.
3
Waiting
This is a description.
Steps with progress
Steps with progress.
TypeScript
JavaScript
import React from 'react';
import { Steps } from 'antd';
const description = 'This is a description.';
const App: React.FC = () => (
<Steps
current={1}
percent={60}
items={[
{
title: 'Finished',
description,
},
{
title: 'In Progress',
subTitle: 'Left 00:00:08',
description,
},
{
title: 'Waiting',
description,
},
]}
/>
);
export default App;
Finished
This is a description.
2
In Progress
This is a description.
3
Waiting
This is a description.
Finished
This is a description.
2
In Progress
This is a description.
3
Waiting
This is a description.
Finished
This is a description.
2
In Progress
This is a description.
3
Waiting
This is a description.
Label Placement
Set labelPlacement to vertical.
TypeScript
JavaScript
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: React.FC = () => (
<>
<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;
* ANT DESIGN TITLE 1
Ant Design, a design language for background applications, is refined by Ant
UED Team
Step 1
This is a Step 1.
Step 2
This is a Step 2.
Step 3
This is a Step 3.
* ANT DESIGN TITLE 2
Ant Design, a design language for background applications, is refined by Ant
UED Team
Step 1
This is a Step 1.
Step 2
This is a Step 2.
Step 3
This is a Step 3.
* ANT DESIGN TITLE 3
Ant Design, a design language for background applications, is refined by Ant
UED Team
Step 1
This is a Step 1.
Step 2
This is a Step 2.
Step 3
This is a Step 3.
* ANT DESIGN TITLE 4
Ant Design, a design language for background applications, is refined by Ant
UED Team
Step 1
This is a Step 1.
Step 2
This is a Step 2.
Step 3
This is a Step 3.
Inline Steps
Inline type steps, suitable for displaying the process and current state of the
object in the list content scene.
TypeScript
JavaScript
import type { StepsProps } from 'antd';
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: React.FC = () => (
<div>
<List
itemLayout="horizontal"
dataSource={data}
renderItem={(item, index) => (
<List.Item>
<List.Item.Meta
avatar={<Avatar src={`https://joesch.moe/api/v1/random?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 as StepsProps['status']}
items={items}
/>
</List.Item>
)}
/>
</div>
);
export default App;
API
STEPS
The whole of the step bar.
PropertyDescriptionTypeDefaultVersionclassNameAdditional class to
Stepsstring-currentTo set the current step, counting from 0. You can overwrite
this state by using status of Stepnumber0directionTo specify the direction of
the step bar, horizontal or verticalstringhorizontalinitialSet the initial step,
counting from 0number0labelPlacementPlace title and description with horizontal
or vertical directionstringhorizontalpercentProgress circle percentage of
current step in process status (only works on basic
Steps)number-4.5.0progressDotSteps with progress dot style, customize the
progress dot by setting it to a function. labelPlacement will be verticalboolean
| (iconDot, {index, status, title, description}) =>
ReactNodefalseresponsiveChange to vertical direction when screen width smaller
than 532pxbooleantruesizeTo specify the size of the step bar, default and small
are currently supportedstringdefaultstatusTo specify the status of current step,
can be set to one of the following values: wait process finish
errorstringprocesstypeType of steps, can be set to one of the following values:
default navigation inlinestringdefaultinline: 5.0onChangeTrigger when Step is
changed(current) => void-itemsStepItem contentStepItem[]4.24.0
TYPE="INLINE"
PropertyDescriptionTypeDefaultVersionclassNameAdditional class to
Stepsstring-currentTo set the current step, counting from 0. You can overwrite
this state by using status of Stepnumber0initialSet the initial step, counting
from 0number0statusTo specify the status of current step, can be set to one of
the following values: wait process finish errorstringprocessonChangeTrigger when
Step is changed(current) => void-itemsStepItem content. not supported: icon
subtitleStepItem[]4.24.0
STEPITEM
A single step in the step bar.
PropertyDescriptionTypeDefaultVersiondescriptionDescription of the step,
optional propertyReactNode-disabledDisable clickbooleanfalseiconIcon of the
step, optional propertyReactNode-statusTo specify the status. It will be
automatically set by current of Steps if not configured. Optional values are:
wait process finish errorstringwaitsubTitleSubtitle of the
stepReactNode-titleTitle of the stepReactNode-
PaginationAutoComplete
RESOURCES
Ant Design Charts
Ant Design Pro
Ant Design Pro Components
Ant Design Mobile
Ant Design Mini
Ant Design Landing-Landing Templates
Scaffolds-Scaffold Market
Umi-React Application Framework
dumi-Component doc generator
qiankun-Micro-Frontends Framework
ahooks-React Hooks Library
Ant Motion-Motion Solution
China Mirror 🇨🇳
COMMUNITY
Awesome Ant Design
Medium
Twitter
Ant Design in YuQue
Ant Design in Zhihu
Experience Cloud Blog
SEE Conf-Experience Tech Conference
HELP
GitHub
Change Log
FAQ
Bug Report
Issues
Discussions
StackOverflow
SegmentFault
MORE PRODUCTS
YuQue-Document Collaboration Platform
AntV-Data Visualization
Egg-Enterprise Node.js Framework
Kitchen-Sketch Toolkit
Ant Financial Experience Tech
Theme Editor
Made with ❤ by
Ant Group and Ant Design Community