mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
[improvement] Button: add round prop (#1885)
This commit is contained in:
neverland
GitHub
parent
a6d4d2d74a
commit
beebeaf5b7
@ -31,13 +31,12 @@
|
||||
|
||||
<demo-block :title="$t('title3')">
|
||||
<van-button loading />
|
||||
<van-button loading type="primary" />
|
||||
<van-button loading type="danger" />
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('title4')">
|
||||
<van-button tag="a" href="https://www.youzan.com" target="_blank">
|
||||
{{ $t('button') }}
|
||||
</van-button>
|
||||
<van-button type="danger" square>{{ $t('square') }}</van-button>
|
||||
<van-button type="danger" round>{{ $t('round') }}</van-button>
|
||||
</demo-block>
|
||||
</demo-section>
|
||||
</template>
|
||||
@ -49,8 +48,7 @@ export default {
|
||||
title1: '按钮类型',
|
||||
title2: '按钮尺寸',
|
||||
title3: '加载状态',
|
||||
title4: '自定义按钮标签',
|
||||
title5: '页面底部操作按钮',
|
||||
title4: '按钮形状',
|
||||
default: '默认按钮',
|
||||
primary: '主要按钮',
|
||||
danger: '危险按钮',
|
||||
@ -59,14 +57,15 @@ export default {
|
||||
normal: '普通按钮',
|
||||
small: '小型按钮',
|
||||
mini: '迷你按钮',
|
||||
plain: '朴素按钮'
|
||||
plain: '朴素按钮',
|
||||
square: '方形按钮',
|
||||
round: '圆形按钮'
|
||||
},
|
||||
'en-US': {
|
||||
title1: 'Type',
|
||||
title2: 'Size',
|
||||
title3: 'Loading',
|
||||
title4: 'Custom Tag',
|
||||
title5: 'Action Button',
|
||||
title4: 'Shape',
|
||||
default: 'Default',
|
||||
primary: 'Primary',
|
||||
danger: 'Danger',
|
||||
@ -75,7 +74,9 @@ export default {
|
||||
normal: 'Normal',
|
||||
small: 'Small',
|
||||
mini: 'Mini',
|
||||
plain: 'Plain'
|
||||
plain: 'Plain',
|
||||
square: 'Square',
|
||||
round: 'Round'
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
@ -49,13 +49,11 @@ Vue.use(Button);
|
||||
<van-button loading type="primary" />
|
||||
```
|
||||
|
||||
#### Custom Tag
|
||||
Use `tag` prop to custom button tag
|
||||
#### Shape
|
||||
|
||||
```html
|
||||
<van-button tag="a" href="https://www.youzan.com" target="_blank">
|
||||
Button
|
||||
</van-button>
|
||||
<van-button type="danger" square>Square</van-button>
|
||||
<van-button type="danger" round>Round</van-button>
|
||||
```
|
||||
|
||||
### API
|
||||
@ -71,6 +69,7 @@ Use `tag` prop to custom button tag
|
||||
| disabled | Whether to disable button | `Boolean` | `false` |
|
||||
| loading | Whether show loading status | `Boolean` | `false` |
|
||||
| block | Whether to set display block | `Boolean` | `false` |
|
||||
| round | Whether to be round button | `Boolean` | `false` |
|
||||
| square | Whether to be square button | `Boolean` | `false` |
|
||||
|
||||
### Event
|
||||
|
||||
@ -9,6 +9,7 @@
|
||||
{
|
||||
block,
|
||||
plain,
|
||||
round,
|
||||
square,
|
||||
loading,
|
||||
disabled,
|
||||
@ -35,6 +36,7 @@ export default create({
|
||||
text: String,
|
||||
block: Boolean,
|
||||
plain: Boolean,
|
||||
round: Boolean,
|
||||
square: Boolean,
|
||||
loading: Boolean,
|
||||
disabled: Boolean,
|
||||
|
||||
@ -31,14 +31,13 @@ exports[`renders demo correctly 1`] = `
|
||||
<button class="van-button van-button--default van-button--normal van-button--loading van-button--unclickable">
|
||||
<div class="van-loading van-loading--circular van-loading" style="color:#c9c9c9;width:20px;height:20px;"><span class="van-loading__spinner van-loading__spinner--circular"> <svg viewBox="25 25 50 50" class="van-loading__circular"><circle cx="50" cy="50" r="20" fill="none"></circle></svg></span></div>
|
||||
</button>
|
||||
<button class="van-button van-button--primary van-button--normal van-button--loading van-button--unclickable">
|
||||
<button class="van-button van-button--danger van-button--normal van-button--loading van-button--unclickable">
|
||||
<div class="van-loading van-loading--circular van-loading" style="color:;width:20px;height:20px;"><span class="van-loading__spinner van-loading__spinner--circular"> <svg viewBox="25 25 50 50" class="van-loading__circular"><circle cx="50" cy="50" r="20" fill="none"></circle></svg></span></div>
|
||||
</button>
|
||||
</div>
|
||||
<div>
|
||||
<a href="https://www.youzan.com" target="_blank" class="van-button van-button--default van-button--normal"><span class="van-button__text">
|
||||
按钮
|
||||
</span></a>
|
||||
<button class="van-button van-button--danger van-button--normal van-button--square"><span class="van-button__text">方形按钮</span></button>
|
||||
<button class="van-button van-button--danger van-button--normal van-button--round"><span class="van-button__text">圆形按钮</span></button>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
@ -39,6 +39,7 @@ Vue.use(Button);
|
||||
```
|
||||
|
||||
#### 禁用状态
|
||||
|
||||
通过`disabled`属性来禁用按钮，此时按钮不可点击
|
||||
|
||||
```html
|
||||
@ -52,14 +53,11 @@ Vue.use(Button);
|
||||
<van-button loading type="primary" />
|
||||
```
|
||||
|
||||
#### 自定义按钮标签
|
||||
|
||||
按钮标签默认为`button`，可以使用`tag`属性来修改按钮标签
|
||||
#### 按钮形状
|
||||
|
||||
```html
|
||||
<van-button tag="a" href="https://www.youzan.com" target="_blank">
|
||||
按钮
|
||||
</van-button>
|
||||
<van-button type="danger" square>方形按钮</van-button>
|
||||
<van-button type="danger" round>圆形按钮</van-button>
|
||||
```
|
||||
|
||||
|
||||
@ -73,9 +71,10 @@ Vue.use(Button);
|
||||
| tag | 按钮 HTML 标签 | `String` | `button` |
|
||||
| native-type | 按钮类型（原生） | `String` | - |
|
||||
| plain | 是否为朴素按钮 | `Boolean` | `false` |
|
||||
| disabled | 是否禁用 | `Boolean` | `false` |
|
||||
| disabled | 是否禁用按钮 | `Boolean` | `false` |
|
||||
| loading | 是否显示为加载状态 | `Boolean` | `false` |
|
||||
| block | 是否为块级元素 | `Boolean` | `false` |
|
||||
| round | 是否为圆形按钮 | `Boolean` | `false` |
|
||||
| square | 是否为方形按钮 | `Boolean` | `false` |
|
||||
|
||||
### Event
|
||||
|
||||
@ -140,6 +140,10 @@
|
||||
border: 1px solid $button-disabled-border-color;
|
||||
}
|
||||
|
||||
&--round {
|
||||
border-radius: 10em;
|
||||
}
|
||||
|
||||
&--square {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user