[Doc] beautify demo
This commit is contained in:
@@ -78,10 +78,30 @@
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('size')">
|
||||
<van-button size="large">{{ $t('large') }}</van-button>
|
||||
<van-button size="normal">{{ $t('normal') }}</van-button>
|
||||
<van-button size="small">{{ $t('small') }}</van-button>
|
||||
<van-button size="mini">{{ $t('mini') }}</van-button>
|
||||
<van-button
|
||||
type="primary"
|
||||
size="large"
|
||||
>
|
||||
{{ $t('large') }}
|
||||
</van-button>
|
||||
<van-button
|
||||
type="primary"
|
||||
size="normal"
|
||||
>
|
||||
{{ $t('normal') }}
|
||||
</van-button>
|
||||
<van-button
|
||||
type="primary"
|
||||
size="small"
|
||||
>
|
||||
{{ $t('small') }}
|
||||
</van-button>
|
||||
<van-button
|
||||
type="primary"
|
||||
size="mini"
|
||||
>
|
||||
{{ $t('mini') }}
|
||||
</van-button>
|
||||
</demo-block>
|
||||
</demo-section>
|
||||
</template>
|
||||
|
||||
@@ -63,10 +63,10 @@ Vue.use(Button);
|
||||
### Size
|
||||
|
||||
```html
|
||||
<van-button size="large">Large</van-button>
|
||||
<van-button size="normal">Normal</van-button>
|
||||
<van-button size="small">Small</van-button>
|
||||
<van-button size="mini">Mini</van-button>
|
||||
<van-button type="primary" size="large">Large</van-button>
|
||||
<van-button type="primary" size="normal">Normal</van-button>
|
||||
<van-button type="primary" size="small">Small</van-button>
|
||||
<van-button type="primary" size="mini">Mini</van-button>
|
||||
```
|
||||
|
||||
## API
|
||||
|
||||
@@ -14,6 +14,14 @@ exports[`renders demo correctly 1`] = `
|
||||
<div class="van-loading van-loading--spinner"><span class="van-loading__spinner van-loading__spinner--spinner" style="width: 20px; height: 20px;"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></span></div><span class="van-button__loading-text">加载中...</span>
|
||||
</button></div>
|
||||
<div><button class="van-button van-button--primary 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><button class="van-button van-button--default van-button--large"><span class="van-button__text">大号按钮</span></button> <button class="van-button van-button--default van-button--normal"><span class="van-button__text">普通按钮</span></button> <button class="van-button van-button--default van-button--small"><span class="van-button__text">小型按钮</span></button> <button class="van-button van-button--default van-button--mini"><span class="van-button__text">迷你按钮</span></button></div>
|
||||
<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>
|
||||
`;
|
||||
|
||||
@@ -73,10 +73,10 @@ Vue.use(Button);
|
||||
支持`large`、`normal`、`small`、`mini`四种尺寸,默认为`normal`
|
||||
|
||||
```html
|
||||
<van-button size="large">大号按钮</van-button>
|
||||
<van-button size="normal">普通按钮</van-button>
|
||||
<van-button size="small">小型按钮</van-button>
|
||||
<van-button size="mini">迷你按钮</van-button>
|
||||
<van-button type="primary" size="large">大号按钮</van-button>
|
||||
<van-button type="primary" size="normal">普通按钮</van-button>
|
||||
<van-button type="primary" size="small">小型按钮</van-button>
|
||||
<van-button type="primary" size="mini">迷你按钮</van-button>
|
||||
```
|
||||
|
||||
## API
|
||||
|
||||
Reference in New Issue
Block a user