github
/
ant-design-vue
mirror of https://github.com/vueComponent/ant-design-vue
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

feat: steps add type、 v-model、subTitle

pull/1845/head
tangjinzhou 2020-02-23 14:34:11 +08:00
parent 7c7b4163d9
commit f88ce93b02
16 changed files with 713 additions and 199 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
build/config.js
View File

@ -1,5 +1,5 @@
module.exports = {
dev: {
componentName: 'input', // dev components
componentName: 'steps', // dev components
},
};

598
components/steps/__tests__/__snapshots__/demo.test.js.snap
View File

@ -1,38 +1,116 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`renders ./components/steps/demo/clickable.md correctly 1`] = `
<div>
<div class="ant-steps ant-steps-horizontal ant-steps-label-horizontal">
<div class="ant-steps-item ant-steps-item-process ant-steps-item-active">
<div role="button" tabindex="0" class="ant-steps-item-container">
<div class="ant-steps-item-tail"></div>
<div class="ant-steps-item-icon"><span class="ant-steps-icon">1</span></div>
<div class="ant-steps-item-content">
<div class="ant-steps-item-title">Step 1</div>
<div class="ant-steps-item-description">This is a description.</div>
</div>
</div>
</div>
<div class="ant-steps-item ant-steps-item-wait">
<div role="button" tabindex="0" class="ant-steps-item-container">
<div class="ant-steps-item-tail"></div>
<div class="ant-steps-item-icon"><span class="ant-steps-icon">2</span></div>
<div class="ant-steps-item-content">
<div class="ant-steps-item-title">Step 2</div>
<div class="ant-steps-item-description">This is a description.</div>
</div>
</div>
</div>
<div class="ant-steps-item ant-steps-item-wait">
<div role="button" tabindex="0" class="ant-steps-item-container">
<div class="ant-steps-item-tail"></div>
<div class="ant-steps-item-icon"><span class="ant-steps-icon">3</span></div>
<div class="ant-steps-item-content">
<div class="ant-steps-item-title">Step 3</div>
<div class="ant-steps-item-description">This is a description.</div>
</div>
</div>
</div>
</div>
<div role="separator" class="ant-divider ant-divider-horizontal"></div>
<div class="ant-steps ant-steps-vertical">
<div class="ant-steps-item ant-steps-item-process ant-steps-item-active">
<div role="button" tabindex="0" class="ant-steps-item-container">
<div class="ant-steps-item-tail"></div>
<div class="ant-steps-item-icon"><span class="ant-steps-icon">1</span></div>
<div class="ant-steps-item-content">
<div class="ant-steps-item-title">Step 1</div>
<div class="ant-steps-item-description">This is a description.</div>
</div>
</div>
</div>
<div class="ant-steps-item ant-steps-item-wait">
<div role="button" tabindex="0" class="ant-steps-item-container">
<div class="ant-steps-item-tail"></div>
<div class="ant-steps-item-icon"><span class="ant-steps-icon">2</span></div>
<div class="ant-steps-item-content">
<div class="ant-steps-item-title">Step 2</div>
<div class="ant-steps-item-description">This is a description.</div>
</div>
</div>
</div>
<div class="ant-steps-item ant-steps-item-wait">
<div role="button" tabindex="0" class="ant-steps-item-container">
<div class="ant-steps-item-tail"></div>
<div class="ant-steps-item-icon"><span class="ant-steps-icon">3</span></div>
<div class="ant-steps-item-content">
<div class="ant-steps-item-title">Step 3</div>
<div class="ant-steps-item-description">This is a description.</div>
</div>
</div>
</div>
</div>
</div>
`;
exports[`renders ./components/steps/demo/customized-progress-dot.md correctly 1`] = `
<div>
<div class="ant-steps ant-steps-horizontal ant-steps-label-vertical ant-steps-dot">
<div class="ant-steps-item ant-steps-item-finish">
<div class="ant-steps-item-tail"></div>
<div class="ant-steps-item-icon"><span class="ant-steps-icon"><span class="ant-steps-icon-dot"></span></span></div>
<div class="ant-steps-item-content">
<div class="ant-steps-item-title">Finished</div>
<div class="ant-steps-item-description">You can hover on the dot.</div>
<div class="ant-steps-item-container">
<div class="ant-steps-item-tail"></div>
<div class="ant-steps-item-icon"><span class="ant-steps-icon"><span class="ant-steps-icon-dot"></span></span></div>
<div class="ant-steps-item-content">
<div class="ant-steps-item-title">Finished</div>
<div class="ant-steps-item-description">You can hover on the dot.</div>
</div>
</div>
</div>
<div class="ant-steps-item ant-steps-item-process">
<div class="ant-steps-item-tail"></div>
<div class="ant-steps-item-icon"><span class="ant-steps-icon"><span class="ant-steps-icon-dot"></span></span></div>
<div class="ant-steps-item-content">
<div class="ant-steps-item-title">In Progress</div>
<div class="ant-steps-item-description">You can hover on the dot.</div>
<div class="ant-steps-item ant-steps-item-process ant-steps-item-active">
<div class="ant-steps-item-container">
<div class="ant-steps-item-tail"></div>
<div class="ant-steps-item-icon"><span class="ant-steps-icon"><span class="ant-steps-icon-dot"></span></span></div>
<div class="ant-steps-item-content">
<div class="ant-steps-item-title">In Progress</div>
<div class="ant-steps-item-description">You can hover on the dot.</div>
</div>
</div>
</div>
<div class="ant-steps-item ant-steps-item-wait">
<div class="ant-steps-item-tail"></div>
<div class="ant-steps-item-icon"><span class="ant-steps-icon"><span class="ant-steps-icon-dot"></span></span></div>
<div class="ant-steps-item-content">
<div class="ant-steps-item-title">Waiting</div>
<div class="ant-steps-item-description">You can hover on the dot.</div>
<div class="ant-steps-item-container">
<div class="ant-steps-item-tail"></div>
<div class="ant-steps-item-icon"><span class="ant-steps-icon"><span class="ant-steps-icon-dot"></span></span></div>
<div class="ant-steps-item-content">
<div class="ant-steps-item-title">Waiting</div>
<div class="ant-steps-item-description">You can hover on the dot.</div>
</div>
</div>
</div>
<div class="ant-steps-item ant-steps-item-wait">
<div class="ant-steps-item-tail"></div>
<div class="ant-steps-item-icon"><span class="ant-steps-icon"><span class="ant-steps-icon-dot"></span></span></div>
<div class="ant-steps-item-content">
<div class="ant-steps-item-title">Waiting</div>
<div class="ant-steps-item-description">You can hover on the dot.</div>
<div class="ant-steps-item-container">
<div class="ant-steps-item-tail"></div>
<div class="ant-steps-item-icon"><span class="ant-steps-icon"><span class="ant-steps-icon-dot"></span></span></div>
<div class="ant-steps-item-content">
<div class="ant-steps-item-title">Waiting</div>
<div class="ant-steps-item-description">You can hover on the dot.</div>
</div>
</div>
</div>
</div>
@ -42,27 +120,33 @@ exports[`renders ./components/steps/demo/customized-progress-dot.md correctly 1`
exports[`renders ./components/steps/demo/error.md correctly 1`] = `
<div class="ant-steps ant-steps-horizontal ant-steps-label-horizontal">
<div class="ant-steps-item ant-steps-item-finish ant-steps-next-error">
<div class="ant-steps-item-tail"></div>
<div class="ant-steps-item-icon"><span class="ant-steps-icon"><i aria-label="icon: check" class="ant-steps-finish-icon anticon anticon-check"><svg viewBox="64 64 896 896" data-icon="check" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class=""><path d="M912 190h-69.9c-9.8 0-19.1 4.5-25.1 12.2L404.7 724.5 207 474a32 32 0 0 0-25.1-12.2H112c-6.7 0-10.4 7.7-6.3 12.9l273.9 347c12.8 16.2 37.4 16.2 50.3 0l488.4-618.9c4.1-5.1.4-12.8-6.3-12.8z"></path></svg></i></span></div>
<div class="ant-steps-item-content">
<div class="ant-steps-item-title">Finished</div>
<div class="ant-steps-item-description">This is a description.</div>
<div class="ant-steps-item-container">
<div class="ant-steps-item-tail"></div>
<div class="ant-steps-item-icon"><span class="ant-steps-icon"><i aria-label="icon: check" class="ant-steps-finish-icon anticon anticon-check"><svg viewBox="64 64 896 896" data-icon="check" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class=""><path d="M912 190h-69.9c-9.8 0-19.1 4.5-25.1 12.2L404.7 724.5 207 474a32 32 0 0 0-25.1-12.2H112c-6.7 0-10.4 7.7-6.3 12.9l273.9 347c12.8 16.2 37.4 16.2 50.3 0l488.4-618.9c4.1-5.1.4-12.8-6.3-12.8z"></path></svg></i></span></div>
<div class="ant-steps-item-content">
<div class="ant-steps-item-title">Finished</div>
<div class="ant-steps-item-description">This is a description.</div>
</div>
</div>
</div>
<div class="ant-steps-item ant-steps-item-error">
<div class="ant-steps-item-tail"></div>
<div class="ant-steps-item-icon"><span class="ant-steps-icon"><i aria-label="icon: close" class="ant-steps-error-icon anticon anticon-close"><svg viewBox="64 64 896 896" data-icon="close" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class=""><path d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 0 0 203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"></path></svg></i></span></div>
<div class="ant-steps-item-content">
<div class="ant-steps-item-title">In Progress</div>
<div class="ant-steps-item-description">This is a description.</div>
<div class="ant-steps-item ant-steps-item-error ant-steps-item-active">
<div class="ant-steps-item-container">
<div class="ant-steps-item-tail"></div>
<div class="ant-steps-item-icon"><span class="ant-steps-icon"><i aria-label="icon: close" class="ant-steps-error-icon anticon anticon-close"><svg viewBox="64 64 896 896" data-icon="close" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class=""><path d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 0 0 203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"></path></svg></i></span></div>
<div class="ant-steps-item-content">
<div class="ant-steps-item-title">In Progress</div>
<div class="ant-steps-item-description">This is a description.</div>
</div>
</div>
</div>
<div class="ant-steps-item ant-steps-item-wait">
<div class="ant-steps-item-tail"></div>
<div class="ant-steps-item-icon"><span class="ant-steps-icon">3</span></div>
<div class="ant-steps-item-content">
<div class="ant-steps-item-title">Waiting</div>
<div class="ant-steps-item-description">This is a description.</div>
<div class="ant-steps-item-container">
<div class="ant-steps-item-tail"></div>
<div class="ant-steps-item-icon"><span class="ant-steps-icon">3</span></div>
<div class="ant-steps-item-content">
<div class="ant-steps-item-title">Waiting</div>
<div class="ant-steps-item-description">This is a description.</div>
</div>
</div>
</div>
</div>
@ -70,61 +154,246 @@ exports[`renders ./components/steps/demo/error.md correctly 1`] = `
exports[`renders ./components/steps/demo/icon.md correctly 1`] = `
<div class="ant-steps ant-steps-horizontal ant-steps-label-horizontal">
<div class="ant-steps-item ant-steps-item-finish ant-steps-item-custom">
<div class="ant-steps-item-tail"></div>
<div class="ant-steps-item-icon"><span class="ant-steps-icon"><i slot="icon" aria-label="icon: user" class="anticon anticon-user"><svg viewBox="64 64 896 896" data-icon="user" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class=""><path d="M858.5 763.6a374 374 0 0 0-80.6-119.5 375.63 375.63 0 0 0-119.5-80.6c-.4-.2-.8-.3-1.2-.5C719.5 518 760 444.7 760 362c0-137-111-248-248-248S264 225 264 362c0 82.7 40.5 156 102.8 201.1-.4.2-.8.3-1.2.5-44.8 18.9-85 46-119.5 80.6a375.63 375.63 0 0 0-80.6 119.5A371.7 371.7 0 0 0 136 901.8a8 8 0 0 0 8 8.2h60c4.4 0 7.9-3.5 8-7.8 2-77.2 33-149.5 87.8-204.3 56.7-56.7 132-87.9 212.2-87.9s155.5 31.2 212.2 87.9C779 752.7 810 825 812 902.2c.1 4.4 3.6 7.8 8 7.8h60a8 8 0 0 0 8-8.2c-1-47.8-10.9-94.3-29.5-138.2zM512 534c-45.9 0-89.1-17.9-121.6-50.4S340 407.9 340 362c0-45.9 17.9-89.1 50.4-121.6S466.1 190 512 190s89.1 17.9 121.6 50.4S684 316.1 684 362c0 45.9-17.9 89.1-50.4 121.6S557.9 534 512 534z"></path></svg></i></span></div>
<div class="ant-steps-item-content">
<div class="ant-steps-item-title">Login</div>
<div class="ant-steps-item ant-steps-item-finish ant-steps-item-custom ant-steps-item-active">
<div class="ant-steps-item-container">
<div class="ant-steps-item-tail"></div>
<div class="ant-steps-item-icon"><span class="ant-steps-icon"><i slot="icon" aria-label="icon: user" class="anticon anticon-user"><svg viewBox="64 64 896 896" data-icon="user" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class=""><path d="M858.5 763.6a374 374 0 0 0-80.6-119.5 375.63 375.63 0 0 0-119.5-80.6c-.4-.2-.8-.3-1.2-.5C719.5 518 760 444.7 760 362c0-137-111-248-248-248S264 225 264 362c0 82.7 40.5 156 102.8 201.1-.4.2-.8.3-1.2.5-44.8 18.9-85 46-119.5 80.6a375.63 375.63 0 0 0-80.6 119.5A371.7 371.7 0 0 0 136 901.8a8 8 0 0 0 8 8.2h60c4.4 0 7.9-3.5 8-7.8 2-77.2 33-149.5 87.8-204.3 56.7-56.7 132-87.9 212.2-87.9s155.5 31.2 212.2 87.9C779 752.7 810 825 812 902.2c.1 4.4 3.6 7.8 8 7.8h60a8 8 0 0 0 8-8.2c-1-47.8-10.9-94.3-29.5-138.2zM512 534c-45.9 0-89.1-17.9-121.6-50.4S340 407.9 340 362c0-45.9 17.9-89.1 50.4-121.6S466.1 190 512 190s89.1 17.9 121.6 50.4S684 316.1 684 362c0 45.9-17.9 89.1-50.4 121.6S557.9 534 512 534z"></path></svg></i></span></div>
<div class="ant-steps-item-content">
<div class="ant-steps-item-title">Login</div>
</div>
</div>
</div>
<div class="ant-steps-item ant-steps-item-finish ant-steps-item-custom">
<div class="ant-steps-item-tail"></div>
<div class="ant-steps-item-icon"><span class="ant-steps-icon"><i slot="icon" aria-label="icon: solution" class="anticon anticon-solution"><svg viewBox="64 64 896 896" data-icon="solution" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class=""><path d="M688 264c0-4.4-3.6-8-8-8H296c-4.4 0-8 3.6-8 8v48c0 4.4 3.6 8 8 8h384c4.4 0 8-3.6 8-8v-48zm-8 136H296c-4.4 0-8 3.6-8 8v48c0 4.4 3.6 8 8 8h384c4.4 0 8-3.6 8-8v-48c0-4.4-3.6-8-8-8zM480 544H296c-4.4 0-8 3.6-8 8v48c0 4.4 3.6 8 8 8h184c4.4 0 8-3.6 8-8v-48c0-4.4-3.6-8-8-8zm-48 308H208V148h560v344c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8V108c0-17.7-14.3-32-32-32H168c-17.7 0-32 14.3-32 32v784c0 17.7 14.3 32 32 32h264c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm356.8-74.4c29-26.3 47.2-64.3 47.2-106.6 0-79.5-64.5-144-144-144s-144 64.5-144 144c0 42.3 18.2 80.3 47.2 106.6-57 32.5-96.2 92.7-99.2 162.1-.2 4.5 3.5 8.3 8 8.3h48.1c4.2 0 7.7-3.3 8-7.6C564 871.2 621.7 816 692 816s128 55.2 131.9 124.4c.2 4.2 3.7 7.6 8 7.6H880c4.6 0 8.2-3.8 8-8.3-2.9-69.5-42.2-129.6-99.2-162.1zM692 591c44.2 0 80 35.8 80 80s-35.8 80-80 80-80-35.8-80-80 35.8-80 80-80z"></path></svg></i></span></div>
<div class="ant-steps-item-content">
<div class="ant-steps-item-title">Verification</div>
<div class="ant-steps-item-container">
<div class="ant-steps-item-tail"></div>
<div class="ant-steps-item-icon"><span class="ant-steps-icon"><i slot="icon" aria-label="icon: solution" class="anticon anticon-solution"><svg viewBox="64 64 896 896" data-icon="solution" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class=""><path d="M688 264c0-4.4-3.6-8-8-8H296c-4.4 0-8 3.6-8 8v48c0 4.4 3.6 8 8 8h384c4.4 0 8-3.6 8-8v-48zm-8 136H296c-4.4 0-8 3.6-8 8v48c0 4.4 3.6 8 8 8h384c4.4 0 8-3.6 8-8v-48c0-4.4-3.6-8-8-8zM480 544H296c-4.4 0-8 3.6-8 8v48c0 4.4 3.6 8 8 8h184c4.4 0 8-3.6 8-8v-48c0-4.4-3.6-8-8-8zm-48 308H208V148h560v344c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8V108c0-17.7-14.3-32-32-32H168c-17.7 0-32 14.3-32 32v784c0 17.7 14.3 32 32 32h264c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm356.8-74.4c29-26.3 47.2-64.3 47.2-106.6 0-79.5-64.5-144-144-144s-144 64.5-144 144c0 42.3 18.2 80.3 47.2 106.6-57 32.5-96.2 92.7-99.2 162.1-.2 4.5 3.5 8.3 8 8.3h48.1c4.2 0 7.7-3.3 8-7.6C564 871.2 621.7 816 692 816s128 55.2 131.9 124.4c.2 4.2 3.7 7.6 8 7.6H880c4.6 0 8.2-3.8 8-8.3-2.9-69.5-42.2-129.6-99.2-162.1zM692 591c44.2 0 80 35.8 80 80s-35.8 80-80 80-80-35.8-80-80 35.8-80 80-80z"></path></svg></i></span></div>
<div class="ant-steps-item-content">
<div class="ant-steps-item-title">Verification</div>
</div>
</div>
</div>
<div class="ant-steps-item ant-steps-item-process ant-steps-item-custom">
<div class="ant-steps-item-tail"></div>
<div class="ant-steps-item-icon"><span class="ant-steps-icon"><i slot="icon" aria-label="icon: loading" class="anticon anticon-loading"><svg viewBox="0 0 1024 1024" data-icon="loading" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class="anticon-spin"><path d="M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 0 0-94.3-139.9 437.71 437.71 0 0 0-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z"></path></svg></i></span></div>
<div class="ant-steps-item-content">
<div class="ant-steps-item-title">Pay</div>
<div class="ant-steps-item-container">
<div class="ant-steps-item-tail"></div>
<div class="ant-steps-item-icon"><span class="ant-steps-icon"><i slot="icon" aria-label="icon: loading" class="anticon anticon-loading"><svg viewBox="0 0 1024 1024" data-icon="loading" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class="anticon-spin"><path d="M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 0 0-94.3-139.9 437.71 437.71 0 0 0-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z"></path></svg></i></span></div>
<div class="ant-steps-item-content">
<div class="ant-steps-item-title">Pay</div>
</div>
</div>
</div>
<div class="ant-steps-item ant-steps-item-wait ant-steps-item-custom">
<div class="ant-steps-item-tail"></div>
<div class="ant-steps-item-icon"><span class="ant-steps-icon"><i slot="icon" aria-label="icon: smile-o" class="anticon anticon-smile-o"><svg viewBox="64 64 896 896" data-icon="smile" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class=""><path d="M288 421a48 48 0 1 0 96 0 48 48 0 1 0-96 0zm352 0a48 48 0 1 0 96 0 48 48 0 1 0-96 0zM512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm263 711c-34.2 34.2-74 61-118.3 79.8C611 874.2 562.3 884 512 884c-50.3 0-99-9.8-144.8-29.2A370.4 370.4 0 0 1 248.9 775c-34.2-34.2-61-74-79.8-118.3C149.8 611 140 562.3 140 512s9.8-99 29.2-144.8A370.4 370.4 0 0 1 249 248.9c34.2-34.2 74-61 118.3-79.8C413 149.8 461.7 140 512 140c50.3 0 99 9.8 144.8 29.2A370.4 370.4 0 0 1 775.1 249c34.2 34.2 61 74 79.8 118.3C874.2 413 884 461.7 884 512s-9.8 99-29.2 144.8A368.89 368.89 0 0 1 775 775zM664 533h-48.1c-4.2 0-7.8 3.2-8.1 7.4C604 589.9 562.5 629 512 629s-92.1-39.1-95.8-88.6c-.3-4.2-3.9-7.4-8.1-7.4H360a8 8 0 0 0-8 8.4c4.4 84.3 74.5 151.6 160 151.6s155.6-67.3 160-151.6a8 8 0 0 0-8-8.4z"></path></svg></i></span></div>
<div class="ant-steps-item-content">
<div class="ant-steps-item-title">Done</div>
<div class="ant-steps-item-container">
<div class="ant-steps-item-tail"></div>
<div class="ant-steps-item-icon"><span class="ant-steps-icon"><i slot="icon" aria-label="icon: smile-o" class="anticon anticon-smile-o"><svg viewBox="64 64 896 896" data-icon="smile" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class=""><path d="M288 421a48 48 0 1 0 96 0 48 48 0 1 0-96 0zm352 0a48 48 0 1 0 96 0 48 48 0 1 0-96 0zM512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm263 711c-34.2 34.2-74 61-118.3 79.8C611 874.2 562.3 884 512 884c-50.3 0-99-9.8-144.8-29.2A370.4 370.4 0 0 1 248.9 775c-34.2-34.2-61-74-79.8-118.3C149.8 611 140 562.3 140 512s9.8-99 29.2-144.8A370.4 370.4 0 0 1 249 248.9c34.2-34.2 74-61 118.3-79.8C413 149.8 461.7 140 512 140c50.3 0 99 9.8 144.8 29.2A370.4 370.4 0 0 1 775.1 249c34.2 34.2 61 74 79.8 118.3C874.2 413 884 461.7 884 512s-9.8 99-29.2 144.8A368.89 368.89 0 0 1 775 775zM664 533h-48.1c-4.2 0-7.8 3.2-8.1 7.4C604 589.9 562.5 629 512 629s-92.1-39.1-95.8-88.6c-.3-4.2-3.9-7.4-8.1-7.4H360a8 8 0 0 0-8 8.4c4.4 84.3 74.5 151.6 160 151.6s155.6-67.3 160-151.6a8 8 0 0 0-8-8.4z"></path></svg></i></span></div>
<div class="ant-steps-item-content">
<div class="ant-steps-item-title">Done</div>
</div>
</div>
</div>
</div>
`;
exports[`renders ./components/steps/demo/nav.md correctly 1`] = `
<div>
<div class="ant-steps ant-steps-horizontal ant-steps-small ant-steps-label-horizontal ant-steps-navigation" style="margin-bottom: 60px; box-shadow: 0px -1px 0 0 #e8e8e8 inset;">
<div class="ant-steps-item ant-steps-item-finish ant-steps-item-active">
<div role="button" tabindex="0" class="ant-steps-item-container">
<div class="ant-steps-item-tail"></div>
<div class="ant-steps-item-icon"><span class="ant-steps-icon"><i aria-label="icon: check" class="ant-steps-finish-icon anticon anticon-check"><svg viewBox="64 64 896 896" data-icon="check" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class=""><path d="M912 190h-69.9c-9.8 0-19.1 4.5-25.1 12.2L404.7 724.5 207 474a32 32 0 0 0-25.1-12.2H112c-6.7 0-10.4 7.7-6.3 12.9l273.9 347c12.8 16.2 37.4 16.2 50.3 0l488.4-618.9c4.1-5.1.4-12.8-6.3-12.8z"></path></svg></i></span></div>
<div class="ant-steps-item-content">
<div class="ant-steps-item-title">Step 1<div title="00:00:05" class="ant-steps-item-subtitle">00:00:05</div>
</div>
<div class="ant-steps-item-description">This is a description.</div>
</div>
</div>
</div>
<div class="ant-steps-item ant-steps-item-process">
<div role="button" tabindex="0" class="ant-steps-item-container">
<div class="ant-steps-item-tail"></div>
<div class="ant-steps-item-icon"><span class="ant-steps-icon">2</span></div>
<div class="ant-steps-item-content">
<div class="ant-steps-item-title">Step 2<div title="00:01:02" class="ant-steps-item-subtitle">00:01:02</div>
</div>
<div class="ant-steps-item-description">This is a description.</div>
</div>
</div>
</div>
<div class="ant-steps-item ant-steps-item-wait">
<div role="button" tabindex="0" class="ant-steps-item-container">
<div class="ant-steps-item-tail"></div>
<div class="ant-steps-item-icon"><span class="ant-steps-icon">3</span></div>
<div class="ant-steps-item-content">
<div class="ant-steps-item-title">Step 3<div title="waiting for longlong time" class="ant-steps-item-subtitle">waiting for longlong time</div>
</div>
<div class="ant-steps-item-description">This is a description.</div>
</div>
</div>
</div>
</div>
<div class="ant-steps ant-steps-horizontal ant-steps-label-horizontal ant-steps-navigation" style="margin-bottom: 60px; box-shadow: 0px -1px 0 0 #e8e8e8 inset;">
<div class="ant-steps-item ant-steps-item-finish ant-steps-item-active">
<div role="button" tabindex="0" class="ant-steps-item-container">
<div class="ant-steps-item-tail"></div>
<div class="ant-steps-item-icon"><span class="ant-steps-icon"><i aria-label="icon: check" class="ant-steps-finish-icon anticon anticon-check"><svg viewBox="64 64 896 896" data-icon="check" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class=""><path d="M912 190h-69.9c-9.8 0-19.1 4.5-25.1 12.2L404.7 724.5 207 474a32 32 0 0 0-25.1-12.2H112c-6.7 0-10.4 7.7-6.3 12.9l273.9 347c12.8 16.2 37.4 16.2 50.3 0l488.4-618.9c4.1-5.1.4-12.8-6.3-12.8z"></path></svg></i></span></div>
<div class="ant-steps-item-content">
<div class="ant-steps-item-title">Step 1</div>
</div>
</div>
</div>
<div class="ant-steps-item ant-steps-item-process">
<div role="button" tabindex="0" class="ant-steps-item-container">
<div class="ant-steps-item-tail"></div>
<div class="ant-steps-item-icon"><span class="ant-steps-icon">2</span></div>
<div class="ant-steps-item-content">
<div class="ant-steps-item-title">Step 2</div>
</div>
</div>
</div>
<div class="ant-steps-item ant-steps-item-wait">
<div role="button" tabindex="0" class="ant-steps-item-container">
<div class="ant-steps-item-tail"></div>
<div class="ant-steps-item-icon"><span class="ant-steps-icon">3</span></div>
<div class="ant-steps-item-content">
<div class="ant-steps-item-title">Step 3</div>
</div>
</div>
</div>
<div class="ant-steps-item ant-steps-item-wait">
<div role="button" tabindex="0" class="ant-steps-item-container">
<div class="ant-steps-item-tail"></div>
<div class="ant-steps-item-icon"><span class="ant-steps-icon">4</span></div>
<div class="ant-steps-item-content">
<div class="ant-steps-item-title">Step 4</div>
</div>
</div>
</div>
</div>
<div class="ant-steps ant-steps-horizontal ant-steps-small ant-steps-label-horizontal ant-steps-navigation" style="margin-bottom: 60px; box-shadow: 0px -1px 0 0 #e8e8e8 inset;">
<div class="ant-steps-item ant-steps-item-finish ant-steps-item-active">
<div role="button" tabindex="0" class="ant-steps-item-container">
<div class="ant-steps-item-tail"></div>
<div class="ant-steps-item-icon"><span class="ant-steps-icon"><i aria-label="icon: check" class="ant-steps-finish-icon anticon anticon-check"><svg viewBox="64 64 896 896" data-icon="check" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class=""><path d="M912 190h-69.9c-9.8 0-19.1 4.5-25.1 12.2L404.7 724.5 207 474a32 32 0 0 0-25.1-12.2H112c-6.7 0-10.4 7.7-6.3 12.9l273.9 347c12.8 16.2 37.4 16.2 50.3 0l488.4-618.9c4.1-5.1.4-12.8-6.3-12.8z"></path></svg></i></span></div>
<div class="ant-steps-item-content">
<div class="ant-steps-item-title">finish 1</div>
</div>
</div>
</div>
<div class="ant-steps-item ant-steps-item-finish">
<div role="button" tabindex="0" class="ant-steps-item-container">
<div class="ant-steps-item-tail"></div>
<div class="ant-steps-item-icon"><span class="ant-steps-icon"><i aria-label="icon: check" class="ant-steps-finish-icon anticon anticon-check"><svg viewBox="64 64 896 896" data-icon="check" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class=""><path d="M912 190h-69.9c-9.8 0-19.1 4.5-25.1 12.2L404.7 724.5 207 474a32 32 0 0 0-25.1-12.2H112c-6.7 0-10.4 7.7-6.3 12.9l273.9 347c12.8 16.2 37.4 16.2 50.3 0l488.4-618.9c4.1-5.1.4-12.8-6.3-12.8z"></path></svg></i></span></div>
<div class="ant-steps-item-content">
<div class="ant-steps-item-title">finish 2</div>
</div>
</div>
</div>
<div class="ant-steps-item ant-steps-item-process">
<div role="button" tabindex="0" class="ant-steps-item-container">
<div class="ant-steps-item-tail"></div>
<div class="ant-steps-item-icon"><span class="ant-steps-icon">3</span></div>
<div class="ant-steps-item-content">
<div class="ant-steps-item-title">current process</div>
</div>
</div>
</div>
<div class="ant-steps-item ant-steps-item-wait ant-steps-item-disabled">
<div class="ant-steps-item-container">
<div class="ant-steps-item-tail"></div>
<div class="ant-steps-item-icon"><span class="ant-steps-icon">4</span></div>
<div class="ant-steps-item-content">
<div class="ant-steps-item-title">wait</div>
</div>
</div>
</div>
</div>
</div>
`;
exports[`renders ./components/steps/demo/progress-dot.md correctly 1`] = `
<div class="ant-steps ant-steps-horizontal ant-steps-label-vertical ant-steps-dot">
<div class="ant-steps-item ant-steps-item-finish">
<div class="ant-steps-item-tail"></div>
<div class="ant-steps-item-icon"><span class="ant-steps-icon"><span class="ant-steps-icon-dot"></span></span></div>
<div class="ant-steps-item-content">
<div class="ant-steps-item-title">Finished</div>
<div class="ant-steps-item-description">This is a description.</div>
<div>
<div class="ant-steps ant-steps-horizontal ant-steps-label-vertical ant-steps-dot">
<div class="ant-steps-item ant-steps-item-finish">
<div class="ant-steps-item-container">
<div class="ant-steps-item-tail"></div>
<div class="ant-steps-item-icon"><span class="ant-steps-icon"><span class="ant-steps-icon-dot"></span></span></div>
<div class="ant-steps-item-content">
<div class="ant-steps-item-title">Finished</div>
<div class="ant-steps-item-description">This is a description.</div>
</div>
</div>
</div>
<div class="ant-steps-item ant-steps-item-process ant-steps-item-active">
<div class="ant-steps-item-container">
<div class="ant-steps-item-tail"></div>
<div class="ant-steps-item-icon"><span class="ant-steps-icon"><span class="ant-steps-icon-dot"></span></span></div>
<div class="ant-steps-item-content">
<div class="ant-steps-item-title">In Progress</div>
<div class="ant-steps-item-description">This is a description.</div>
</div>
</div>
</div>
<div class="ant-steps-item ant-steps-item-wait">
<div class="ant-steps-item-container">
<div class="ant-steps-item-tail"></div>
<div class="ant-steps-item-icon"><span class="ant-steps-icon"><span class="ant-steps-icon-dot"></span></span></div>
<div class="ant-steps-item-content">
<div class="ant-steps-item-title">Waiting</div>
<div class="ant-steps-item-description">This is a description.</div>
</div>
</div>
</div>
</div>
<div class="ant-steps-item ant-steps-item-process">
<div class="ant-steps-item-tail"></div>
<div class="ant-steps-item-icon"><span class="ant-steps-icon"><span class="ant-steps-icon-dot"></span></span></div>
<div class="ant-steps-item-content">
<div class="ant-steps-item-title">In Progress</div>
<div class="ant-steps-item-description">This is a description.</div>
<div role="separator" class="ant-divider ant-divider-horizontal"></div>
<div class="ant-steps ant-steps-vertical ant-steps-dot">
<div class="ant-steps-item ant-steps-item-finish">
<div class="ant-steps-item-container">
<div class="ant-steps-item-tail"></div>
<div class="ant-steps-item-icon"><span class="ant-steps-icon"><span class="ant-steps-icon-dot"></span></span></div>
<div class="ant-steps-item-content">
<div class="ant-steps-item-title">Finished</div>
<div class="ant-steps-item-description">This is a description. This is a description.</div>
</div>
</div>
</div>
</div>
<div class="ant-steps-item ant-steps-item-wait">
<div class="ant-steps-item-tail"></div>
<div class="ant-steps-item-icon"><span class="ant-steps-icon"><span class="ant-steps-icon-dot"></span></span></div>
<div class="ant-steps-item-content">
<div class="ant-steps-item-title">Waiting</div>
<div class="ant-steps-item-description">This is a description.</div>
<div class="ant-steps-item ant-steps-item-process ant-steps-item-active">
<div class="ant-steps-item-container">
<div class="ant-steps-item-tail"></div>
<div class="ant-steps-item-icon"><span class="ant-steps-icon"><span class="ant-steps-icon-dot"></span></span></div>
<div class="ant-steps-item-content">
<div class="ant-steps-item-title">Finished</div>
<div class="ant-steps-item-description">This is a description. This is a description.</div>
</div>
</div>
</div>
<div class="ant-steps-item ant-steps-item-wait">
<div class="ant-steps-item-container">
<div class="ant-steps-item-tail"></div>
<div class="ant-steps-item-icon"><span class="ant-steps-icon"><span class="ant-steps-icon-dot"></span></span></div>
<div class="ant-steps-item-content">
<div class="ant-steps-item-title">In Progress</div>
<div class="ant-steps-item-description">This is a description. This is a description.</div>
</div>
</div>
</div>
<div class="ant-steps-item ant-steps-item-wait">
<div class="ant-steps-item-container">
<div class="ant-steps-item-tail"></div>
<div class="ant-steps-item-icon"><span class="ant-steps-icon"><span class="ant-steps-icon-dot"></span></span></div>
<div class="ant-steps-item-content">
<div class="ant-steps-item-title">Waiting</div>
<div class="ant-steps-item-description">This is a description.</div>
</div>
</div>
</div>
<div class="ant-steps-item ant-steps-item-wait">
<div class="ant-steps-item-container">
<div class="ant-steps-item-tail"></div>
<div class="ant-steps-item-icon"><span class="ant-steps-icon"><span class="ant-steps-icon-dot"></span></span></div>
<div class="ant-steps-item-content">
<div class="ant-steps-item-title">Waiting</div>
<div class="ant-steps-item-description">This is a description.</div>
</div>
</div>
</div>
</div>
</div>
@ -133,29 +402,36 @@ exports[`renders ./components/steps/demo/progress-dot.md correctly 1`] = `
exports[`renders ./components/steps/demo/simple.md correctly 1`] = `
<div class="ant-steps ant-steps-horizontal ant-steps-label-horizontal">
<div class="ant-steps-item ant-steps-item-finish">
<div class="ant-steps-item-tail"></div>
<div class="ant-steps-item-icon"><span class="ant-steps-icon"><i aria-label="icon: check" class="ant-steps-finish-icon anticon anticon-check"><svg viewBox="64 64 896 896" data-icon="check" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class=""><path d="M912 190h-69.9c-9.8 0-19.1 4.5-25.1 12.2L404.7 724.5 207 474a32 32 0 0 0-25.1-12.2H112c-6.7 0-10.4 7.7-6.3 12.9l273.9 347c12.8 16.2 37.4 16.2 50.3 0l488.4-618.9c4.1-5.1.4-12.8-6.3-12.8z"></path></svg></i></span></div>
<div class="ant-steps-item-content">
<div class="ant-steps-item-title">
Finished
<div class="ant-steps-item-container">
<div class="ant-steps-item-tail"></div>
<div class="ant-steps-item-icon"><span class="ant-steps-icon"><i aria-label="icon: check" class="ant-steps-finish-icon anticon anticon-check"><svg viewBox="64 64 896 896" data-icon="check" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class=""><path d="M912 190h-69.9c-9.8 0-19.1 4.5-25.1 12.2L404.7 724.5 207 474a32 32 0 0 0-25.1-12.2H112c-6.7 0-10.4 7.7-6.3 12.9l273.9 347c12.8 16.2 37.4 16.2 50.3 0l488.4-618.9c4.1-5.1.4-12.8-6.3-12.8z"></path></svg></i></span></div>
<div class="ant-steps-item-content">
<div class="ant-steps-item-title">
Finished
</div>
<div class="ant-steps-item-description"><span>This is a description.</span></div>
</div>
<div class="ant-steps-item-description"><span>This is a description.</span></div>
</div>
</div>
<div class="ant-steps-item ant-steps-item-process">
<div class="ant-steps-item-tail"></div>
<div class="ant-steps-item-icon"><span class="ant-steps-icon">2</span></div>
<div class="ant-steps-item-content">
<div class="ant-steps-item-title">In Progress</div>
<div class="ant-steps-item-description">This is a description.</div>
<div class="ant-steps-item ant-steps-item-process ant-steps-item-active">
<div class="ant-steps-item-container">
<div class="ant-steps-item-tail"></div>
<div class="ant-steps-item-icon"><span class="ant-steps-icon">2</span></div>
<div class="ant-steps-item-content">
<div class="ant-steps-item-title">In Progress<div title="Left 00:00:08" class="ant-steps-item-subtitle">Left 00:00:08</div>
</div>
<div class="ant-steps-item-description">This is a description.</div>
</div>
</div>
</div>
<div class="ant-steps-item ant-steps-item-wait">
<div class="ant-steps-item-tail"></div>
<div class="ant-steps-item-icon"><span class="ant-steps-icon">3</span></div>
<div class="ant-steps-item-content">
<div class="ant-steps-item-title">Waiting</div>
<div class="ant-steps-item-description">This is a description.</div>
<div class="ant-steps-item-container">
<div class="ant-steps-item-tail"></div>
<div class="ant-steps-item-icon"><span class="ant-steps-icon">3</span></div>
<div class="ant-steps-item-content">
<div class="ant-steps-item-title">Waiting</div>
<div class="ant-steps-item-description">This is a description.</div>
</div>
</div>
</div>
</div>
@ -164,24 +440,30 @@ exports[`renders ./components/steps/demo/simple.md correctly 1`] = `
exports[`renders ./components/steps/demo/small-size.md correctly 1`] = `
<div class="ant-steps ant-steps-horizontal ant-steps-small ant-steps-label-horizontal">
<div class="ant-steps-item ant-steps-item-finish">
<div class="ant-steps-item-tail"></div>
<div class="ant-steps-item-icon"><span class="ant-steps-icon"><i aria-label="icon: check" class="ant-steps-finish-icon anticon anticon-check"><svg viewBox="64 64 896 896" data-icon="check" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class=""><path d="M912 190h-69.9c-9.8 0-19.1 4.5-25.1 12.2L404.7 724.5 207 474a32 32 0 0 0-25.1-12.2H112c-6.7 0-10.4 7.7-6.3 12.9l273.9 347c12.8 16.2 37.4 16.2 50.3 0l488.4-618.9c4.1-5.1.4-12.8-6.3-12.8z"></path></svg></i></span></div>
<div class="ant-steps-item-content">
<div class="ant-steps-item-title">Finished</div>
<div class="ant-steps-item-container">
<div class="ant-steps-item-tail"></div>
<div class="ant-steps-item-icon"><span class="ant-steps-icon"><i aria-label="icon: check" class="ant-steps-finish-icon anticon anticon-check"><svg viewBox="64 64 896 896" data-icon="check" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class=""><path d="M912 190h-69.9c-9.8 0-19.1 4.5-25.1 12.2L404.7 724.5 207 474a32 32 0 0 0-25.1-12.2H112c-6.7 0-10.4 7.7-6.3 12.9l273.9 347c12.8 16.2 37.4 16.2 50.3 0l488.4-618.9c4.1-5.1.4-12.8-6.3-12.8z"></path></svg></i></span></div>
<div class="ant-steps-item-content">
<div class="ant-steps-item-title">Finished</div>
</div>
</div>
</div>
<div class="ant-steps-item ant-steps-item-process">
<div class="ant-steps-item-tail"></div>
<div class="ant-steps-item-icon"><span class="ant-steps-icon">2</span></div>
<div class="ant-steps-item-content">
<div class="ant-steps-item-title">In Progress</div>
<div class="ant-steps-item ant-steps-item-process ant-steps-item-active">
<div class="ant-steps-item-container">
<div class="ant-steps-item-tail"></div>
<div class="ant-steps-item-icon"><span class="ant-steps-icon">2</span></div>
<div class="ant-steps-item-content">
<div class="ant-steps-item-title">In Progress</div>
</div>
</div>
</div>
<div class="ant-steps-item ant-steps-item-wait">
<div class="ant-steps-item-tail"></div>
<div class="ant-steps-item-icon"><span class="ant-steps-icon">3</span></div>
<div class="ant-steps-item-content">
<div class="ant-steps-item-title">Waiting</div>
<div class="ant-steps-item-container">
<div class="ant-steps-item-tail"></div>
<div class="ant-steps-item-icon"><span class="ant-steps-icon">3</span></div>
<div class="ant-steps-item-content">
<div class="ant-steps-item-title">Waiting</div>
</div>
</div>
</div>
</div>
@ -190,25 +472,31 @@ exports[`renders ./components/steps/demo/small-size.md correctly 1`] = `
exports[`renders ./components/steps/demo/step-next.md correctly 1`] = `
<div>
<div class="ant-steps ant-steps-horizontal ant-steps-label-horizontal">
<div class="ant-steps-item ant-steps-item-process">
<div class="ant-steps-item-tail"></div>
<div class="ant-steps-item-icon"><span class="ant-steps-icon">1</span></div>
<div class="ant-steps-item-content">
<div class="ant-steps-item-title">First</div>
<div class="ant-steps-item ant-steps-item-process ant-steps-item-active">
<div class="ant-steps-item-container">
<div class="ant-steps-item-tail"></div>
<div class="ant-steps-item-icon"><span class="ant-steps-icon">1</span></div>
<div class="ant-steps-item-content">
<div class="ant-steps-item-title">First</div>
</div>
</div>
</div>
<div class="ant-steps-item ant-steps-item-wait">
<div class="ant-steps-item-tail"></div>
<div class="ant-steps-item-icon"><span class="ant-steps-icon">2</span></div>
<div class="ant-steps-item-content">
<div class="ant-steps-item-title">Second</div>
<div class="ant-steps-item-container">
<div class="ant-steps-item-tail"></div>
<div class="ant-steps-item-icon"><span class="ant-steps-icon">2</span></div>
<div class="ant-steps-item-content">
<div class="ant-steps-item-title">Second</div>
</div>
</div>
</div>
<div class="ant-steps-item ant-steps-item-wait">
<div class="ant-steps-item-tail"></div>
<div class="ant-steps-item-icon"><span class="ant-steps-icon">3</span></div>
<div class="ant-steps-item-content">
<div class="ant-steps-item-title">Last</div>
<div class="ant-steps-item-container">
<div class="ant-steps-item-tail"></div>
<div class="ant-steps-item-icon"><span class="ant-steps-icon">3</span></div>
<div class="ant-steps-item-content">
<div class="ant-steps-item-title">Last</div>
</div>
</div>
</div>
</div>
@ -223,27 +511,33 @@ exports[`renders ./components/steps/demo/step-next.md correctly 1`] = `
exports[`renders ./components/steps/demo/vertical.md correctly 1`] = `
<div class="ant-steps ant-steps-vertical">
<div class="ant-steps-item ant-steps-item-finish">
<div class="ant-steps-item-tail"></div>
<div class="ant-steps-item-icon"><span class="ant-steps-icon"><i aria-label="icon: check" class="ant-steps-finish-icon anticon anticon-check"><svg viewBox="64 64 896 896" data-icon="check" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class=""><path d="M912 190h-69.9c-9.8 0-19.1 4.5-25.1 12.2L404.7 724.5 207 474a32 32 0 0 0-25.1-12.2H112c-6.7 0-10.4 7.7-6.3 12.9l273.9 347c12.8 16.2 37.4 16.2 50.3 0l488.4-618.9c4.1-5.1.4-12.8-6.3-12.8z"></path></svg></i></span></div>
<div class="ant-steps-item-content">
<div class="ant-steps-item-title">Finished</div>
<div class="ant-steps-item-description">This is a description.</div>
<div class="ant-steps-item-container">
<div class="ant-steps-item-tail"></div>
<div class="ant-steps-item-icon"><span class="ant-steps-icon"><i aria-label="icon: check" class="ant-steps-finish-icon anticon anticon-check"><svg viewBox="64 64 896 896" data-icon="check" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class=""><path d="M912 190h-69.9c-9.8 0-19.1 4.5-25.1 12.2L404.7 724.5 207 474a32 32 0 0 0-25.1-12.2H112c-6.7 0-10.4 7.7-6.3 12.9l273.9 347c12.8 16.2 37.4 16.2 50.3 0l488.4-618.9c4.1-5.1.4-12.8-6.3-12.8z"></path></svg></i></span></div>
<div class="ant-steps-item-content">
<div class="ant-steps-item-title">Finished</div>
<div class="ant-steps-item-description">This is a description.</div>
</div>
</div>
</div>
<div class="ant-steps-item ant-steps-item-process">
<div class="ant-steps-item-tail"></div>
<div class="ant-steps-item-icon"><span class="ant-steps-icon">2</span></div>
<div class="ant-steps-item-content">
<div class="ant-steps-item-title">In Progress</div>
<div class="ant-steps-item-description">This is a description.</div>
<div class="ant-steps-item ant-steps-item-process ant-steps-item-active">
<div class="ant-steps-item-container">
<div class="ant-steps-item-tail"></div>
<div class="ant-steps-item-icon"><span class="ant-steps-icon">2</span></div>
<div class="ant-steps-item-content">
<div class="ant-steps-item-title">In Progress</div>
<div class="ant-steps-item-description">This is a description.</div>
</div>
</div>
</div>
<div class="ant-steps-item ant-steps-item-wait">
<div class="ant-steps-item-tail"></div>
<div class="ant-steps-item-icon"><span class="ant-steps-icon">3</span></div>
<div class="ant-steps-item-content">
<div class="ant-steps-item-title">Waiting</div>
<div class="ant-steps-item-description">This is a description.</div>
<div class="ant-steps-item-container">
<div class="ant-steps-item-tail"></div>
<div class="ant-steps-item-icon"><span class="ant-steps-icon">3</span></div>
<div class="ant-steps-item-content">
<div class="ant-steps-item-title">Waiting</div>
<div class="ant-steps-item-description">This is a description.</div>
</div>
</div>
</div>
</div>
@ -252,27 +546,33 @@ exports[`renders ./components/steps/demo/vertical.md correctly 1`] = `
exports[`renders ./components/steps/demo/vertical-small.md correctly 1`] = `
<div class="ant-steps ant-steps-vertical ant-steps-small">
<div class="ant-steps-item ant-steps-item-finish">
<div class="ant-steps-item-tail"></div>
<div class="ant-steps-item-icon"><span class="ant-steps-icon"><i aria-label="icon: check" class="ant-steps-finish-icon anticon anticon-check"><svg viewBox="64 64 896 896" data-icon="check" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class=""><path d="M912 190h-69.9c-9.8 0-19.1 4.5-25.1 12.2L404.7 724.5 207 474a32 32 0 0 0-25.1-12.2H112c-6.7 0-10.4 7.7-6.3 12.9l273.9 347c12.8 16.2 37.4 16.2 50.3 0l488.4-618.9c4.1-5.1.4-12.8-6.3-12.8z"></path></svg></i></span></div>
<div class="ant-steps-item-content">
<div class="ant-steps-item-title">Finished</div>
<div class="ant-steps-item-description">This is a description.</div>
<div class="ant-steps-item-container">
<div class="ant-steps-item-tail"></div>
<div class="ant-steps-item-icon"><span class="ant-steps-icon"><i aria-label="icon: check" class="ant-steps-finish-icon anticon anticon-check"><svg viewBox="64 64 896 896" data-icon="check" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class=""><path d="M912 190h-69.9c-9.8 0-19.1 4.5-25.1 12.2L404.7 724.5 207 474a32 32 0 0 0-25.1-12.2H112c-6.7 0-10.4 7.7-6.3 12.9l273.9 347c12.8 16.2 37.4 16.2 50.3 0l488.4-618.9c4.1-5.1.4-12.8-6.3-12.8z"></path></svg></i></span></div>
<div class="ant-steps-item-content">
<div class="ant-steps-item-title">Finished</div>
<div class="ant-steps-item-description">This is a description.</div>
</div>
</div>
</div>
<div class="ant-steps-item ant-steps-item-process">
<div class="ant-steps-item-tail"></div>
<div class="ant-steps-item-icon"><span class="ant-steps-icon">2</span></div>
<div class="ant-steps-item-content">
<div class="ant-steps-item-title">In Progress</div>
<div class="ant-steps-item-description">This is a description.</div>
<div class="ant-steps-item ant-steps-item-process ant-steps-item-active">
<div class="ant-steps-item-container">
<div class="ant-steps-item-tail"></div>
<div class="ant-steps-item-icon"><span class="ant-steps-icon">2</span></div>
<div class="ant-steps-item-content">
<div class="ant-steps-item-title">In Progress</div>
<div class="ant-steps-item-description">This is a description.</div>
</div>
</div>
</div>
<div class="ant-steps-item ant-steps-item-wait">
<div class="ant-steps-item-tail"></div>
<div class="ant-steps-item-icon"><span class="ant-steps-icon">3</span></div>
<div class="ant-steps-item-content">
<div class="ant-steps-item-title">Waiting</div>
<div class="ant-steps-item-description">This is a description.</div>
<div class="ant-steps-item-container">
<div class="ant-steps-item-tail"></div>
<div class="ant-steps-item-icon"><span class="ant-steps-icon">3</span></div>
<div class="ant-steps-item-content">
<div class="ant-steps-item-title">Waiting</div>
<div class="ant-steps-item-description">This is a description.</div>
</div>
</div>
</div>
</div>

