From c1dcac7aa315d7ea360978de35b429e6fcb5f9f2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=A2=81=E7=81=8F?= Date: Thu, 22 Sep 2016 16:24:20 +0800 Subject: [PATCH] add Progress UI add Progress UI --- components/progress/progress.vue | 14 ++--- dist/styles/iview.all.css | 2 +- dist/styles/iview.css | 2 +- local/routers/tag.vue | 45 +++++++++++++---- package.json | 2 +- styles/components/index.less | 3 +- styles/components/progress.less | 87 ++++++++++++++++++++++++++++++++ 7 files changed, 135 insertions(+), 20 deletions(-) create mode 100644 styles/components/progress.less diff --git a/components/progress/progress.vue b/components/progress/progress.vue index eeb34190..256c4a0a 100644 --- a/components/progress/progress.vue +++ b/components/progress/progress.vue @@ -1,5 +1,10 @@ \ No newline at end of file diff --git a/package.json b/package.json index 334df59b..37f8e9c7 100644 --- a/package.json +++ b/package.json @@ -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", diff --git a/styles/components/index.less b/styles/components/index.less index 3110418b..1b943710 100644 --- a/styles/components/index.less +++ b/styles/components/index.less @@ -14,4 +14,5 @@ @import "switch"; @import "input-number"; @import "tag"; -@import "loading-bar"; \ No newline at end of file +@import "loading-bar"; +@import "progress"; \ No newline at end of file diff --git a/styles/components/progress.less b/styles/components/progress.less new file mode 100644 index 00000000..2341d849 --- /dev/null +++ b/styles/components/progress.less @@ -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%; + } +} \ No newline at end of file