[Improvement] Button: add warning type (#1558)

This commit is contained in:
neverland
2018-07-30 17:33:19 +08:00
committed by GitHub
parent c0e9fd633a
commit 4ab3959636
6 changed files with 53 additions and 16 deletions
+16 -4
View File
@@ -1,14 +1,20 @@
<template>
<demo-section>
<demo-block :title="$t('title1')">
<van-button type="default">{{ $t('default') }}</van-button>
<van-button type="primary">{{ $t('primary') }}</van-button>
<div class="demo-button-row">
<van-button type="default">{{ $t('default') }}</van-button>
<van-button type="primary">{{ $t('primary') }}</van-button>
</div>
<van-button type="warning">{{ $t('warning') }}</van-button>
<van-button type="danger">{{ $t('danger') }}</van-button>
</demo-block>
<demo-block :title="$t('plain')">
<van-button type="default" plain>{{ $t('default') }}</van-button>
<van-button type="primary" plain>{{ $t('primary') }}</van-button>
<div class="demo-button-row">
<van-button type="default" plain>{{ $t('default') }}</van-button>
<van-button type="primary" plain>{{ $t('primary') }}</van-button>
</div>
<van-button type="warning" plain>{{ $t('warning') }}</van-button>
<van-button type="danger" plain>{{ $t('danger') }}</van-button>
</demo-block>
@@ -48,6 +54,7 @@ export default {
default: '默认按钮',
primary: '主要按钮',
danger: '危险按钮',
warning: '警告按钮',
large: '大号按钮',
normal: '普通按钮',
small: '小型按钮',
@@ -63,6 +70,7 @@ export default {
default: 'Default',
primary: 'Primary',
danger: 'Danger',
warning: 'Warning',
large: 'Large',
normal: 'Normal',
small: 'Small',
@@ -99,5 +107,9 @@ export default {
.van-doc-demo-block__title {
padding-left: 0;
}
&-row {
margin-bottom: 10px;
}
}
</style>
+3 -1
View File
@@ -14,6 +14,7 @@ Vue.use(Button);
```html
<van-button type="default">Default</van-button>
<van-button type="primary">Primary</van-button>
<van-button type="warning">Warning</van-button>
<van-button type="danger">Danger</van-button>
```
@@ -22,6 +23,7 @@ Vue.use(Button);
```html
<van-button type="default" plain>Default</van-button>
<van-button type="primary" plain>Primary</van-button>
<van-button type="warning" plain>Warning</van-button>
<van-button type="danger" plain>Danger</van-button>
```
@@ -60,7 +62,7 @@ Use `tag` prop to custom button tag
| Attribute | Description | Type | Default |
|-----------|-----------|-----------|-------------|
| type | Can be set to `default` `primary` `danger` | `String` | `default` |
| type | Can be set to `primary` `warning` `danger` | `String` | `default` |
| size | Can be set to `normal` `large` `small` `mini` | `String` | `normal` |
| text | Text | `String` | - |
| tag | Tag | `String` | `button` |
@@ -3,18 +3,26 @@
exports[`renders demo correctly 1`] = `
<div>
<div>
<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>
<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>
</div>
<button class="van-button van-button--warning 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>
<div>
<button class="van-button van-button--default van-button--normal van-button--plain">
<!----><span class="van-button__text">默认按钮</span></button>
<button class="van-button van-button--primary van-button--normal van-button--plain">
<!----><span class="van-button__text">主要按钮</span></button>
<div class="demo-button-row">
<button class="van-button van-button--default van-button--normal van-button--plain">
<!----><span class="van-button__text">默认按钮</span></button>
<button class="van-button van-button--primary van-button--normal van-button--plain">
<!----><span class="van-button__text">主要按钮</span></button>
</div>
<button class="van-button van-button--warning 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>
+4 -2
View File
@@ -10,11 +10,12 @@ Vue.use(Button);
### 代码演示
#### 按钮类型
支持`default`、`primary`、`danger`种类型,默认为`default`
支持`default`、`primary`、`warning`、`danger`种类型,默认为`default`
```html
<van-button type="default">默认按钮</van-button>
<van-button type="primary">主要按钮</van-button>
<van-button type="warning">警告按钮</van-button>
<van-button type="danger">危险按钮</van-button>
```
@@ -23,6 +24,7 @@ Vue.use(Button);
```html
<van-button type="default" plain>默认按钮</van-button>
<van-button type="primary" plain>主要按钮</van-button>
<van-button type="warning" plain>警告按钮</van-button>
<van-button type="danger" plain>危险按钮</van-button>
```
@@ -65,7 +67,7 @@ Vue.use(Button);
| 参数 | 说明 | 类型 | 默认值 |
|-----------|-----------|-----------|-------------|
| type | 按钮类型,可选值为 `default` `primary` `danger` | `String` | `default` |
| type | 按钮类型,可选值为 `primary` `warning` `danger` | `String` | `default` |
| size | 按钮尺寸,可选值为 `normal` `large` `small` `mini` | `String` | `normal` |
| text | 按钮文字 | `String` | - |
| tag | 按钮 HTML 标签 | `String` | `button` |