mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
[improvement] Switch: update style (#2242)
This commit is contained in:
neverland
GitHub
parent
a23c15137e
commit
f1742ec97f
@ -27,6 +27,7 @@
|
||||
"build:site": "rimraf docs/dist && cross-env NODE_ENV=production webpack --config build/webpack.doc.js && gh-pages -d docs/dist",
|
||||
"test": "jest",
|
||||
"test:watch": "jest --watch",
|
||||
"test:clear-cache": "jest --clearCache",
|
||||
"test:coverage": "open test/coverage/index.html",
|
||||
"release": "sh build/release.sh"
|
||||
},
|
||||
@ -111,7 +112,7 @@
|
||||
"stylelint-config-standard": "^18.2.0",
|
||||
"uppercamelcase": "^3.0.0",
|
||||
"url-loader": "^1.1.2",
|
||||
"vant-doc": "1.0.19",
|
||||
"vant-doc": "1.0.20",
|
||||
"vue": "2.5.17",
|
||||
"vue-jest": "^3.0.1",
|
||||
"vue-loader": "^15.4.2",
|
||||
|
||||
@ -97,7 +97,7 @@ exports[`renders demo correctly 1`] = `
|
||||
<!---->
|
||||
</div>
|
||||
<div class="van-cell__value">
|
||||
<div title="设为默认收货地址" class="van-switch" style="font-size:26px;background-color:undefined;">
|
||||
<div title="设为默认收货地址" class="van-switch" style="font-size:24px;background-color:undefined;">
|
||||
<div class="van-switch__node">
|
||||
<!---->
|
||||
</div>
|
||||
|
||||
@ -207,7 +207,7 @@ exports[`create a AddressEdit with props 1`] = `
|
||||
<!---->
|
||||
</div>
|
||||
<div class="van-cell__value">
|
||||
<div title="设为默认收货地址" class="van-switch van-switch--on" style="font-size:26px;background-color:undefined;">
|
||||
<div title="设为默认收货地址" class="van-switch van-switch--on" style="font-size:24px;background-color:undefined;">
|
||||
<div class="van-switch__node">
|
||||
<!---->
|
||||
</div>
|
||||
|
||||
@ -75,6 +75,23 @@
|
||||
// Swipe
|
||||
@swipe-indicator: 6px;
|
||||
|
||||
// Switch
|
||||
@switch-width: 2em;
|
||||
@switch-height: 1em;
|
||||
@switch-node-size: 1em;
|
||||
@switch-node-z-index: 1;
|
||||
@switch-node-background-color: @white;
|
||||
@switch-node-box-shadow: 0 3px 1px 0 rgba(0, 0, 0, .05), 0 2px 2px 0 rgba(0, 0, 0, .1), 0 3px 3px 0 rgba(0, 0, 0, .05);
|
||||
@switch-background-color: @white;
|
||||
@switch-on-background-color: @blue;
|
||||
@switch-transition-duration: .3s;
|
||||
@switch-disabled-opacity: .4;
|
||||
@switch-border: 1px solid rgba(0, 0, 0, .1);
|
||||
|
||||
// SwitchCell
|
||||
@switch-cell-padding-top: 9px;
|
||||
@switch-cell-padding-bottom: 9px;
|
||||
|
||||
// Tab
|
||||
@tabs-line-height: 44px;
|
||||
@tabs-card-height: 30px;
|
||||
|
||||
@ -56,7 +56,7 @@ use `loading` property to keep component in loading state
|
||||
| title | the leftside title | `String` | `''` |
|
||||
| loading | whether switch is loading | `Boolean` | `false` |
|
||||
| disabled | whether to disable switch | `Boolean` | `false` |
|
||||
| size | Size of switch | `String` | `26px` |
|
||||
| size | Size of switch | `String` | `24px` |
|
||||
|
||||
### Event
|
||||
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
@import '../style/var';
|
||||
|
||||
.van-switch-cell {
|
||||
padding-top: 8px;
|
||||
padding-bottom: 8px;
|
||||
padding-top: @switch-cell-padding-top;
|
||||
padding-bottom: @switch-cell-padding-bottom;
|
||||
|
||||
.van-switch {
|
||||
float: right;
|
||||
|
||||
@ -31,7 +31,7 @@ export default create({
|
||||
disabled: Boolean,
|
||||
size: {
|
||||
type: String,
|
||||
default: '26px'
|
||||
default: '24px'
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
@ -10,7 +10,7 @@ exports[`renders demo correctly 1`] = `
|
||||
<!---->
|
||||
</div>
|
||||
<div class="van-cell__value">
|
||||
<div title="标题" class="van-switch van-switch--on" style="font-size:26px;background-color:undefined;">
|
||||
<div title="标题" class="van-switch van-switch--on" style="font-size:24px;background-color:undefined;">
|
||||
<div class="van-switch__node">
|
||||
<!---->
|
||||
</div>
|
||||
@ -28,7 +28,7 @@ exports[`renders demo correctly 1`] = `
|
||||
<!---->
|
||||
</div>
|
||||
<div class="van-cell__value">
|
||||
<div title="标题" class="van-switch van-switch--on van-switch--disabled" style="font-size:26px;background-color:undefined;">
|
||||
<div title="标题" class="van-switch van-switch--on van-switch--disabled" style="font-size:24px;background-color:undefined;">
|
||||
<div class="van-switch__node">
|
||||
<!---->
|
||||
</div>
|
||||
@ -46,7 +46,7 @@ exports[`renders demo correctly 1`] = `
|
||||
<!---->
|
||||
</div>
|
||||
<div class="van-cell__value">
|
||||
<div title="标题" class="van-switch van-switch--on" style="font-size:26px;background-color:undefined;">
|
||||
<div title="标题" class="van-switch van-switch--on" style="font-size:24px;background-color:undefined;">
|
||||
<div class="van-switch__node">
|
||||
<div class="van-loading van-loading--circular van-loading van-switch__loading" style="color:#c9c9c9;width:undefined;height:undefined;"><span class="van-loading__spinner van-loading__spinner--circular"> <svg viewBox="25 25 50 50" class="van-loading__circular"><circle cx="50" cy="50" r="20" fill="none"></circle></svg></span></div>
|
||||
</div>
|
||||
|
||||
@ -56,7 +56,7 @@ export default {
|
||||
| title | 左侧标题 | `String` | `''` | - |
|
||||
| loading | 是否为加载状态 | `Boolean` | `false` | - |
|
||||
| disabled | 是否为禁用状态 | `Boolean` | `false` | - |
|
||||
| size | 开关尺寸 | `String` | `26px` | 1.1.11 |
|
||||
| size | 开关尺寸 | `String` | `24px` | 1.1.11 |
|
||||
|
||||
### Event
|
||||
|
||||
|
||||
@ -18,12 +18,24 @@
|
||||
/>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('advancedUsage')">
|
||||
<demo-block :title="$t('customSize')">
|
||||
<van-switch
|
||||
:value="checked2"
|
||||
size="36px"
|
||||
v-model="checked2"
|
||||
size="24px"
|
||||
/>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('customColor')">
|
||||
<van-switch
|
||||
v-model="checked3"
|
||||
active-color="#4b0"
|
||||
inactive-color="#f44"
|
||||
/>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('asyncControl')">
|
||||
<van-switch
|
||||
:value="checked4"
|
||||
@input="onInput"
|
||||
/>
|
||||
</demo-block>
|
||||
@ -35,18 +47,26 @@ export default {
|
||||
i18n: {
|
||||
'zh-CN': {
|
||||
title: '提醒',
|
||||
message: '是否切换开关？'
|
||||
message: '是否切换开关？',
|
||||
customSize: '自定义大小',
|
||||
customColor: '自定义颜色',
|
||||
asyncControl: '异步控制'
|
||||
},
|
||||
'en-US': {
|
||||
title: 'Confirm',
|
||||
message: 'Are you sure to toggle switch?'
|
||||
message: 'Are you sure to toggle switch?',
|
||||
customSize: 'Custom Size',
|
||||
customColor: 'Custom Color',
|
||||
asyncControl: 'Async Control'
|
||||
}
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
checked: true,
|
||||
checked2: true
|
||||
checked2: true,
|
||||
checked3: true,
|
||||
checked4: true
|
||||
};
|
||||
},
|
||||
|
||||
@ -56,7 +76,7 @@ export default {
|
||||
title: this.$t('title'),
|
||||
message: this.$t('message')
|
||||
}).then(() => {
|
||||
this.checked2 = checked;
|
||||
this.checked4 = checked;
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
@ -28,24 +28,45 @@ export default {
|
||||
#### Disabled
|
||||
|
||||
```html
|
||||
<van-switch v-model="checked" disabled />
|
||||
<van-switch
|
||||
v-model="checked"
|
||||
disabled
|
||||
/>
|
||||
```
|
||||
|
||||
#### Loading
|
||||
|
||||
|
||||
```html
|
||||
<van-switch v-model="checked" loading />
|
||||
<van-switch
|
||||
v-model="checked"
|
||||
loading
|
||||
/>
|
||||
```
|
||||
|
||||
#### Advanced usage
|
||||
#### Custom Size
|
||||
|
||||
```html
|
||||
<van-switch
|
||||
v-model="checked"
|
||||
size="24px"
|
||||
/>
|
||||
```
|
||||
|
||||
#### Custom Color
|
||||
|
||||
```html
|
||||
<van-switch
|
||||
v-model="checked"
|
||||
active-color="#4b0"
|
||||
inactive-color="#f44"
|
||||
/>
|
||||
```
|
||||
|
||||
#### Async Control
|
||||
|
||||
```html
|
||||
<van-switch
|
||||
:value="checked"
|
||||
size="36px"
|
||||
active-color="#4b0"
|
||||
inactive-color="#f44"
|
||||
@input="onInput"
|
||||
/>
|
||||
```
|
||||
|
||||
@ -1,27 +1,27 @@
|
||||
@import '../style/var';
|
||||
|
||||
.van-switch {
|
||||
height: 1em;
|
||||
width: 1.8em;
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
border-radius: 1em;
|
||||
width: @switch-width;
|
||||
height: @switch-height;
|
||||
border: @switch-border;
|
||||
border-radius: @switch-node-size;
|
||||
box-sizing: content-box;
|
||||
border: 1px solid rgba(0, 0, 0, .1);
|
||||
background-color: @white;
|
||||
transition: background-color .3s;
|
||||
background-color: @switch-background-color;
|
||||
transition: background-color @switch-transition-duration;
|
||||
|
||||
&__node {
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
transition: .3s;
|
||||
position: absolute;
|
||||
border-radius: 100%;
|
||||
background-color: @white;
|
||||
box-shadow: 0 3px 1px 0 rgba(0, 0, 0, .05), 0 2px 2px 0 rgba(0, 0, 0, .1), 0 3px 3px 0 rgba(0, 0, 0, .05);
|
||||
width: @switch-node-size;
|
||||
height: @switch-node-size;
|
||||
z-index: @switch-node-z-index;
|
||||
transition: @switch-transition-duration;
|
||||
box-shadow: @switch-node-box-shadow;
|
||||
background-color: @switch-node-background-color;
|
||||
}
|
||||
|
||||
&__loading {
|
||||
@ -32,14 +32,14 @@
|
||||
}
|
||||
|
||||
&--on {
|
||||
background-color: @blue;
|
||||
background-color: @switch-on-background-color;
|
||||
|
||||
.van-switch__node {
|
||||
transform: translateX(.8em);
|
||||
transform: translateX(@switch-width - @switch-node-size);
|
||||
}
|
||||
}
|
||||
|
||||
&--disabled {
|
||||
opacity: .4;
|
||||
opacity: @switch-disabled-opacity;
|
||||
}
|
||||
}
|
||||
|
||||
@ -24,7 +24,21 @@ exports[`renders demo correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="van-switch van-switch--on" style="font-size:36px;background-color:#4b0;">
|
||||
<div class="van-switch van-switch--on" style="font-size:24px;background-color:undefined;">
|
||||
<div class="van-switch__node">
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="van-switch van-switch--on" style="font-size:30px;background-color:#4b0;">
|
||||
<div class="van-switch__node">
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="van-switch van-switch--on" style="font-size:30px;background-color:undefined;">
|
||||
<div class="van-switch__node">
|
||||
<!---->
|
||||
</div>
|
||||
|
||||
@ -10,6 +10,7 @@ Vue.use(Switch);
|
||||
### 代码演示
|
||||
|
||||
#### 基础用法
|
||||
|
||||
```html
|
||||
<van-switch v-model="checked" />
|
||||
```
|
||||
@ -25,22 +26,47 @@ export default {
|
||||
```
|
||||
|
||||
#### 禁用状态
|
||||
|
||||
```html
|
||||
<van-switch v-model="checked" disabled />
|
||||
<van-switch
|
||||
v-model="checked"
|
||||
disabled
|
||||
/>
|
||||
```
|
||||
|
||||
#### 加载状态
|
||||
|
||||
```html
|
||||
<van-switch v-model="checked" loading />
|
||||
<van-switch
|
||||
v-model="checked"
|
||||
loading
|
||||
/>
|
||||
```
|
||||
|
||||
#### 高级用法
|
||||
#### 自定义大小
|
||||
|
||||
```html
|
||||
<van-switch
|
||||
v-model="checked"
|
||||
size="24px"
|
||||
/>
|
||||
```
|
||||
|
||||
#### 自定义颜色
|
||||
|
||||
```html
|
||||
<van-switch
|
||||
v-model="checked"
|
||||
active-color="#4b0"
|
||||
inactive-color="#f44"
|
||||
/>
|
||||
```
|
||||
|
||||
#### 异步控制
|
||||
|
||||
```html
|
||||
<van-switch
|
||||
:value="checked"
|
||||
size="36px"
|
||||
active-color="#4b0"
|
||||
inactive-color="#f44"
|
||||
@input="onInput"
|
||||
/>
|
||||
```
|
||||
@ -66,7 +92,6 @@ export default {
|
||||
};
|
||||
```
|
||||
|
||||
|
||||
### API
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
||||
|
||||
@ -9598,9 +9598,9 @@ validate-npm-package-license@^3.0.1:
|
||||
spdx-correct "^3.0.0"
|
||||
spdx-expression-parse "^3.0.0"
|
||||
|
||||
vant-doc@1.0.19:
|
||||
version "1.0.19"
|
||||
resolved "https://registry.yarnpkg.com/vant-doc/-/vant-doc-1.0.19.tgz#9e6ebef52c53fac698472099154df074400d3b56"
|
||||
vant-doc@1.0.20:
|
||||
version "1.0.20"
|
||||
resolved "https://registry.yarnpkg.com/vant-doc/-/vant-doc-1.0.20.tgz#a497c7140c167f8d4013c0833dbccf3bd099f8e0"
|
||||
dependencies:
|
||||
cheerio "0.22.0"
|
||||
commander "^2.17.1"
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user