docs: complete some examples of button/cell/checkbox/radio

This commit is contained in:
linrz
2019-12-22 20:33:47 +08:00
committed by neverland
parent 7b905a6de8
commit f0815bc405
16 changed files with 209 additions and 8 deletions

View File

@@ -89,6 +89,11 @@ Vue.use(Button);
<van-button color="linear-gradient(to right, #4bb0ff, #6149f6)">Gradient</van-button>
```
### Block Element
```html
<van-button type="primary" block>Display as a block element</van-button>
```
## API
### Props

View File

@@ -109,6 +109,15 @@ Vue.use(Button);
<van-button color="linear-gradient(to right, #4bb0ff, #6149f6)">渐变色按钮</van-button>
```
### 块级元素按钮
通过`block`属性可以设置按钮的元素类型
```html
<van-button type="primary" block>块级元素按钮</van-button>
```
## API
### Props

View File

@@ -64,6 +64,13 @@
<van-button plain color="#7232dd" :text="$t('pure')" />
<van-button color="linear-gradient(to right, #4bb0ff, #6149f6)" :text="$t('gradient')" />
</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>
</template>
@@ -96,7 +103,8 @@ export default {
vueRoute: '路由跳转',
customColor: '自定义颜色',
pure: '单色按钮',
gradient: '渐变色按钮'
gradient: '渐变色按钮',
blockElement: '块级元素按钮'
},
'en-US': {
type: 'Type',
@@ -124,7 +132,8 @@ export default {
vueRoute: 'Vue Router',
customColor: 'Custom Color',
pure: 'Pure',
gradient: 'Gradient'
gradient: 'Gradient',
blockElement: 'Display as a block element'
}
}
};

View File

@@ -23,5 +23,8 @@ exports[`renders demo correctly 1`] = `
<div><button class="van-button van-button--primary van-button--large"><span class="van-button__text">大号按钮</span></button> <button class="van-button van-button--primary van-button--normal"><span class="van-button__text">普通按钮</span></button> <button class="van-button van-button--primary van-button--small"><span class="van-button__text">小型按钮</span></button> <button class="van-button van-button--primary van-button--mini"><span class="van-button__text">迷你按钮</span></button></div>
<div><button class="van-button van-button--primary van-button--normal"><span class="van-button__text">URL 跳转</span></button> <button class="van-button van-button--primary van-button--normal"><span class="van-button__text">路由跳转</span></button></div>
<div><button class="van-button van-button--default van-button--normal" style="color: rgb(255, 255, 255); background: rgb(114, 50, 221); border-color: #7232dd;"><span class="van-button__text">单色按钮</span></button> <button class="van-button van-button--default van-button--normal van-button--plain" style="color: rgb(114, 50, 221); border-color: #7232dd;"><span class="van-button__text">单色按钮</span></button> <button class="van-button van-button--default van-button--normal" style="color: rgb(255, 255, 255); border: 0px;"><span class="van-button__text">渐变色按钮</span></button></div>
<div>
<div class="demo-button-row"><button class="van-button van-button--primary van-button--normal"><span class="van-button__text">普通按钮</span></button></div> <button class="van-button van-button--primary van-button--normal van-button--block"><span class="van-button__text">块级元素按钮</span></button>
</div>
</div>
`;