mirror of
https://github.com/youzan/vant.git
synced 2025-10-22 11:54:02 +00:00
docs: complete some examples of button/cell/checkbox/radio
This commit is contained in:
@@ -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
|
||||
|
@@ -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
|
||||
|
@@ -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'
|
||||
}
|
||||
}
|
||||
};
|
||||
|
@@ -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>
|
||||
`;
|
||||
|
Reference in New Issue
Block a user