6
components/steps/__tests__/index.test.js Normal file
View File

@ -0,0 +1,6 @@
import Steps from '..';
import mountTest from '../../../tests/shared/mountTest';
describe('Steps', () => {
mountTest(Steps);
});

42
components/steps/demo/clickable.md Normal file
View File

@ -0,0 +1,42 @@
<cn>
#### 可点击
设置 `@change` 后，Steps 变为可点击状态。
</cn>
<us>
#### Clickable
Setting `@change` makes Steps clickable.
</us>
```tpl
<template>
<div>
<a-steps :current="current" @change="onChange">
<a-step title="Step 1" description="This is a description." />
<a-step title="Step 2" description="This is a description." />
<a-step title="Step 3" description="This is a description." />
</a-steps>
<a-divider />
<a-steps v-model="current" direction="vertical">
<a-step title="Step 1" description="This is a description." />
<a-step title="Step 2" description="This is a description." />
<a-step title="Step 3" description="This is a description." />
</a-steps>
</div>
</template>
<script>
export default {
data() {
return {
current: 0
}
},
methods: {
onChange(current) {
console.log('onChange:', current);
this.current = current;
}
},
}
</script>
```

4
components/steps/demo/index.vue
View File

@ -8,6 +8,8 @@ import SmallSize from './small-size';
import StepNext from './step-next';
import VerticalSmall from './vertical-small';
import Vertical from './vertical';
import Clickable from './clickable';
import Nav from './nav';
import CN from '../index.zh-CN.md';
import US from '../index.en-US.md';
@ -58,6 +60,8 @@ export default {
<br />
<CustomizedProgressDot />
<br />
<Clickable />
<Nav />
<api>
<template slot="cn">
<CN />

71
components/steps/demo/nav.md Normal file
View File

@ -0,0 +1,71 @@
<cn>
#### 导航步骤
导航类型的步骤条。
</cn>
<us>
#### Navigation Steps
Navigation steps.
</us>
```tpl
<template>
<div>
<a-steps
type="navigation"
size="small"
v-model="current"
:style="stepStyle"
>
<a-step
title="Step 1"
subTitle="00:00:05"
status="finish"
description="This is a description."
/>
<a-step
title="Step 2"
subTitle="00:01:02"
status="process"
description="This is a description."
/>
<a-step
title="Step 3"
subTitle="waiting for longlong time"
status="wait"
description="This is a description."
/>
</a-steps>
<a-steps type="navigation" v-model="current" :style="stepStyle">
<a-step status="finish" title="Step 1" />
<a-step status="process" title="Step 2" />
<a-step status="wait" title="Step 3" />
<a-step status="wait" title="Step 4" />
</a-steps>
<a-steps
type="navigation"
size="small"
v-model="current"
:style="stepStyle"
>
<a-step status="finish" title="finish 1" />
<a-step status="finish" title="finish 2" />
<a-step status="process" title="current process" />
<a-step status="wait" title="wait" disabled />
</a-steps>
</div>
</template>
<script>
export default {
data() {
return {
current: 0,
stepStyle: {
marginBottom: '60px',
boxShadow: '0px -1px 0 0 #e8e8e8 inset',
}
}
}
}
</script>
```

10
components/steps/demo/progress-dot.md
View File

@ -10,10 +10,20 @@ Steps with progress dot style.
```tpl
<template>
<div>
<a-steps progressDot :current="1">
<a-step title="Finished" description="This is a description." />
<a-step title="In Progress" description="This is a description." />
<a-step title="Waiting" description="This is a description." />
</a-steps>
<a-divider />
<a-steps progressDot :current="1" direction="vertical">
<a-step title="Finished" description="This is a description. This is a description." />
<a-step title="Finished" description="This is a description. This is a description." />
<a-step title="In Progress" description="This is a description. This is a description." />
<a-step title="Waiting" description="This is a description." />
<a-step title="Waiting" description="This is a description." />
</a-steps>
</div>
</template>
```

2
components/steps/demo/simple.md
View File

@ -18,7 +18,7 @@ The most basic step bar.
</template>
<span slot="description">This is a description.</span>
</a-step>
<a-step title="In Progress" description="This is a description." />
<a-step title="In Progress" subTitle="Left 00:00:08" description="This is a description." />
<a-step title="Waiting" description="This is a description." />
</a-steps>
</template>

39
components/steps/index.en-US.md
View File

@ -2,23 +2,32 @@
The whole of the step bar.
| Property | Description | Type | Default |
| --- | --- | --- | --- |
| current | to set the current step, counting from 0. You can overwrite this state by using `status` of `Step` | number | 0 |
| direction | to specify the direction of the step bar, `horizontal` and `vertical` are currently supported | string | `horizontal` |
| labelPlacement | support vertial title and description | string | `horizontal` |
| progressDot | Steps with progress dot style, customize the progress dot by setting a scoped slot. labelPlacement will be `vertical` | Boolean or slot="progressDot" slot-scope="{index, status, title, description, prefixCls})" | false |
| size | to specify the size of the step bar, `default` and `small` are currently supported | string | `default` |
| status | to specify the status of current step, can be set to one of the following values: `wait` `process` `finish` `error` | string | `process` |
| initial | set the initial step, counting from 0 | number | 0 |
| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| current(v-model) | to set the current step, counting from 0. You can overwrite this state by using `status` of `Step`, support v-model after 1.5.0 | number | 0 | |
| type | Type of steps, can be set to one of the following values: `default`, `navigation` | string | `default` | 1.5.0 |
| direction | to specify the direction of the step bar, `horizontal` and `vertical` are currently supported | string | `horizontal` | |
| labelPlacement | support vertial title and description | string | `horizontal` | |
| progressDot | Steps with progress dot style, customize the progress dot by setting a scoped slot. labelPlacement will be `vertical` | Boolean or slot="progressDot" slot-scope="{index, status, title, description, prefixCls})" | false | |
| size | to specify the size of the step bar, `default` and `small` are currently supported | string | `default` | |
| status | to specify the status of current step, can be set to one of the following values: `wait` `process` `finish` `error` | string | `process` | |
| initial | set the initial step, counting from 0 | number | 0 | |
#### Steps Events
| Events Name | Description | Arguments | Version |
| ----------- | ---------------------------- | ----------------- | ------- |
| change | Trigger when Step is changed | (current) => void | - | 1.5.0 |
### Steps.Step
A single step in the step bar.
| Property | Description | Type | Default |
| --- | --- | --- | --- |
| description | description of the step, optional property | string\|slot | - |
| icon | icon of the step, optional property | string\|slot | - |
| status | to specify the status. It will be automatically set by `current` of `Steps` if not configured. Optional values are: `wait` `process` `finish` `error` | string | `wait` |
| title | title of the step | string\|slot | - |
| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| description | description of the step, optional property | string\|slot | - | |
| icon | icon of the step, optional property | string\|slot | - | |
| status | to specify the status. It will be automatically set by `current` of `Steps` if not configured. Optional values are: `wait` `process` `finish` `error` | string | `wait` | |
| title | title of the step | string\|slot | - | |
| subTitle | Subtitle of the step | string\|slot | - | 1.5.0 |
| disabled | Disable click | boolean | false | 1.5.0 |

5
components/steps/index.jsx
View File

@ -16,6 +16,7 @@ const getStepsProps = (defaultProps = {}) => {
size: PropTypes.oneOf(['default', 'small']),
direction: PropTypes.oneOf(['horizontal', 'vertical']),
progressDot: PropTypes.oneOfType([PropTypes.bool, PropTypes.func]),
type: PropTypes.oneOf(['default', 'navigation']),
};
return initDefaultProps(props, defaultProps);
};
@ -28,6 +29,10 @@ const Steps = {
inject: {
configProvider: { default: () => ConfigConsumerProps },
},
model: {
prop: 'current',
event: 'change',
},
Step: { ...VcSteps.Step, name: 'AStep' },
render() {
const props = getOptionProps(this);

39
components/steps/index.zh-CN.md
View File

@ -2,23 +2,32 @@
整体步骤条。
| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| current | 指定当前步骤，从 0 开始记数。在子 Step 元素中，可以通过 `status` 属性覆盖状态 | number | 0 |
| direction | 指定步骤条方向。目前支持水平（`horizontal`）和竖直（`vertical`）两种方向 | string | horizontal |
| labelPlacement | 指定标签放置位置，默认水平放图标右侧，可选`vertical`放图标下方 | string | `horizontal` |
| progressDot | 点状步骤条，可以设置为一个 作用域插槽,labelPlacement 将强制为`vertical` | Boolean or slot="progressDot" slot-scope="{index, status, title, description, prefixCls})" | false |
| size | 指定大小，目前支持普通（`default`）和迷你（`small`） | string | default |
| status | 指定当前步骤的状态，可选 `wait` `process` `finish` `error` | string | process |
| initial | 起始序号，从 0 开始记数 | number | 0 |
| 参数 | 说明 | 类型 | 默认值 | 版本 |
| --- | --- | --- | --- | --- |
| type | 步骤条类型，有 `default` 和 `navigation` 两种 | string | `default` | 1.5.0 |
| current (v-model) | 指定当前步骤，从 0 开始记数。在子 Step 元素中，可以通过 `status` 属性覆盖状态, 1.5.0 后支持 v-model | number | 0 | |
| direction | 指定步骤条方向。目前支持水平（`horizontal`）和竖直（`vertical`）两种方向 | string | horizontal | |
| labelPlacement | 指定标签放置位置，默认水平放图标右侧，可选`vertical`放图标下方 | string | `horizontal` | |
| progressDot | 点状步骤条，可以设置为一个 作用域插槽,labelPlacement 将强制为`vertical` | Boolean or slot="progressDot" slot-scope="{index, status, title, description, prefixCls})" | false | |
| size | 指定大小，目前支持普通（`default`）和迷你（`small`） | string | default | |
| status | 指定当前步骤的状态，可选 `wait` `process` `finish` `error` | string | process | |
| initial | 起始序号，从 0 开始记数 | number | 0 | |
#### Steps 事件
| 事件名称 | 说明 | 回调参数 | 版本 |
| -------- | ------------------ | ----------------- | ---- |
| change | 点击切换步骤时触发 | (current) => void | - | 1.5.0 |
### Steps.Step
步骤条内的每一个步骤。
| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| description | 步骤的详情描述，可选 | string\|slot | - |
| icon | 步骤图标的类型，可选 | string\|slot | - |
| status | 指定状态。当不配置该属性时，会使用 Steps 的 `current` 来自动指定状态。可选：`wait` `process` `finish` `error` | string | wait |
| title | 标题 | string\|slot | - |
| 参数 | 说明 | 类型 | 默认值 | 版本 |
| --- | --- | --- | --- | --- |
| description | 步骤的详情描述，可选 | string \| slot | - | |
| icon | 步骤图标的类型，可选 | string \| slot | - | |
| status | 指定状态。当不配置该属性时，会使用 Steps 的 `current` 来自动指定状态。可选：`wait` `process` `finish` `error` | string | wait | |
| title | 标题 | string \| slot | - | |
| subTitle | 子标题 | string \| slot | - | 1.5.0 |
| disabled | 禁用点击 | boolean | false | 1.5.0 |

46
components/vc-steps/Step.jsx
View File

@ -4,20 +4,24 @@ import { getOptionProps, getComponentFromProp, getListeners } from '../_util/pro
function isString(str) {
return typeof str === 'string';
}
function noop() {}
export default {
name: 'Step',
props: {
prefixCls: PropTypes.string,
wrapperStyle: PropTypes.object,
itemWidth: PropTypes.string,
active: PropTypes.bool,
disabled: PropTypes.bool,
status: PropTypes.string,
iconPrefix: PropTypes.string,
icon: PropTypes.any,
adjustMarginRight: PropTypes.string,
stepNumber: PropTypes.string,
stepIndex: PropTypes.number,
description: PropTypes.any,
title: PropTypes.any,
subTitle: PropTypes.any,
progressDot: PropTypes.oneOfType([PropTypes.bool, PropTypes.func]),
tailContent: PropTypes.any,
icons: PropTypes.shape({
@ -26,6 +30,10 @@ export default {
}).loose,
},
methods: {
onClick(...args) {
this.$emit('click', ...args);
this.$emit('stepClick', this.stepIndex);
},
renderIconNode() {
const { prefixCls, stepNumber, status, iconPrefix, icons } = getOptionProps(this);
let progressDot = this.progressDot;
@ -73,18 +81,23 @@ export default {
const {
prefixCls,
itemWidth,
active,
status = 'wait',
tailContent,
adjustMarginRight,
disabled,
} = getOptionProps(this);
const title = getComponentFromProp(this, 'title');
const subTitle = getComponentFromProp(this, 'subTitle');
const description = getComponentFromProp(this, 'description');
const classString = {
[`${prefixCls}-item`]: true,
[`${prefixCls}-item-${status}`]: true,
[`${prefixCls}-item-custom`]: getComponentFromProp(this, 'icon'),
[`${prefixCls}-item-active`]: active,
[`${prefixCls}-item-disabled`]: disabled === true,
};
const stepProps = {
class: classString,
@ -97,13 +110,34 @@ export default {
if (adjustMarginRight) {
stepItemStyle.marginRight = adjustMarginRight;
}
const listeners = getListeners(this);
const accessibilityProps = {
attrs: {},
on: {
click: listeners.click || noop,
},
};
if (listeners.stepClick && !disabled) {
accessibilityProps.attrs.role = 'button';
accessibilityProps.attrs.tabIndex = 0;
accessibilityProps.on.click = this.onClick;
}
return (
<div {...stepProps} style={stepItemStyle}>
<div class={`${prefixCls}-item-tail`}>{tailContent}</div>
<div class={`${prefixCls}-item-icon`}>{this.renderIconNode()}</div>
<div class={`${prefixCls}-item-content`}>
<div class={`${prefixCls}-item-title`}>{title}</div>
{description && <div class={`${prefixCls}-item-description`}>{description}</div>}
<div {...accessibilityProps} class={`${prefixCls}-item-container`}>
<div class={`${prefixCls}-item-tail`}>{tailContent}</div>
<div class={`${prefixCls}-item-icon`}>{this.renderIconNode()}</div>
<div class={`${prefixCls}-item-content`}>
<div class={`${prefixCls}-item-title`}>
{title}
{subTitle && (
<div title={subTitle} class={`${prefixCls}-item-subtitle`}>
{subTitle}
</div>
)}
</div>
{description && <div class={`${prefixCls}-item-description`}>{description}</div>}
</div>
</div>
</div>
);

42
components/vc-steps/Steps.jsx
View File

@ -9,6 +9,7 @@ export default {
name: 'Steps',
mixins: [BaseMixin],
props: {
type: PropTypes.string.def('default'),
prefixCls: PropTypes.string.def('rc-steps'),
iconPrefix: PropTypes.string.def('rc'),
direction: PropTypes.string.def('horizontal'),
@ -54,10 +55,17 @@ export default {
}
},
methods: {
onStepClick(next) {
const { current } = this.$props;
if (current !== next) {
this.$emit('change', next);
}
},
calcStepOffsetWidth() {
if (isFlexSupported()) {
return;
}
const { lastStepOffsetWidth } = this.$data;
// Just for IE9
const domNode = this.$refs.vcStepsRef;
if (domNode.children.length > 0) {
@ -66,15 +74,15 @@ export default {
}
this.calcTimeout = setTimeout(() => {
// +1 for fit edge bug of digit width, like 35.4px
const lastStepOffsetWidth = (domNode.lastChild.offsetWidth || 0) + 1;
const offsetWidth = (domNode.lastChild.offsetWidth || 0) + 1;
// Reduce shake bug
if (
this.lastStepOffsetWidth === lastStepOffsetWidth ||
Math.abs(this.lastStepOffsetWidth - lastStepOffsetWidth) <= 3
lastStepOffsetWidth === offsetWidth ||
Math.abs(lastStepOffsetWidth - offsetWidth) <= 3
) {
return;
}
this.setState({ lastStepOffsetWidth });
this.setState({ lastStepOffsetWidth: offsetWidth });
});
}
},
@ -83,6 +91,7 @@ export default {
const {
prefixCls,
direction,
type,
labelPlacement,
iconPrefix,
status,
@ -92,6 +101,7 @@ export default {
initial,
icons,
} = this;
const isNav = type === 'navigation';
let progressDot = this.progressDot;
if (progressDot === undefined) {
progressDot = $scopedSlots.progressDot;
@ -106,12 +116,14 @@ export default {
[`${prefixCls}-${size}`]: size,
[`${prefixCls}-label-${adjustedlabelPlacement}`]: direction === 'horizontal',
[`${prefixCls}-dot`]: !!progressDot,
[`${prefixCls}-navigation`]: isNav,
[`${prefixCls}-flex-not-supported`]: !flexSupported,
};
const listeners = getListeners(this);
const stepsProps = {
class: classString,
ref: 'vcStepsRef',
on: getListeners(this),
on: listeners,
};
return (
<div {...stepsProps}>
@ -121,6 +133,7 @@ export default {
const stepProps = {
props: {
stepNumber: `${stepNumber + 1}`,
stepIndex: stepNumber,
prefixCls,
iconPrefix,
progressDot: this.progressDot,
@ -130,11 +143,19 @@ export default {
on: getEvents(child),
scopedSlots: $scopedSlots,
};
if (!flexSupported && direction !== 'vertical' && index !== lastIndex) {
stepProps.props.itemWidth = `${100 / lastIndex}%`;
stepProps.props.adjustMarginRight = `${-Math.round(
lastStepOffsetWidth / lastIndex + 1,
)}px`;
if (listeners.change) {
stepProps.on.stepClick = this.onStepClick;
}
if (!flexSupported && direction !== 'vertical') {
if (isNav) {
stepProps.props.itemWidth = `${100 / (lastIndex + 1)}%`;
stepProps.props.adjustMarginRight = 0;
} else if (index !== lastIndex) {
stepProps.props.itemWidth = `${100 / lastIndex}%`;
stepProps.props.adjustMarginRight = `${-Math.round(
lastStepOffsetWidth / lastIndex + 1,
)}px`;
}
}
// fix tail color
if (status === 'error' && index === current - 1) {
@ -149,6 +170,7 @@ export default {
stepProps.props.status = 'wait';
}
}
stepProps.props.active = stepNumber === current;
return cloneElement(child, stepProps);
})}
</div>

2
components/vc-steps/index.js
View File

@ -1,4 +1,4 @@
// base rc-steps 3.3.1
// base rc-steps 3.5.0
import Steps from './Steps';
import Step from './Step';

2
types/steps/step.d.ts vendored
View File

@ -29,4 +29,6 @@ export declare class Step extends AntdComponent {
* @type any (string | slot)
*/
title: any;
disabled: boolean;
subTitle: any;
}

2
types/steps/steps.d.ts vendored
View File

@ -7,7 +7,7 @@ import { Step } from './step';
export declare class Steps extends AntdComponent {
static Step: typeof Step;
type: 'default' | 'navigation';
/**
* to set the current step, counting from 0. You can overwrite this state by using status of Step
* @default 0