blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-06 03:57:59 +08:00
Code Issues Projects Releases Wiki Activity

step component

Browse Source
This commit is contained in:
cookfront 2017-03-02 13:59:27 +08:00
parent 12c80402a8
commit c8f7888dd2
4 changed files with 58 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
docs/examples/steps.vue
View File

@ -3,7 +3,7 @@
<h1 class="page-title">Steps</h1> <h1 class="page-title">Steps</h1>
<h2 class="page-sub-title">基础用法</h2> <h2 class="page-sub-title">基础用法</h2>
<zan-steps icon="topay"> <zan-steps icon="certificate" icon-class="steps-success" title="等待商家发货" description="等待商家发货">
</zan-steps> </zan-steps>
</div> </div>
</template> </template>
@ -11,3 +11,9 @@
<script> <script>
</script> </script>
<style>
.steps-success {
color: #06bf04;
}
</style>

25
packages/steps/src/steps.vue
View File

@ -1,7 +1,13 @@
<template> <template>
<div class="zan-steps"> <div class="zan-steps">
<div class="zan-steps__desc" v-if="icon"> <div class="zan-steps__status" v-if="icon">
<i class="zan-icon" :class="computedIconClass"></i> <i class="zan-icon" :class="computedIconClass"></i>
<div class="zan-steps__message">
<div class="zan-steps__message-wrapper">
<h4 class="zan-steps__title" v-text="title"></h4>
<p class="zan-steps__desc" v-text="description"></p>
</div>
</div>
</div> </div>
<div class="zan-steps__items"> <div class="zan-steps__items">
<slot></slot> <slot></slot>
@ -16,19 +22,22 @@ export default {
props: { props: {
active: Number, active: Number,
icon: String, icon: String,
// iconClass: String, iconClass: {
type: String,
default: ''
},
title: String, title: String,
description: String description: String
}, },
computed: { computed: {
// computedIconClass() { computedIconClass() {
// let iconName = `zan-icon-${this.icon}`; let iconName = `zan-icon-${this.icon}`;
// let result = (iconClass && iconClass.split(' ')) || []; let result = this.iconClass.split(' ');
// result.push(iconName); result.push(iconName);
// return result; return result;
// } }
} }
}; };
</script> </script>

1
packages/zanui-css/src/cell.css
View File

@ -5,6 +5,7 @@
@b cell-group { @b cell-group {
padding-left: 10px; padding-left: 10px;
position: relative; position: relative;
background-color: #fff;
&::after { &::after {
@mixin border-retina (top, bottom); @mixin border-retina (top, bottom);

33
packages/zanui-css/src/steps.css
View File

@ -3,5 +3,38 @@
@component-namespace zan { @component-namespace zan {
@b steps { @b steps {
padding: 15px 0; padding: 15px 0;
.zan-icon {
font-size: 40px;
line-height: 1;
float: left;
}
@e status {
padding: 0 10px;
}
@e message {
display: table;
height: 40px;
padding-right: 50px;
width: 100%;
box-sizing: border-box;
.zan-steps__message-wrapper {
display: table-cell;
vertical-align: middle;
}
}
@e title {
font-size: 14px;
color: $c-black;
}
@e desc {
font-size: 12px;
color: $c-gray-dark;
}
} }
} }