blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-09-06 07:49:45 +08:00
Code Issues Projects Releases Wiki Activity

docs(Button): update block element section

Browse Source
This commit is contained in:
陈嘉涵 2020-01-18 11:06:09 +08:00
parent 735ccaa042
commit 3a18622125
3 changed files with 18 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
src/button/README.md
View File

@ -74,6 +74,12 @@ Vue.use(Button);
<van-button type="primary" size="mini">Mini</van-button> <van-button type="primary" size="mini">Mini</van-button>
``` ```
### Block Element
```html
<van-button type="primary" block>Block Element</van-button>
```
### Route ### Route
```html ```html
@ -89,11 +95,6 @@ Vue.use(Button);
<van-button color="linear-gradient(to right, #4bb0ff, #6149f6)">Gradient</van-button> <van-button color="linear-gradient(to right, #4bb0ff, #6149f6)">Gradient</van-button>
``` ```
### Block Element
```html
<van-button type="primary" block>Block Element</van-button>
```
## API ## API
### Props ### Props

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

@ -90,6 +90,14 @@ Vue.use(Button);
<van-button type="primary" size="mini">迷你按钮</van-button> <van-button type="primary" size="mini">迷你按钮</van-button>
``` ```
### 块级元素
按钮在默认情况下为行内块级元素，通过`block`属性可以将按钮的元素类型设置为块级元素
```html
<van-button type="primary" block>块级元素</van-button>
```
### 页面导航 ### 页面导航
可以通过`url`属性进行 URL 跳转，或通过`to`属性进行路由跳转 可以通过`url`属性进行 URL 跳转，或通过`to`属性进行路由跳转
@ -109,15 +117,6 @@ Vue.use(Button);
<van-button color="linear-gradient(to right, #4bb0ff, #6149f6)">渐变色按钮</van-button> <van-button color="linear-gradient(to right, #4bb0ff, #6149f6)">渐变色按钮</van-button>
``` ```
### 块级元素
通过`block`属性可以将按钮的元素类型设置为块级元素
```html
<van-button type="primary" block>块级元素</van-button>
```
## API ## API
### Props ### Props

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

@ -54,6 +54,10 @@
<van-button type="primary" size="mini">{{ $t('mini') }}</van-button> <van-button type="primary" size="mini">{{ $t('mini') }}</van-button>
</demo-block> </demo-block>
<demo-block :title="$t('blockElement')">
<van-button type="primary" block>{{ $t('blockElement') }}</van-button>
</demo-block>
<demo-block :title="$t('router')"> <demo-block :title="$t('router')">
<van-button :text="$t('urlRoute')" type="primary" url="/vant/mobile.html" /> <van-button :text="$t('urlRoute')" type="primary" url="/vant/mobile.html" />
<van-button :text="$t('vueRoute')" type="primary" to="index" /> <van-button :text="$t('vueRoute')" type="primary" to="index" />
@ -64,13 +68,6 @@
<van-button plain color="#7232dd" :text="$t('pure')" /> <van-button plain color="#7232dd" :text="$t('pure')" />
<van-button color="linear-gradient(to right, #4bb0ff, #6149f6)" :text="$t('gradient')" /> <van-button color="linear-gradient(to right, #4bb0ff, #6149f6)" :text="$t('gradient')" />
</demo-block> </demo-block>
<demo-block :title="$t('blockElement')">
<div class="demo-button-row">
<van-button type="primary">{{ $t('normal') }}</van-button>
</div>
<van-button type="primary" block>{{ $t('blockElement') }}</van-button>
</demo-block>
</demo-section> </demo-section>
</template> </template>