ui/vant
1
0
Fork 0
mirror of https://github.com/youzan/vant.git synced 2025-10-20 02:31:21 +00:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

breaking change(Button): add success type, remove info type

Browse Source
This commit is contained in:
chenjiahan
2020-08-21 10:09:21 +08:00
parent 82b585fc2b
commit 07d1a2590f
19 changed files with 54 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
src/button/README.md
View File

@@ -16,7 +16,7 @@ app.use(Button);
```html
<van-button type="primary">Primary</van-button>
<van-button type="info">Info</van-button>
<van-button type="success">Success</van-button>
<van-button type="default">Default</van-button>
<van-button type="danger">Danger</van-button>
<van-button type="warning">Warning</van-button>
@@ -26,21 +26,21 @@ app.use(Button);
```html
<van-button plain type="primary">Primary</van-button>
<van-button plain type="info">Danger</van-button>
<van-button plain type="primary">Danger</van-button>
```
### Hairline
```html
<van-button plain hairline type="primary">Hairline</van-button>
<van-button plain hairline type="info">Hairline</van-button>
<van-button plain hairline type="primary">Hairline</van-button>
```
### Disabled
```html
<van-button disabled type="primary">Diabled</van-button>
<van-button disabled type="info">Diabled</van-button>
<van-button disabled type="primary">Diabled</van-button>
```
### Loading
@@ -48,14 +48,14 @@ app.use(Button);
```html
<van-button loading type="primary" />
<van-button loading type="primary" loading-type="spinner" />
<van-button loading type="info" loading-text="Loading..." />
<van-button loading type="primary" loading-text="Loading..." />
```
### Shape
```html
<van-button square type="primary">Square</van-button>
<van-button round type="info">Round</van-button>
<van-button round type="primary">Round</van-button>
```
### Icon
@@ -63,7 +63,7 @@ app.use(Button);
```html
<van-button icon="plus" type="primary" />
<van-button icon="plus" type="primary">Button</van-button>
<van-button icon="https://img.yzcdn.cn/vant/user-active.png" type="info">
<van-button icon="https://img.yzcdn.cn/vant/user-active.png" type="primary">
Button
</van-button>
```
@@ -106,7 +106,7 @@ app.use(Button);
| Attribute | Description | Type | Default |
| --- | --- | --- | --- |
| type | Can be set to `primary` `info` `warning` `danger` | _string_ | `default` |
| type | Can be set to `primary` `success` `warning` `danger` | _string_ | `default` |
| size | Can be set to `large` `small` `mini` | _string_ | `normal` |
| text | Text | _string_ | - |
| color `v2.1.8` | Color, support linear-gradient | _string_ | - |

18
src/button/README.zh-CN.md
View File

@@ -14,11 +14,11 @@ app.use(Button);
### 按钮类型
按钮支持 `default`、`primary`、`info`、`warning`、`danger` 五种类型，默认为 `default`。
按钮支持 `default`、`primary`、`success`、`warning`、`danger` 五种类型，默认为 `default`。
```html
<van-button type="primary">主要按钮</van-button>
<van-button type="info">信息按钮</van-button>
<van-button type="success">成功按钮</van-button>
<van-button type="default">默认按钮</van-button>
<van-button type="warning">警告按钮</van-button>
<van-button type="danger">危险按钮</van-button>
@@ -30,7 +30,7 @@ app.use(Button);
```html
<van-button plain type="primary">朴素按钮</van-button>
<van-button plain type="info">朴素按钮</van-button>
<van-button plain type="primary">朴素按钮</van-button>
```
### 细边框
@@ -39,7 +39,7 @@ app.use(Button);
```html
<van-button plain hairline type="primary">细边框按钮</van-button>
<van-button plain hairline type="info">细边框按钮</van-button>
<van-button plain hairline type="primary">细边框按钮</van-button>
```
### 禁用状态
@@ -48,7 +48,7 @@ app.use(Button);
```html
<van-button disabled type="primary">禁用状态</van-button>
<van-button disabled type="info">禁用状态</van-button>
<van-button disabled type="primary">禁用状态</van-button>
```
### 加载状态
@@ -58,7 +58,7 @@ app.use(Button);
```html
<van-button loading type="primary" />
<van-button loading type="primary" loading-type="spinner" />
<van-button loading type="info" loading-text="加载中..." />
<van-button loading type="primary" loading-text="加载中..." />
```
### 按钮形状
@@ -67,7 +67,7 @@ app.use(Button);
```html
<van-button square type="primary">方形按钮</van-button>
<van-button round type="info">圆形按钮</van-button>
<van-button round type="primary">圆形按钮</van-button>
```
### 图标按钮
@@ -77,7 +77,7 @@ app.use(Button);
```html
<van-button icon="plus" type="primary" />
<van-button icon="plus" type="primary">按钮</van-button>
<van-button icon="https://img.yzcdn.cn/vant/user-active.png" type="info">
<van-button icon="https://img.yzcdn.cn/vant/user-active.png" type="primary">
按钮
</van-button>
```
@@ -128,7 +128,7 @@ app.use(Button);
| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| type | 类型，可选值为 `primary` `info` `warning` `danger` | _string_ | `default` |
| type | 类型，可选值为 `primary` `success` `warning` `danger` | _string_ | `default` |
| size | 尺寸，可选值为 `large` `small` `mini` | _string_ | `normal` |
| text | 按钮文字 | _string_ | - |
| color `v2.1.8` | 按钮颜色，支持传入`linear-gradient`渐变色 | _string_ | - |

