drip-public/iview
6
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

add Progress UI

Browse source 
add Progress UI
This commit is contained in:
梁灏 2016-09-22 16:24:20 +08:00
parent 9dde24b629
commit c1dcac7aa3
7 changed files with 135 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
components/progress/progress.vue
View file

@ -1,5 +1,10 @@
<template>
<div :class="wrapClasses">
<div :class="outerClasses">
<div :class="innerClasses">
<div :class="bgClasses" :style="bgStyle"></div>
</div>
</div>
<span v-if="!hideInfo" :class="textClasses">
<slot>
<span v-if="isStatus" :class="textInnerClasses">
@ -10,11 +15,6 @@
</span>
</slot>
</span>
<div :class="outerClasses">
<div :class="innerClasses">
<div :class="bgClasses" :style="bgStyle"></div>
</div>
</div>
</div>
</template>
<script>
@ -53,10 +53,10 @@
let type = '';
switch (this.status) {
case 'wrong':
type = 'ios-close-empty';
type = 'ios-close';
break;
case 'success':
type = 'ios-checkmark-empty';
type = 'ios-checkmark';
break;
}

2
dist/styles/iview.all.css vendored
View file

File diff suppressed because one or more lines are too long

2
dist/styles/iview.css vendored
View file

File diff suppressed because one or more lines are too long

45
local/routers/tag.vue
View file

@ -5,21 +5,42 @@
<Button @click="finish">finish</Button>
<Button @click="error">error</Button>
<Button @click="update">update</Button>
<br><br>
<Progress :percent="25"></Progress>
<Progress :percent="45" status="success"></Progress>
<Progress :percent="45" status="active"></Progress>
<Progress :percent="65" status="wrong"></Progress>
<Progress :percent="100"></Progress>
<Progress :percent="25" hide-info></Progress>
<Progress :percent="percent"></Progress>
<Button-group size="large">
<Button icon="ios-plus-empty" @click="add"></Button>
<Button icon="ios-minus-empty" @click="minus"></Button>
</Button-group>
<Progress :percent="25" :stroke-width="5"></Progress>
<Progress :percent="100">
<Icon type="checkmark-circled"></Icon>
<span>成功</span>
</Progress>
</div>
</template>
<script>
import { Tag, LoadingBar, Button } from 'iview';
import { Tag, LoadingBar, Button, Progress, Icon } from 'iview';
const ButtonGroup = Button.Group;
export default {
components: {
Tag,
Button
Button,
Progress,
ButtonGroup,
Icon
},
props: {
},
data () {
return {
percent: 0
}
},
computed: {
@ -40,13 +61,19 @@
},
update () {
LoadingBar.update(50);
},
add () {
if (this.percent >= 100) {
return false;
}
this.percent += 10;
},
minus () {
if (this.percent <= 0) {
return false;
}
this.percent -= 10;
}
},
ready () {
LoadingBar.start();
setTimeout(function () {
LoadingBar.finish();
}, 2000)
}
}
</script>

2
package.json
View file

@ -1,6 +1,6 @@
{
"name": "iview",
"version": "0.0.18",
"version": "0.0.19",
"title": "iView",
"description": "A high quality UI components Library with Vue.js",
"homepage": "http://www.iviewui.com",

3
styles/components/index.less
View file

@ -14,4 +14,5 @@
@import "switch";
@import "input-number";
@import "tag";
@import "loading-bar";
@import "loading-bar";
@import "progress";

87
styles/components/progress.less Normal file
View file

@ -0,0 +1,87 @@
@progress-prefix-cls: ~"@{css-prefix}progress";
.@{progress-prefix-cls} {
display: inline-block;
width: 100%;
font-size: 14px;
position: relative;
&-outer {
display: inline-block;
width: 100%;
margin-right: 0;
padding-right: 0;
.@{progress-prefix-cls}-show-info & {
padding-right: 55px;
margin-right: -55px;
}
}
&-inner {
display: inline-block;
width: 100%;
background-color: #f3f3f3;
border-radius: 100px;
vertical-align: middle;
}
&-bg {
border-radius: 100px;
background-color: @info-color;
.transition(all @transition-time linear);
position: relative;
}
&-text {
display: inline-block;
margin-left: 5px;
text-align: left;
font-size: 1em;
vertical-align: middle;
}
&-active {
.@{progress-prefix-cls}-bg:before {
content: '';
opacity: 0;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: #fff;
border-radius: 10px;
.animation(ivu-progress-active 2s @ease-in-out infinite);
}
}
&-wrong {
.@{progress-prefix-cls}-bg {
background-color: @error-color;
}
.@{progress-prefix-cls}-text {
color: @error-color;
}
}
&-success {
.@{progress-prefix-cls}-bg {
background-color: @success-color;
}
.@{progress-prefix-cls}-text {
color: @success-color;
}
}
}
@keyframes ivu-progress-active {
0% {
opacity: .3;
width: 0;
}
100% {
opacity: 0;
width: 100%;
}
}