Skip to content

Commit 0409b25

Browse files
MrRaindropMrRaindrop
committed
Merge branch 'dev' of https://github.com/weexteam/weex-vue-render into dev
2 parents 05d6c26 + e656c13 commit 0409b25

File tree

4 files changed

+149
-15
lines changed

4 files changed

+149
-15
lines changed

‎examples/components/switch.vue

Lines changed: 98 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,108 @@
11
<template>
22
<div>
3-
<div class="ct">
4-
<switch class="switch" checked="false"></switch>
5-
<switch class="switch" checked="true"></switch>
3+
<text class="title">Colorful Weex Switch</text>
4+
<div class="example">
5+
<text class="label">Default</text>
6+
<switch></switch>
7+
<switch disabled="true" checked="true"></switch>
8+
<switch disabled="true"></switch>
69
</div>
10+
11+
12+
<div class="example">
13+
<text class="label">Colorful</text>
14+
<switch onTintColor="#C33D3E"
15+
thumbTintColor="#FF7703"
16+
tintColor="#850B0B"></switch>
17+
</div>
18+
19+
<div class="example">
20+
<text class="label">Colorful disabled</text>
21+
<switch onTintColor="#C33D3E"
22+
thumbTintColor="#FF7703"
23+
tintColor="#850B0B"
24+
checked="true"
25+
disabled="true"></switch>
26+
27+
<switch onTintColor="#C33D3E"
28+
thumbTintColor="#FF7703"
29+
tintColor="#850B0B"
30+
disabled="true"></switch>
31+
</div>
32+
33+
34+
<div class="example">
35+
<text class="label">Colorful updated</text>
36+
<switch :on-tint-color="onTintColor"
37+
:thumb-tint-color="thumbTintColor"
38+
:tint-color="tintColor"
39+
checked="true"></switch>
40+
<div class="btn" @click="onchange">
41+
<text class="btn-text">Change color</text>
42+
</div>
43+
</div>
44+
45+
746
</div>
847
</template>
948

49+
50+
<script>
51+
export default {
52+
data: () => ({
53+
onTintColor:'#C33D3E',
54+
thumbTintColor:'#FF7703',
55+
tintColor:'#850B0B'
56+
}),
57+
methods:{
58+
onchange(){
59+
this.onTintColor=this.onTintColor=='#C33D3E'?'#FDED4A':'#C33D3E';
60+
this.thumbTintColor=this.thumbTintColor=='#FF7703'?'#8A6C59':'#FF7703';
61+
this.tintColor= this.tintColor == '#850B0B'?'#555555':'#850B0B';
62+
}
63+
}
64+
}
65+
</script>
66+
1067
<style scoped>
11-
.ct {
12-
height: 300px;
13-
background-color: #f7f7f7;
14-
align-items: center;
15-
justify-content: center;
68+
.btn{
69+
width:200px;
70+
height:70px;
71+
background-color:#C33D3E;
72+
justify-content:center;
73+
align-items:center;
74+
margin-left:40px;
75+
border-radius:10px;
76+
}
77+
.btn-text{
78+
font-size:30px;
79+
color:#fff;
80+
}
81+
.title{
82+
color:#333;
83+
font-size:40px;
84+
margin-top:100px;
85+
margin-bottom:50px;
86+
margin-left:180px;
87+
}
88+
89+
.example {
90+
flex-direction: row;
91+
justify-content: flex-start;
92+
margin-top: 60px;
93+
}
94+
.label {
95+
font-size: 40px;
96+
line-height: 60px;
97+
width: 350px;
98+
color: #666;
99+
text-align: right;
100+
margin-right: 36px;
16101
}
17-
.switch {
18-
margin: 20px;
102+
.info {
103+
font-size: 30px;
104+
line-height: 60px;
105+
color: #BBB;
106+
margin-left: 10px;
19107
}
20108
</style>

‎examples/index.vue

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,7 @@
3131
{name: root + '/components/web', title: 'Web'},
3232
{name: root + '/components/navigator', title: 'Navigator'},
3333
{name: root + '/components/tabbar', title: 'Tabbar'},
34+
{name: root + '/components/switch', title: 'Switch'},
3435
3536
// module
3637
{name: root + '/modules/instance-api', title: 'Instance API'},

‎src/components/switch/index.js

Lines changed: 49 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,13 @@ function getSwitch (weex) {
3232
disabled: {
3333
type: [Boolean, String],
3434
default: false
35-
}
35+
},
36+
// Border color when the switch is turned off
37+
tintColor: String,
38+
// Background color when the switch is turned on.
39+
onTintColor: String,
40+
// Color of the foreground switch grip.
41+
thumbTintColor: String
3642
},
3743
data () {
3844
return {
@@ -46,6 +52,43 @@ function getSwitch (weex) {
4652
this.isChecked && classArray.push('weex-switch-checked')
4753
this.isDisabled && classArray.push('weex-switch-disabled')
4854
return classArray.join(' ')
55+
},
56+
mergeStyle () {
57+
const style = extractComponentStyle(this)
58+
const { tintColor, onTintColor, isChecked, isDisabled } = this
59+
60+
if (!isChecked && tintColor) {
61+
Object.assign(style, {
62+
borderColor: tintColor,
63+
boxShadow: `${tintColor} 0 0 0 0 inset`
64+
})
65+
}
66+
67+
if (isChecked && onTintColor) {
68+
Object.assign(style, {
69+
backgroundColor: onTintColor,
70+
color: onTintColor,
71+
borderColor: onTintColor,
72+
boxShadow: `${onTintColor} 0 0 0 0.533333rem inset`
73+
})
74+
}
75+
76+
isDisabled && Object.assign(style, {
77+
opacity: 0.3
78+
})
79+
80+
return style
81+
},
82+
smallStyle () {
83+
const { thumbTintColor } = this
84+
let smallStyle = {}
85+
86+
if (thumbTintColor) {
87+
smallStyle = {
88+
background: thumbTintColor
89+
}
90+
}
91+
return smallStyle
4992
}
5093
},
5194
methods: {
@@ -83,8 +126,11 @@ function getSwitch (weex) {
83126
return createElement('span', {
84127
attrs: { 'weex-type': 'switch' },
85128
staticClass: this.wrapperClass,
86-
staticStyle: extractComponentStyle(this)
87-
}, [createElement('small', { staticClass: 'weex-switch-inner' })])
129+
staticStyle: this.mergeStyle
130+
}, [createElement('small', {
131+
staticClass: 'weex-switch-inner',
132+
staticStyle: this.smallStyle
133+
})])
88134
}
89135
}
90136
}

‎src/components/switch/style.css

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -41,8 +41,7 @@
4141
}
4242

4343
.weex-switch-checked.weex-switch-disabled {
44-
background-color: #A0CCA0;
45-
box-shadow: #A0CCA0 0 0 0 0.533333rem inset;
44+
opacity: 0.3
4645
}
4746

4847
.weex-switch-disabled {

0 commit comments

Comments
 (0)