Skip to content

Commit 288c6fd

Browse files
DewyzeeDewyzee
authored
Merge pull request #10 from iview/dewyzee/dev
complete UI components
2 parents 3b26e78 + 203965a commit 288c6fd

File tree

455 files changed

+22438
-100
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

455 files changed

+22438
-100
lines changed

‎dist/components/action-sheet/action-sheet.vue‎

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
<template>
2+
<div>
3+
<div class="i-as-mask i-class-mask" :class="[visible ? 'i-as-mask-show' : '', iClassMask]" @click="handleClickMask"></div>
4+
<div class="i-as" :class="[visible ? 'i-as-show' : '', iClass]">
5+
<div class="i-as-header" :class="iClassHeader"><slot name="header"></slot></div>
6+
<div class="i-as-actions">
7+
<div class="i-as-action-item" v-for="(item, index) in actions" :key="index">
8+
<button @click="handleClickItem(index)" class="i-btn i-btn-large i-btn-ghost i-btn-long" :open-type="item.openType">
9+
<div class="i-as-btn-loading" v-if="item.loading"></div>
10+
<i-icon v-if="item.icon" :type="item.icon" i-class="i-as-btn-icon"></i-icon>
11+
<div class="i-as-btn-text" :style="styleObj">{{ item.name }}</div>
12+
</button>
13+
</div>
14+
</div>
15+
<div class="i-as-cancel" v-if="showCancel">
16+
<i-button i-class="i-as-cacenl-btn" type="ghost" size="large" long="true" @click="handleClickCancel">{{ cancelText }}</i-button>
17+
</div>
18+
</div>
19+
</div>
20+
</template>
21+
<script>
22+
import button from '../button/button'
23+
import icon from '../icon/icon'
24+
export default {
25+
components: {
26+
'i-button': button,
27+
'i-icon': icon
28+
},
29+
props: {
30+
visible: {
31+
type: Boolean,
32+
default: false
33+
},
34+
maskClosable: {
35+
type: Boolean,
36+
default: true
37+
},
38+
showCancel: {
39+
type: Boolean,
40+
default: false
41+
},
42+
cancelText: {
43+
type: String,
44+
default: '取消'
45+
},
46+
actions: {
47+
type: Array,
48+
default: []
49+
},
50+
iClassMask: {
51+
type: String,
52+
default: ''
53+
},
54+
iClassHeader: {
55+
type: String,
56+
default: ''
57+
},
58+
iClass: {
59+
type: String,
60+
default: ''
61+
}
62+
},
63+
methods: {
64+
handleClickMask() {
65+
if (!this.maskClosable || this.maskClosable === 'false') return
66+
this.handleClickCancel()
67+
},
68+
handleClickItem(index) {
69+
this.$emit('click', {index})
70+
},
71+
handleClickCancel() {
72+
this.$emit('cancel')
73+
}
74+
}
75+
}
76+
</script>

‎dist/components/action-sheet/index.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
import actionSheet from 'action-sheet.vue'
2+
3+
export default actionSheet

‎dist/components/action-sheet/style/action-sheet.css‎

Lines changed: 605 additions & 0 deletions
Large diffs are not rendered by default.

‎dist/components/action-sheet/style/action-sheet.less‎

