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

[Improvement] Button: adjust default button border color (#392)

Browse Source
This commit is contained in:
neverland 2017-12-08 11:17:54 +08:00 committed by GitHub
parent a3ca3c40a9
commit 2cc5767a99
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 43 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
docs/demos/views/button.vue
View File

@ -1,20 +1,20 @@
<template>
<demo-section>
<demo-block :title="$t('title1')">
<van-button type="default">Default</van-button>
<van-button type="primary">Primary</van-button>
<van-button type="danger">Danger</van-button>
<van-button type="default">{{ $t('default') }}</van-button>
<van-button type="primary">{{ $t('primary') }}</van-button>
<van-button type="danger">{{ $t('danger') }}</van-button>
</demo-block>
<demo-block :title="$t('title2')">
<van-button size="large">Large</van-button>
<van-button size="normal">Normal</van-button>
<van-button size="small">Small</van-button>
<van-button size="mini">Mini</van-button>
<van-button size="large">{{ $t('large') }}</van-button>
<van-button size="normal">{{ $t('normal') }}</van-button>
<van-button size="small">{{ $t('small') }}</van-button>
<van-button size="mini">{{ $t('mini') }}</van-button>
</demo-block>
<demo-block :title="$t('disabled')">
<van-button disabled>Diabled</van-button>
<van-button disabled>{{ $t('disabled') }}</van-button>
</demo-block>
<demo-block :title="$t('title3')">
@ -51,14 +51,28 @@ export default {
title2: '按钮尺寸',
title3: '加载状态',
title4: '自定义按钮标签',
title5: '页面底部操作按钮'
title5: '页面底部操作按钮',
default: '默认按钮',
primary: '主要按钮',
danger: '危险按钮',
large: '大号按钮',
normal: '普通按钮',
small: '小型按钮',
mini: '迷你按钮'
},
'en-US': {
title1: 'Type',
title2: 'Size',
title3: 'Loading',
title4: 'Custom Tag',
title5: 'Action Button'
title5: 'Action Button',
default: 'Default',
primary: 'Primary',
danger: 'Danger',
large: 'Large',
normal: 'Normal',
small: 'Small',
mini: 'Mini'
}
}
}

19
docs/markdown/zh-CN/button.md
View File

@ -10,32 +10,29 @@ Vue.component(Button.name, Button);
### 代码演示
#### 按钮类型
支持`default`、`primary`、`danger`三种类型，默认为`default`
```html
<van-button type="default">Default</van-button>
<van-button type="primary">Primary</van-button>
<van-button type="danger">Danger</van-button>
<van-button type="default">默认按钮</van-button>
<van-button type="primary">主要按钮</van-button>
<van-button type="danger">危险按钮</van-button>
```
#### 按钮尺寸
支持`large`、`normal`、`small`、`mini`四种尺寸，默认为`normal`
```html
<van-button size="large">Large</van-button>
<van-button size="normal">Normal</van-button>
<van-button size="small">Small</van-button>
<van-button size="mini">Mini</van-button>
<van-button size="large">大号按钮</van-button>
<van-button size="normal">普通按钮</van-button>
<van-button size="small">小型按钮</van-button>
<van-button size="mini">迷你按钮</van-button>
```
#### 禁用状态
通过`disabled`属性来禁用按钮，此时按钮不可点击
```html
<van-button disabled>Diabled</van-button>
<van-button disabled>禁用状态</van-button>
```
#### 加载状态

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

@ -102,11 +102,11 @@
border: 0;
border-radius: 0;
font-size: 16px;
color: $bottom-action-button-default-color;
background-color: $bottom-action-button-default-background-color;
color: $button-bottom-action-default-color;
background-color: $button-bottom-action-default-background-color;
&.van-button--primary {
background-color: $bottom-action-button-primary-background-color;
background-color: $button-bottom-action-primary-background-color;
}
}

16
packages/vant-css/src/common/var.css
View File

@ -17,19 +17,19 @@ $active-color: #e8e8e8;
$background-color: #f8f8f8;
/* button */
$button-default-color: $text-color;
$button-default-background-color: $white;
$button-default-border-color: $gray-light;
$button-primary-color: $white;
$button-primary-background-color: #4b0;
$button-primary-border-color: #0a0;
$button-default-color: $text-color;
$button-default-background-color: $white;
$button-default-border-color: $border-color;
$button-danger-color: $white;
$button-danger-background-color: $red;
$button-danger-border-color: #e33;
$button-disabled-color: $gray-dark;
$button-disabled-background-color: $gray-light;
$button-disabled-border-color: #cacaca;
$bottom-action-button-default-color: $white;
$bottom-action-button-default-background-color: #f85;
$bottom-action-button-primary-color: $white;
$bottom-action-button-primary-background-color: $red;
$button-disabled-border-color: $border-color;
$button-bottom-action-default-color: $white;
$button-bottom-action-default-background-color: #f85;
$button-bottom-action-primary-color: $white;
$button-bottom-action-primary-background-color: $red;