18
src/button/demo/index.vue
View File

@@ -3,7 +3,7 @@
<demo-block :title="t('type')">
<div class="demo-button-row">
<van-button type="primary">{{ t('primary') }}</van-button>
<van-button type="info">{{ t('info') }}</van-button>
<van-button type="success">{{ t('success') }}</van-button>
<van-button type="default">{{ t('default') }}</van-button>
</div>
<van-button type="danger">{{ t('danger') }}</van-button>
@@ -12,28 +12,28 @@
<demo-block :title="t('plain')">
<van-button plain type="primary" :text="t('plain')" />
<van-button plain type="info" :text="t('plain')" />
<van-button plain type="success" :text="t('plain')" />
</demo-block>
<demo-block :title="t('hairline')">
<van-button plain hairline type="primary" :text="t('hairlineButton')" />
<van-button plain hairline type="info" :text="t('hairlineButton')" />
<van-button plain hairline type="success" :text="t('hairlineButton')" />
</demo-block>
<demo-block :title="t('disabled')">
<van-button disabled type="primary" :text="t('disabled')" />
<van-button disabled type="info" :text="t('disabled')" />
<van-button disabled type="success" :text="t('disabled')" />
</demo-block>
<demo-block :title="t('loadingStatus')">
<van-button loading type="primary" />
<van-button loading type="primary" loading-type="spinner" />
<van-button loading :loading-text="t('loadingText')" type="info" />
<van-button loading :loading-text="t('loadingText')" type="success" />
</demo-block>
<demo-block :title="t('shape')">
<van-button type="primary" square :text="t('square')" />
<van-button type="info" round :text="t('round')" />
<van-button type="success" round :text="t('round')" />
</demo-block>
<demo-block :title="t('icon')">
@@ -41,7 +41,7 @@
<van-button type="primary" icon="plus" :text="t('button')" />
<van-button
plain
type="info"
type="primary"
icon="https://img.yzcdn.cn/vant/user-active.png"
:text="t('button')"
/>
@@ -89,7 +89,7 @@ export default {
shape: '按钮形状',
default: '默认按钮',
primary: '主要按钮',
info: '信息按钮',
success: '成功按钮',
danger: '危险按钮',
warning: '警告按钮',
large: '大号按钮',
@@ -118,7 +118,7 @@ export default {
shape: 'Shape',
default: 'Default',
primary: 'Primary',
info: 'Info',
success: 'Success',
danger: 'Danger',
warning: 'Warning',
large: 'Large',

12
src/button/index.less
View File

@@ -53,10 +53,10 @@
border: @button-border-width solid @button-primary-border-color;
}
&--info {
color: @button-info-color;
background-color: @button-info-background-color;
border: @button-border-width solid @button-info-border-color;
&--success {
color: @button-success-color;
background-color: @button-success-background-color;
border: @button-border-width solid @button-success-border-color;
}
&--danger {
@@ -78,8 +78,8 @@
color: @button-primary-background-color;
}
&.van-button--info {
color: @button-info-background-color;
&.van-button--success {
color: @button-success-background-color;
}
&.van-button--danger {