feat: Steps component

This commit is contained in:
chenjiahan
2020-07-06 16:59:44 +08:00
parent e8d190d51d
commit 4500e71f1a
12 changed files with 781 additions and 8 deletions
@@ -0,0 +1,96 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`renders demo correctly 1`] = `
<div>
<div>
<div class="van-steps van-steps--horizontal">
<div class="van-steps__items">
<div class="van-hairline van-step van-step--horizontal van-step--finish">
<div class="van-step__title">买家下单</div>
<div class="van-step__circle-container"><i class="van-step__circle"></i></div>
<div class="van-step__line"></div>
</div>
<div class="van-hairline van-step van-step--horizontal van-step--process">
<div class="van-step__title van-step__title--active">商家接单</div>
<div class="van-step__circle-container"><i class="van-icon van-icon-checked van-step__icon van-step__icon--active">
<!----></i></div>
<div class="van-step__line"></div>
</div>
<div class="van-hairline van-step van-step--horizontal">
<div class="van-step__title">买家提货</div>
<div class="van-step__circle-container"><i class="van-step__circle"></i></div>
<div class="van-step__line"></div>
</div>
<div class="van-hairline van-step van-step--horizontal">
<div class="van-step__title">交易完成</div>
<div class="van-step__circle-container"><i class="van-step__circle"></i></div>
<div class="van-step__line"></div>
</div>
</div>
</div> <button class="van-button van-button--default van-button--normal">
<div class="van-button__content"><span class="van-button__text">下一步</span></div>
</button>
</div>
<div>
<div class="van-steps van-steps--horizontal">
<div class="van-steps__items">
<div class="van-hairline van-step van-step--horizontal van-step--finish">
<div class="van-step__title">买家下单</div>
<div class="van-step__circle-container"><i class="van-icon van-icon-arrow van-step__icon">
<!----></i></div>
<div class="van-step__line" style="background: rgb(51, 136, 255);"></div>
</div>
<div class="van-hairline van-step van-step--horizontal van-step--process">
<div class="van-step__title van-step__title--active" style="color: rgb(51, 136, 255);">商家接单</div>
<div class="van-step__circle-container"><i class="van-icon van-icon-success van-step__icon van-step__icon--active" style="color: rgb(51, 136, 255);">
<!----></i></div>
<div class="van-step__line"></div>
</div>
<div class="van-hairline van-step van-step--horizontal">
<div class="van-step__title">买家提货</div>
<div class="van-step__circle-container"><i class="van-icon van-icon-arrow van-step__icon">
<!----></i></div>
<div class="van-step__line"></div>
</div>
<div class="van-hairline van-step van-step--horizontal">
<div class="van-step__title">交易完成</div>
<div class="van-step__circle-container"><i class="van-icon van-icon-arrow van-step__icon">
<!----></i></div>
<div class="van-step__line"></div>
</div>
</div>
</div>
</div>
<div>
<div class="van-steps van-steps--vertical">
<div class="van-steps__items">
<div class="van-hairline van-step van-step--vertical van-step--process">
<div class="van-step__title van-step__title--active">
<h3>【城市】物流状态1</h3>
<p>2016-07-12 12:40</p>
</div>
<div class="van-step__circle-container"><i class="van-icon van-icon-checked van-step__icon van-step__icon--active">
<!----></i></div>
<div class="van-step__line"></div>
</div>
<div class="van-hairline van-step van-step--vertical">
<div class="van-step__title">
<h3>【城市】物流状态</h3>
<p>2016-07-11 10:00</p>
</div>
<div class="van-step__circle-container"><i class="van-step__circle"></i></div>
<div class="van-step__line"></div>
</div>
<div class="van-hairline van-step van-step--vertical">
<div class="van-step__title">
<h3>快件已发货</h3>
<p>2016-07-10 09:30</p>
</div>
<div class="van-step__circle-container"><i class="van-step__circle"></i></div>
<div class="van-step__line"></div>
</div>
</div>
</div>
</div>
</div>
`;
@@ -0,0 +1,29 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`icon slot 1`] = `
<div class="van-steps van-steps--horizontal">
<div class="van-steps__items">
<div class="van-hairline van-step van-step--horizontal van-step--finish">
<div class="van-step__title">
A
</div>
<div class="van-step__circle-container">Custim Inactive Icon</div>
<div class="van-step__line"></div>
</div>
<div class="van-hairline van-step van-step--horizontal van-step--process">
<div class="van-step__title van-step__title--active">
B
</div>
<div class="van-step__circle-container">Custim Active Icon</div>
<div class="van-step__line"></div>
</div>
<div class="van-hairline van-step van-step--horizontal">
<div class="van-step__title">
C
</div>
<div class="van-step__circle-container">Custim Inactive Icon</div>
<div class="van-step__line"></div>
</div>
</div>
</div>
`;