[Improvement] Button: add warning type (#1558)
This commit is contained in:
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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` |
|
||||
|
||||
Reference in New Issue
Block a user