blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-06 03:57:59 +08:00
Code Issues Projects Releases Wiki Activity

fix: button add active style

Browse Source
This commit is contained in:
cookfront 2017-04-20 13:59:55 +08:00
parent 5a1027ee3c
commit 5d0cdbc3f1
6 changed files with 89 additions and 66 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
docs/examples-dist/button.vue
View File

@ -76,6 +76,9 @@
<style> <style>
@component-namespace demo { @component-namespace demo {
@b button { @b button {
.van-button {
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.van-row { .van-row {
padding: 0 15px; padding: 0 15px;
} }

32
docs/examples-dist/switch.vue
View File

@ -1,16 +1,18 @@
<template><section class="demo-switch"><h1 class="demo-title">Switch 开关</h1><example-block title="基础用法"> <template><section class="demo-switch"><h1 class="demo-title">Switch 开关</h1><example-block title="基础用法">
<van-switch class="some-customized-class" v-model="switchState1"></van-switch> <van-row>
<div class="demo-switch__text">{{ switchState1 ? ' ON' : 'OFF' }}</div> <van-col span="12">
<van-switch class="some-customized-class" v-model="switchState1"></van-switch>
<div class="demo-switch__text">{{ switchState1 ? ' 打开' : '关闭' }}</div>
</van-col>
<van-col span="12">
<van-switch class="some-customized-class" v-model="switchState2" :on-change="updateState"></van-switch>
<div class="demo-switch__text">{{ switchState2 ? ' 打开' : '关闭' }}</div>
</van-col>
</van-row>
</example-block><example-block title="">
<van-switch class="some-customized-class" v-model="switchState2" :on-change="updateState"></van-switch>
<div class="demo-switch__text">{{ switchState2 ? ' ON' : 'OFF' }}</div>
</example-block><example-block title="禁用状态"> </example-block><example-block title="禁用状态">
<van-switch class="some-customized-class" v-model="switchStateTrue" :disabled="true"></van-switch> <van-switch class="some-customized-class" v-model="switchStateTrue" :disabled="true"></van-switch>
@ -34,19 +36,9 @@
<style> <style>
@component-namespace demo { @component-namespace demo {
@b switch { @b switch {
.examples,
.example-block {
text-align: center;
}
.example-block {
.demo-sub-title {
text-align: left;
}
}
@e text { @e text {
margin: 20px auto; display: inline-block;
line-height: 32px;
} }
} }
} }

3
docs/examples-docs/button.md
View File

@ -1,6 +1,9 @@
<style> <style>
@component-namespace demo { @component-namespace demo {
@b button { @b button {
.van-button {
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.van-row { .van-row {
padding: 0 15px; padding: 0 15px;
} }

87
docs/examples-docs/switch.md
View File

@ -1,19 +1,17 @@
<style> <style>
@component-namespace demo { @component-namespace demo {
@b switch { @b switch {
.examples, .van-switch {
.example-block { float: left;
text-align: center; margin: 0 15px;
}
.example-block {
.demo-sub-title {
text-align: left;
}
} }
@e text { @e text {
margin: 20px auto; display: inline-block;
line-height: 32px;
float: left;
font-size: 14px;
color: #333;
} }
} }
} }
@ -26,7 +24,7 @@ export default {
data() { data() {
return { return {
switchState1: true, switchState1: true,
switchState2: true, switchState2: false,
switchStateTrue: true, switchStateTrue: true,
switchStateFalse: false switchStateFalse: false
}; };
@ -83,35 +81,25 @@ export default {
:::demo 基础用法 :::demo 基础用法
```html ```html
<van-switch class="some-customized-class" v-model="switchState1"></van-switch> <van-row>
<div class="demo-switch__text">{{ switchState1 ? ' ON' : 'OFF' }}</div> <van-col span="12">
<van-switch class="some-customized-class" v-model="switchState1"></van-switch>
<div class="demo-switch__text">{{ switchState1 ? ' 打开' : '关闭' }}</div>
</van-col>
<van-col span="12">
<van-switch class="some-customized-class" v-model="switchState2" :on-change="updateState"></van-switch>
<div class="demo-switch__text">{{ switchState2 ? ' 打开' : '关闭' }}</div>
</van-col>
</van-row>
<script> <script>
export default { export default {
data() { data() {
return { return {
switchState1: true switchState1: true,
}; switchState2: false
}
};
</script>
```
:::
:::demo
```html
<van-switch class="some-customized-class" v-model="switchState2" :on-change="updateState"></van-switch>
<div class="demo-switch__text">{{ switchState2 ? ' ON' : 'OFF' }}</div>
<script>
import Dialog from 'packages/dialog';
export default {
data() {
return {
switchState2: true
}; };
}, },
methods: { methods: {
@ -131,18 +119,22 @@ export default {
``` ```
::: :::
#### 禁用状态 #### 禁用状态
设置`disabled`属性为`true`，此时开关不可点击。 设置`disabled`属性为`true`，此时开关不可点击。
:::demo 禁用状态 :::demo 禁用状态
```html ```html
<van-switch class="some-customized-class" v-model="switchStateTrue" :disabled="true"></van-switch> <van-row>
<div class="demo-switch__text">ON, DISABLED</div> <van-col span="12">
<van-switch class="some-customized-class" v-model="switchStateTrue" :disabled="true"></van-switch>
<van-switch class="some-customized-class" v-model="switchStateFalse" :disabled="true"></van-switch> <div class="demo-switch__text">打开</div>
<div class="demo-switch__text">OFF, DISABLED</div> </van-col>
<van-col span="12">
<van-switch class="some-customized-class" v-model="switchStateFalse" :disabled="true"></van-switch>
<div class="demo-switch__text">关闭</div>
</van-col>
</van-row>
<script> <script>
export default { export default {
@ -163,11 +155,16 @@ export default {
:::demo loading状态 :::demo loading状态
```html ```html
<van-switch class="some-customized-class" v-model="switchStateTrue" :loading="true"></van-switch> <van-row>
<div class="demo-switch__text">ON, LOADING</div> <van-col span="12">
<van-switch class="some-customized-class" v-model="switchStateTrue" :loading="true"></van-switch>
<van-switch class="some-customized-class" v-model="switchStateFalse" :loading="true"></van-switch> <div class="demo-switch__text">打开</div>
<div class="demo-switch__text">OFF, LOADING</div> </van-col>
<van-col span="12">
<van-switch class="some-customized-class" v-model="switchStateFalse" :loading="true"></van-switch>
<div class="demo-switch__text">关闭</div>
</van-col>
</van-row>
<script> <script>
export default { export default {

2
docs/src/components/demo-list.vue
View File

@ -50,7 +50,7 @@ export default {
padding-top: 40px; padding-top: 40px;
height: 0; height: 0;
overflow: hidden; overflow: hidden;
background: url(https://img.yzcdn.cn/upload_files/2017/04/18/FveNmX6aFsQm1jUhcvBBZn6UrZFi.png) center center no-repeat; background: url(https://img.yzcdn.cn/upload_files/2017/04/20/FjwR1mraVIqtHWb8YWDW_YzQ_Kh2.png) center center no-repeat;
background-size: 156px 40px; background-size: 156px 40px;
margin-bottom: 10px; margin-bottom: 10px;
} }

28
packages/vant-css/src/button.css
View File

@ -38,18 +38,35 @@
color: $button-default-color; color: $button-default-color;
background-color: $button-default-background-color; background-color: $button-default-background-color;
border: 1px solid $button-default-border-color; border: 1px solid $button-default-border-color;
&:active {
border-color: #cacaca;
background-color: $c-gray-light;
color: $c-gray-dark;
}
} }
@m primary { @m primary {
color: $button-primary-color; color: $button-primary-color;
background-color: $button-primary-background-color; background-color: $button-primary-background-color;
border: 1px solid $button-primary-border-color; border: 1px solid $button-primary-border-color;
&:active {
border-color: #00AA00;
background-color: #00AA00;
color: #66CC66;
}
} }
@m danger { @m danger {
color: $button-danger-color; color: $button-danger-color;
background-color: $button-danger-background-color; background-color: $button-danger-background-color;
border: 1px solid $button-danger-border-color; border: 1px solid $button-danger-border-color;
&:active {
border-color: #D43333;
background-color: #D43333;
}
} }
@m large { @m large {
@ -113,9 +130,20 @@
color: $bottom-action-button-default-color; color: $bottom-action-button-default-color;
font-size: 16px; font-size: 16px;
&:active {
border-color: #DD6F44;
background-color: #DD6F44;
color: #fff;
}
&.van-button--primary { &.van-button--primary {
background-color: $bottom-action-button-primary-background-color; background-color: $bottom-action-button-primary-background-color;
color: $bottom-action-button-primary-color; color: $bottom-action-button-primary-color;
&:active {
border-color: #D43333;
background-color: #D43333;
}
} }
} }
} }