Lines changed: 144 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,144 @@
1+
@import '../../common/_base.less';
2+
@import '../../common/_mixins.less';
3+
@import '../../icon/style/icon.less';
4+
5+
.btn-color(@color) {
6+
color: #fff !important;
7+
background: @color !important;
8+
}
9+
10+
.i-as{
11+
position: fixed;
12+
width: 100%;
13+
box-sizing: border-box;
14+
left: 0;
15+
right: 0;
16+
bottom: 0;
17+
background: @background-color-base;
18+
transform: translate3d(0, 100%, 0);
19+
transform-origin: center;
20+
transition: all @transition-time ease-in-out;
21+
z-index: @zindex-select;
22+
visibility: hidden;
23+
24+
&-show{
25+
transform: translate3d(0, 0, 0);
26+
visibility: visible;
27+
}
28+
29+
&-mask{
30+
position: fixed;
31+
top: 0;
32+
left: 0;
33+
right: 0;
34+
bottom: 0;
35+
background: rgba(0, 0, 0, 0.7);
36+
z-index: @zindex-select;
37+
transition: all @transition-time ease-in-out;
38+
opacity: 0;
39+
visibility: hidden;
40+
41+
&-show{
42+
opacity: 1;
43+
visibility: visible;
44+
}
45+
}
46+
47+
&-action-item{
48+
position: relative;
49+
&::after{
50+
.hairline();
51+
border-bottom-width: 1px;
52+
}
53+
}
54+
55+
&-header{
56+
background: #fff;
57+
text-align: center;
58+
//padding: 16px;
59+
position: relative;
60+
font-size: @size-font-small;
61+
color: @subsidiary-color;
62+
&::after{
63+
.hairline();
64+
border-bottom-width: 1px;
65+
}
66+
}
67+
68+
&-cancel{
69+
margin-top: 6px;
70+
}
71+
72+
&-btn{
73+
&-loading{
74+
display: inline-block;
75+
vertical-align: middle;
76+
margin-right: 10px;
77+
width: 12px;
78+
height: 12px;
79+
background: transparent;
80+
border-radius: 50%;
81+
border: 2px solid #e5e5e5;
82+
border-color: #666 #e5e5e5 #e5e5e5 #e5e5e5;
83+
animation: btn-spin 0.6s linear;
84+
animation-iteration-count: infinite;
85+
}
86+
87+
&-text{
88+
display: inline-block;
89+
vertical-align: middle;
90+
}
91+
92+
&-icon{
93+
font-size: @size-font-base !important;
94+
margin-right: 4px;
95+
}
96+
}
97+
98+
.i-btn {
99+
text-align: center;
100+
vertical-align: middle;
101+
touch-action: manipulation;
102+
cursor: pointer;
103+
background-image: none;
104+
white-space: nowrap;
105+
user-select: none;
106+
font-size: @size-font-base;
107+
border-radius: 2px;
108+
border: 0 !important;
109+
position: relative;
110+
text-decoration: none;
111+
112+
height: @btn-circle-size;
113+
line-height: @btn-circle-size;
114+
115+
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
116+
117+
.btn-color(@btn-default-bg);
118+
color: @text-color !important;
119+
120+
margin: 10px;
121+
&-large {
122+
height: @btn-circle-size-large;
123+
line-height: @btn-circle-size-large;
124+
}
125+
&-ghost {
126+
.btn-color(#fff);
127+
color: @text-color !important;
128+
}
129+
&-long {
130+
border-radius: 0;
131+
margin: 0;
132+
box-shadow: none;
133+
}
134+
}
135+
}
136+
137+
@keyframes btn-spin {
138+
0% {
139+
transform: rotate(0);
140+
}
141+
100% {
142+
transform: rotate(360deg);
143+
}
144+
}

‎dist/components/action-sheet/style/css.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
import './action-sheet.css'

‎dist/components/action-sheet/style/index.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
import './action-sheet.less'

‎dist/components/alert/alert.vue‎

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
<template>
2+
<div class="i-alert"
3+
:class="[iClass, 'i-alert-' + type, showIcon ? 'i-alert-with-icon' : '', desc ? 'i-alert-with-desc' : '']"
4+
v-if="!closed">
5+
<div v-if="showIcon" class="i-alert-icon">
6+
<i-icon type="prompt" :size="desc ? 24 : 16" v-if="type === 'info'"></i-icon>
7+
<i-icon type="success" :size="desc ? 24 : 16" v-if="type === 'success'"></i-icon>
8+
<i-icon type="warning" :size="desc ? 24 : 16" v-if="type === 'warning'"></i-icon>
9+
<i-icon type="delete" :size="desc ? 24 : 16" v-if="type === 'error'"></i-icon>
10+
</div>
11+
<slot></slot>
12+
<div class="i-alert-desc">
13+
<slot name="desc"></slot>
14+
</div>
15+
<div class="i-alert-close" v-if="closable" @click="handleTap">
16+
<i-icon type="close"></i-icon>
17+
</div>
18+
</div>
19+
</template>
20+
<script>
21+
import icon from '../icon/icon'
22+
export default {
23+
components: {
24+
'i-icon': icon
25+
},
26+
props: {
27+
type: {
28+
type: String,
29+
default: 'info'
30+
},
31+
closable: {
32+
type: Boolean,
33+
value: false
34+
},
35+
showIcon: {
36+
type: Boolean,
37+
default: false
38+
},
39+
desc: {
40+
type: Boolean,
41+
default: false
42+
}
43+
},
44+
data() {
45+
return {
46+
closed: false
47+
}
48+
},
49+
methods: {
50+
handleTap() {
51+
this.closed = !this.closed
52+
this.$emit('close')
53+
}
54+
}
55+
}
56+
</script>

‎dist/components/alert/index.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
import alert from 'alert.vue'
2+
3+
export default alert

‎dist/components/alert/style/alert.css‎

Lines changed: 488 additions & 0 deletions
Large diffs are not rendered by default.

‎dist/components/alert/style/alert.less‎

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
@import "../../common/_base.less";
2+
@import "../../common/_mixins.less";
3+
@import "../../icon/style/icon.less";
4+
5+
.bg-color(@color) {
6+
color: #fff;
7+
background: @color;
8+
}
9+
10+
.i-alert {
11+
position: relative;
12+
margin: 10px;
13+
padding: 8px 48px 8px 16px;
14+
font-size: @size-font-base;
15+
border-radius: 2px;
16+
.bg-color(@background-color-base);
17+
color: @text-color;
18+
19+
&&-with-icon {
20+
padding: 8px 48px 8px 38px;
21+
}
22+
&-info {
23+
.bg-color(@info-color);
24+
}
25+
&-success {
26+
.bg-color(@success-color);
27+
}
28+
&-warning {
29+
.bg-color(@warning-color);
30+
}
31+
&-error {
32+
.bg-color(@error-color);
33+
}
34+
&-icon {
35+
position: absolute;
36+
top: 9px;
37+
left: 16px;
38+
font-size: @size-font-base;
39+
}
40+
&-desc {
41+
font-size: @size-font-small;
42+
}
43+
&-with-desc {
44+
padding: 16px;
45+
position: relative;
46+
}
47+
&-with-desc&-with-icon {
48+
padding: 16px 16px 16px 69px;
49+
}
50+
&-with-desc &-icon {
51+
top: 50%;
52+
left: 24px;
53+
margin-top: -21px;
54+
font-size: 28px;
55+
}
56+
&-close {
57+
font-size: @size-font-small;
58+
position: absolute;
59+
right: 16px;
60+
top: 8px;
61+
overflow: hidden;
62+
cursor: pointer;
63+
}
64+
}

0 commit comments

Comments
 (0)