mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-05-22 22:49:15 +08:00
[Improvement] Button: add plain prop (#1444)
This commit is contained in:
neverland
GitHub
parent
38fbd14161
commit
7c3d3db630
@ -6,6 +6,12 @@
|
||||
<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>
|
||||
<van-button type="danger" plain>{{ $t('danger') }}</van-button>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('title2')">
|
||||
<van-button size="large">{{ $t('large') }}</van-button>
|
||||
<van-button size="normal">{{ $t('normal') }}</van-button>
|
||||
@ -27,19 +33,6 @@
|
||||
{{ $t('button') }}
|
||||
</van-button>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('title5')">
|
||||
<van-button type="primary" bottom-action>{{ $t('button') }}</van-button>
|
||||
|
||||
<van-row>
|
||||
<van-col span="12">
|
||||
<van-button bottom-action>{{ $t('button') }}</van-button>
|
||||
</van-col>
|
||||
<van-col span="12">
|
||||
<van-button type="primary" bottom-action>{{ $t('button') }}</van-button>
|
||||
</van-col>
|
||||
</van-row>
|
||||
</demo-block>
|
||||
</demo-section>
|
||||
</template>
|
||||
|
||||
@ -58,7 +51,8 @@ export default {
|
||||
large: '大号按钮',
|
||||
normal: '普通按钮',
|
||||
small: '小型按钮',
|
||||
mini: '迷你按钮'
|
||||
mini: '迷你按钮',
|
||||
plain: '朴素按钮'
|
||||
},
|
||||
'en-US': {
|
||||
title1: 'Type',
|
||||
@ -72,7 +66,8 @@ export default {
|
||||
large: 'Large',
|
||||
normal: 'Normal',
|
||||
small: 'Small',
|
||||
mini: 'Mini'
|
||||
mini: 'Mini',
|
||||
plain: 'Plain'
|
||||
}
|
||||
}
|
||||
};
|
||||
@ -83,8 +78,7 @@ export default {
|
||||
.van-button {
|
||||
user-select: none;
|
||||
|
||||
&--large,
|
||||
&--bottom-action {
|
||||
&--large {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
|
||||
@ -17,6 +17,14 @@ Vue.use(Button);
|
||||
<van-button type="danger">Danger</van-button>
|
||||
```
|
||||
|
||||
#### Plain
|
||||
|
||||
```html
|
||||
<van-button type="default" plain>Default</van-button>
|
||||
<van-button type="primary" plain>Primary</van-button>
|
||||
<van-button type="danger" plain>Danger</van-button>
|
||||
```
|
||||
|
||||
#### Size
|
||||
|
||||
```html
|
||||
@ -48,21 +56,6 @@ Use `tag` prop to custom button tag
|
||||
</van-button>
|
||||
```
|
||||
|
||||
#### Action Button
|
||||
|
||||
```html
|
||||
<van-button type="primary" bottom-action>Button</van-button>
|
||||
|
||||
<van-row>
|
||||
<van-col span="12">
|
||||
<van-button bottom-action>Button</van-button>
|
||||
</van-col>
|
||||
<van-col span="12">
|
||||
<van-button type="primary" bottom-action>Button</van-button>
|
||||
</van-col>
|
||||
</van-row>
|
||||
```
|
||||
|
||||
### API
|
||||
|
||||
| Attribute | Description | Type | Default |
|
||||
@ -72,10 +65,10 @@ Use `tag` prop to custom button tag
|
||||
| text | Text | `String` | - |
|
||||
| tag | Tag | `String` | `button` |
|
||||
| native-type | Native Type Attribute | `String` | `''` |
|
||||
| disabled | Whether disable button | `Boolean` | `false` |
|
||||
| plain | Whether to be plain button | `Boolean` | `false` |
|
||||
| disabled | Whether to disable button | `Boolean` | `false` |
|
||||
| loading | Whether show loading status | `Boolean` | `false` |
|
||||
| block | Whether to set display block | `Boolean` | `false` |
|
||||
| bottom-action | Whether to be action button | `Boolean` | `false` |
|
||||
|
||||
### Event
|
||||
|
||||
|
||||
@ -8,6 +8,7 @@
|
||||
size,
|
||||
{
|
||||
block,
|
||||
plain,
|
||||
loading,
|
||||
disabled,
|
||||
unclickable: disabled || loading,
|
||||
@ -32,6 +33,7 @@ export default create({
|
||||
props: {
|
||||
text: String,
|
||||
block: Boolean,
|
||||
plain: Boolean,
|
||||
loading: Boolean,
|
||||
disabled: Boolean,
|
||||
nativeType: String,
|
||||
|
||||
@ -10,6 +10,14 @@ exports[`renders demo correctly 1`] = `
|
||||
<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>
|
||||
<button class="van-button van-button--danger van-button--normal van-button--plain">
|
||||
<!----><span class="van-button__text">危险按钮</span></button>
|
||||
</div>
|
||||
<div>
|
||||
<button class="van-button van-button--default van-button--large">
|
||||
<!----><span class="van-button__text">大号按钮</span></button>
|
||||
@ -37,19 +45,5 @@ exports[`renders demo correctly 1`] = `
|
||||
按钮
|
||||
</span></a>
|
||||
</div>
|
||||
<div>
|
||||
<button class="van-button van-button--primary van-button--normal van-button--bottom-action">
|
||||
<!----><span class="van-button__text">按钮</span></button>
|
||||
<div class="van-row">
|
||||
<div class="van-col van-col--12">
|
||||
<button class="van-button van-button--default van-button--normal van-button--bottom-action">
|
||||
<!----><span class="van-button__text">按钮</span></button>
|
||||
</div>
|
||||
<div class="van-col van-col--12">
|
||||
<button class="van-button van-button--primary van-button--normal van-button--bottom-action">
|
||||
<!----><span class="van-button__text">按钮</span></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
@ -18,6 +18,14 @@ Vue.use(Button);
|
||||
<van-button type="danger">危险按钮</van-button>
|
||||
```
|
||||
|
||||
#### 朴素按钮
|
||||
|
||||
```html
|
||||
<van-button type="default" plain>默认按钮</van-button>
|
||||
<van-button type="primary" plain>主要按钮</van-button>
|
||||
<van-button type="danger" plain>危险按钮</van-button>
|
||||
```
|
||||
|
||||
#### 按钮尺寸
|
||||
支持`large`、`normal`、`small`、`mini`四种尺寸，默认为`normal`
|
||||
|
||||
@ -52,20 +60,6 @@ Vue.use(Button);
|
||||
</van-button>
|
||||
```
|
||||
|
||||
#### 页面底部操作按钮
|
||||
|
||||
```html
|
||||
<van-button type="primary" bottom-action>按钮</van-button>
|
||||
|
||||
<van-row>
|
||||
<van-col span="12">
|
||||
<van-button bottom-action>按钮</van-button>
|
||||
</van-col>
|
||||
<van-col span="12">
|
||||
<van-button type="primary" bottom-action>按钮</van-button>
|
||||
</van-col>
|
||||
</van-row>
|
||||
```
|
||||
|
||||
### API
|
||||
|
||||
@ -76,10 +70,10 @@ Vue.use(Button);
|
||||
| text | 按钮文字 | `String` | - |
|
||||
| tag | 按钮 HTML 标签 | `String` | `button` |
|
||||
| native-type | 按钮类型（原生） | `String` | - |
|
||||
| plain | 是否为朴素按钮 | `Boolean` | `false` |
|
||||
| disabled | 是否禁用 | `Boolean` | `false` |
|
||||
| loading | 是否显示为加载状态 | `Boolean` | `false` |
|
||||
| block | 是否为块级元素 | `Boolean` | `false` |
|
||||
| bottom-action | 是否为底部行动按钮 | `Boolean` | `false` |
|
||||
|
||||
### Event
|
||||
|
||||
|
||||
@ -53,6 +53,18 @@
|
||||
border: 1px solid $button-danger-border-color;
|
||||
}
|
||||
|
||||
&--plain {
|
||||
background-color: $white;
|
||||
|
||||
&.van-button--primary {
|
||||
color: $button-primary-background-color;
|
||||
}
|
||||
|
||||
&.van-button--danger {
|
||||
color: $button-danger-background-color;
|
||||
}
|
||||
}
|
||||
|
||||
&--large {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user