mirror of
https://gitee.com/vant-contrib/vant-weapp.git
synced 2025-04-05 19:41:45 +08:00
docs(Button): adjust demo order
This commit is contained in:
chenjiahan
neverland
parent
163ac52542
commit
713b31f799
@ -1,61 +1,59 @@
|
||||
<demo-block title="按钮类型" padding>
|
||||
<view class="row">
|
||||
<van-button class="demo-margin-right">默认按钮</van-button>
|
||||
<van-button type="primary" class="demo-margin-right">主要按钮</van-button>
|
||||
<van-button type="info" class="demo-margin-right">信息按钮</van-button>
|
||||
</view>
|
||||
<van-button type="danger" class="demo-margin-right">危险按钮</van-button>
|
||||
<van-button type="warning">警告按钮</van-button>
|
||||
</demo-block>
|
||||
|
||||
<demo-block title="按钮类型" padding>
|
||||
<view class="row">
|
||||
<van-button class="demo-margin-right">默认按钮</van-button>
|
||||
<van-button type="primary" class="demo-margin-right">主要按钮</van-button>
|
||||
<van-button type="info" class="demo-margin-right">信息按钮</van-button>
|
||||
</view>
|
||||
<van-button type="danger" class="demo-margin-right">危险按钮</van-button>
|
||||
<van-button type="warning">警告按钮</van-button>
|
||||
</demo-block>
|
||||
<demo-block title="朴素按钮" padding>
|
||||
<van-button type="primary" plain class="demo-margin-right">朴素按钮</van-button>
|
||||
<van-button type="info" plain>朴素按钮</van-button>
|
||||
</demo-block>
|
||||
|
||||
<demo-block title="朴素按钮" padding>
|
||||
<van-button type="primary" plain class="demo-margin-right">朴素按钮</van-button>
|
||||
<van-button type="info" plain>朴素按钮</van-button>
|
||||
</demo-block>
|
||||
<demo-block title="细边框" padding>
|
||||
<van-button type="primary" plain hairline class="demo-margin-right">细边框按钮</van-button>
|
||||
<van-button type="info" plain hairline>细边框按钮</van-button>
|
||||
</demo-block>
|
||||
|
||||
<demo-block title="细边框" padding>
|
||||
<van-button type="primary" plain hairline class="demo-margin-right">细边框按钮</van-button>
|
||||
<van-button type="info" plain hairline>细边框按钮</van-button>
|
||||
</demo-block>
|
||||
<demo-block title="禁用状态" padding>
|
||||
<van-button type="primary" disabled class="demo-margin-right">禁用状态</van-button>
|
||||
<van-button type="info" disabled>禁用状态</van-button>
|
||||
</demo-block>
|
||||
|
||||
<demo-block title="禁用状态" padding>
|
||||
<van-button type="primary" disabled class="demo-margin-right">禁用状态</van-button>
|
||||
<van-button type="info" disabled>禁用状态</van-button>
|
||||
</demo-block>
|
||||
<demo-block title="加载状态" padding>
|
||||
<van-button loading type="primary" class="demo-margin-right" />
|
||||
<van-button loading type="primary" loading-type="spinner" class="demo-margin-right" />
|
||||
<van-button loading type="info" loading-text="加载中..." />
|
||||
</demo-block>
|
||||
|
||||
<demo-block title="加载状态" padding>
|
||||
<van-button loading type="primary" class="demo-margin-right" />
|
||||
<van-button loading type="primary" loading-type="spinner" class="demo-margin-right" />
|
||||
<van-button loading type="info" loading-text="加载中..." />
|
||||
</demo-block>
|
||||
<demo-block title="按钮形状" padding>
|
||||
<van-button type="primary" square class="demo-margin-right">方形按钮</van-button>
|
||||
<van-button type="info" round>圆形按钮</van-button>
|
||||
</demo-block>
|
||||
|
||||
<demo-block title="按钮形状" padding>
|
||||
<van-button type="primary" square class="demo-margin-right">方形按钮</van-button>
|
||||
<van-button type="info" round>圆形按钮</van-button>
|
||||
</demo-block>
|
||||
<demo-block title="图标按钮" padding>
|
||||
<van-button type="primary" icon="star-o" class="demo-margin-right" />
|
||||
<van-button type="primary" icon="star-o" class="demo-margin-right">按钮</van-button>
|
||||
<van-button plain type="primary" icon="https://img.yzcdn.cn/vant/logo.png">按钮</van-button>
|
||||
</demo-block>
|
||||
|
||||
<demo-block title="图标按钮" padding>
|
||||
<van-button type="primary" icon="star-o" class="demo-margin-right" />
|
||||
<van-button type="primary" icon="star-o" class="demo-margin-right">按钮</van-button>
|
||||
<van-button plain type="primary" icon="https://img.yzcdn.cn/vant/logo.png">按钮</van-button>
|
||||
</demo-block>
|
||||
<demo-block title="按钮尺寸" padding>
|
||||
<van-button type="primary" size="large" block custom-class="demo-margin-bottom">大号按钮</van-button>
|
||||
<van-button type="primary" class="demo-margin-right">普通按钮</van-button>
|
||||
<van-button type="primary" size="small" class="demo-margin-right">小型按钮</van-button>
|
||||
<van-button type="primary" size="mini">迷你按钮</van-button>
|
||||
</demo-block>
|
||||
|
||||
<demo-block title="按钮尺寸" padding>
|
||||
<van-button type="primary" size="large" block custom-class="demo-margin-bottom">大号按钮</van-button>
|
||||
<van-button type="primary" class="demo-margin-right">普通按钮</van-button>
|
||||
<van-button type="primary" size="small" class="demo-margin-right">小型按钮</van-button>
|
||||
<van-button type="primary" size="mini">迷你按钮</van-button>
|
||||
</demo-block>
|
||||
|
||||
<demo-block title="自定义颜色" padding>
|
||||
<van-button color="#7232dd" class="demo-margin-right">单色按钮</van-button>
|
||||
<van-button color="#7232dd" class="demo-margin-right" plain>单色按钮</van-button>
|
||||
<van-button color="linear-gradient(to right, #4bb0ff, #6149f6)">渐变色按钮</van-button>
|
||||
</demo-block>
|
||||
|
||||
<demo-block title="块级元素" padding>
|
||||
<van-button type="primary" custom-class="demo-margin-bottom">普通按钮</van-button>
|
||||
<van-button type="primary" block>块级元素</van-button>
|
||||
</demo-block>
|
||||
<demo-block title="块级元素" padding>
|
||||
<van-button type="primary" custom-class="demo-margin-bottom">普通按钮</van-button>
|
||||
<van-button type="primary" block>块级元素</van-button>
|
||||
</demo-block>
|
||||
|
||||
<demo-block title="自定义颜色" padding>
|
||||
<van-button color="#7232dd" class="demo-margin-right">单色按钮</van-button>
|
||||
<van-button color="#7232dd" class="demo-margin-right" plain>单色按钮</van-button>
|
||||
<van-button color="linear-gradient(to right, #4bb0ff, #6149f6)">渐变色按钮</van-button>
|
||||
</demo-block>
|
||||
|
||||
@ -59,6 +59,13 @@
|
||||
<van-button loading type="info" loading-text="加载中..." />
|
||||
```
|
||||
|
||||
### 按钮形状
|
||||
|
||||
```html
|
||||
<van-button square type="primary">方形按钮</van-button>
|
||||
<van-button round type="info">圆形按钮</van-button>
|
||||
```
|
||||
|
||||
### 图标按钮
|
||||
|
||||
通过`icon`属性设置按钮图标，支持 Icon 组件里的所有图标，也可以传入图标 URL
|
||||
@ -69,13 +76,6 @@
|
||||
<van-button icon="https://img.yzcdn.cn/vant/logo.png" type="info">按钮</van-button>
|
||||
```
|
||||
|
||||
### 按钮形状
|
||||
|
||||
```html
|
||||
<van-button square type="primary">方形按钮</van-button>
|
||||
<van-button round type="info">圆形按钮</van-button>
|
||||
```
|
||||
|
||||
### 按钮尺寸
|
||||
|
||||
支持`large`、`normal`、`small`、`mini`四种尺寸，默认为`normal`
|
||||
@ -87,6 +87,14 @@
|
||||
<van-button type="primary" size="mini">迷你按钮</van-button>
|
||||
```
|
||||
|
||||
### 块级元素
|
||||
|
||||
通过`block`属性可以将按钮的元素类型设置为块级元素
|
||||
|
||||
```html
|
||||
<van-button type="primary" block>块级元素</van-button>
|
||||
```
|
||||
|
||||
### 自定义颜色
|
||||
|
||||
通过`color`属性可以自定义按钮的颜色
|
||||
@ -97,14 +105,6 @@
|
||||
<van-button color="linear-gradient(to right, #4bb0ff, #6149f6)">渐变色按钮</van-button>
|
||||
```
|
||||
|
||||
### 块级元素
|
||||
|
||||
通过`block`属性可以将按钮的元素类型设置为块级元素
|
||||
|
||||
```html
|
||||
<van-button type="primary" block>块级元素</van-button>
|
||||
```
|
||||
|
||||
## API
|
||||
|
||||
### Props
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user