blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-05-22 22:49:15 +08:00
Code Issues Projects Releases Wiki Activity

[new feature] Button: add info type (#2831)

Browse Source
This commit is contained in:
neverland 2019-02-24 16:50:01 +08:00 committed by GitHub
parent ac76ca0b40
commit 68909d6432
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 26 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
packages/button/demo/index.vue
View File

@ -2,10 +2,11 @@
<demo-section>
<demo-block :title="$t('type')">
<div class="demo-button-row">
<van-button type="primary">{{ $t('primary') }}</van-button>
<van-button type="danger">{{ $t('danger') }}</van-button>
</div>
<van-button type="default">{{ $t('default') }}</van-button>
<van-button type="primary">{{ $t('primary') }}</van-button>
<van-button type="info">{{ $t('info') }}</van-button>
</div>
<van-button type="danger">{{ $t('danger') }}</van-button>
<van-button type="warning">{{ $t('warning') }}</van-button>
</demo-block>
@ -79,6 +80,7 @@ export default {
shape: '按钮形状',
default: '默认按钮',
primary: '主要按钮',
info: '信息按钮',
danger: '危险按钮',
warning: '警告按钮',
large: '大号按钮',
@ -97,6 +99,7 @@ export default {
shape: 'Shape',
default: 'Default',
primary: 'Primary',
info: 'Info',
danger: 'Danger',
warning: 'Warning',
large: 'Large',

7
packages/button/en-US.md
View File

@ -12,9 +12,10 @@ Vue.use(Button);
#### Type
```html
<van-button type="primary">Primary</van-button>
<van-button type="danger">Danger</van-button>
<van-button type="default">Default</van-button>
<van-button type="primary">Primary</van-button>
<van-button type="info">Info</van-button>
<van-button type="danger">Danger</van-button>
<van-button type="warning">Warning</van-button>
```
@ -59,7 +60,7 @@ Vue.use(Button);
| Attribute | Description | Type | Default |
|------|------|------|------|
| type | Can be set to `primary` `warning` `danger` | `String` | `default` |
| type | Can be set to `primary` `info` `warning` `danger` | `String` | `default` |
| size | Can be set to `large` `small` `mini` | `String` | `normal` |
| text | Text | `String` | - |
| tag | Tag | `String` | `button` |

10
packages/button/index.less
View File

@ -51,6 +51,12 @@
border: 1px solid @button-primary-border-color;
}
&--info {
color: @button-info-color;
background-color: @button-info-background-color;
border: 1px solid @button-info-border-color;
}
&--danger {
color: @button-danger-color;
background-color: @button-danger-background-color;
@ -70,6 +76,10 @@
color: @button-primary-background-color;
}
&.van-button--info {
color: @button-info-background-color;
}
&.van-button--danger {
color: @button-danger-background-color;
}

2
packages/button/test/__snapshots__/demo.spec.js.snap
View File

@ -3,7 +3,7 @@
exports[`renders demo correctly 1`] = `
<div>
<div>
<div class="demo-button-row"><button class="van-button van-button--primary van-button--normal"><span class="van-button__text">主要按钮</span></button> <button class="van-button van-button--danger van-button--normal"><span class="van-button__text">危险按钮</span></button></div> <button class="van-button van-button--default van-button--normal"><span class="van-button__text">默认按钮</span></button> <button class="van-button van-button--warning van-button--normal"><span class="van-button__text">警告按钮</span></button>
<div class="demo-button-row"><button class="van-button van-button--default van-button--normal"><span class="van-button__text">默认按钮</span></button> <button class="van-button van-button--primary van-button--normal"><span class="van-button__text">主要按钮</span></button> <button class="van-button van-button--info van-button--normal"><span class="van-button__text">信息按钮</span></button></div> <button class="van-button van-button--danger van-button--normal"><span class="van-button__text">危险按钮</span></button> <button class="van-button van-button--warning van-button--normal"><span class="van-button__text">警告按钮</span></button>
</div>
<div><button class="van-button van-button--primary van-button--normal van-button--plain"><span class="van-button__text">朴素按钮</span></button> <button class="van-button van-button--danger van-button--normal van-button--plain"><span class="van-button__text">朴素按钮</span></button></div>
<div><button disabled="disabled" class="van-button van-button--primary van-button--normal van-button--disabled"><span class="van-button__text">禁用状态</span></button> <button disabled="disabled" class="van-button van-button--danger van-button--normal van-button--disabled"><span class="van-button__text">禁用状态</span></button></div>

5
packages/button/zh-CN.md
View File

@ -11,11 +11,12 @@ Vue.use(Button);
#### 按钮类型
支持`default`、`primary`、`warning`、`danger`四种类型，默认为`default`
支持`default`、`primary`、`info`、`warning`、`danger`五种类型，默认为`default`
```html
<van-button type="default">默认按钮</van-button>
<van-button type="primary">主要按钮</van-button>
<van-button type="info">信息按钮</van-button>
<van-button type="warning">警告按钮</van-button>
<van-button type="danger">危险按钮</van-button>
```
@ -65,7 +66,7 @@ Vue.use(Button);
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|------|------|------|------|------|
| type | 类型，可选值为 `primary` `warning` `danger` | `String` | `default` | - |
| type | 类型，可选值为 `primary` `info` `warning` `danger` | `String` | `default` | 1.6.6 |
| size | 尺寸，可选值为 `large` `small` `mini` | `String` | `normal` | - |
| text | 文字 | `String` | - | - |
| tag | HTML 标签 | `String` | `button` | - |

3
packages/style/var.less
View File

@ -26,6 +26,9 @@
@button-primary-color: @white;
@button-primary-background-color: @green;
@button-primary-border-color: @green;
@button-info-color: @white;
@button-info-background-color: @blue;
@button-info-border-color: @blue;
@button-danger-color: @white;
@button-danger-background-color: @red;
@button-danger-border-color: @red;