blackteay/vant-weapp
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant-weapp.git synced 2025-04-06 03:58:05 +08:00
Code Issues Projects Releases Wiki Activity

docs(Button): add gradient color demo (#2041)

Browse Source
This commit is contained in:
neverland 2019-09-18 15:23:41 +08:00 committed by GitHub
parent f4a58f3ac3
commit 70296c1c3c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 18 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
example/pages/button/index.wxml
View File

@ -11,28 +11,28 @@
<demo-block title="朴素按钮" padding>
<van-button type="primary" plain class="demo-margin-right">朴素按钮</van-button>
<van-button type="danger" plain>朴素按钮</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="danger" plain hairline>细边框按钮</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="danger" disabled>禁用状态</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="danger" loading-text="加载中..." />
<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="danger" round>圆形按钮</van-button>
<van-button type="info" round>圆形按钮</van-button>
</demo-block>
<demo-block title="图标按钮" padding>
@ -49,7 +49,8 @@
</demo-block>
<demo-block title="自定义颜色" padding>
<van-button color="#7232dd" class="demo-margin-right">自定义颜色</van-button>
<van-button color="#7232dd" plain>自定义颜色</van-button>
<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-section>

19
packages/button/README.md
View File

@ -30,7 +30,7 @@
```html
<van-button plain type="primary">朴素按钮</van-button>
<van-button plain type="danger">朴素按钮</van-button>
<van-button plain type="info">朴素按钮</van-button>
```
### 细边框
@ -39,7 +39,7 @@
```html
<van-button plain hairline type="primary">细边框按钮</van-button>
<van-button plain hairline type="danger">细边框按钮</van-button>
<van-button plain hairline type="info">细边框按钮</van-button>
```
### 禁用状态
@ -48,7 +48,7 @@
```html
<van-button disabled type="primary">禁用状态</van-button>
<van-button disabled type="danger">禁用状态</van-button>
<van-button disabled type="info">禁用状态</van-button>
```
### 加载状态
@ -56,7 +56,7 @@
```html
<van-button loading type="primary" />
<van-button loading type="primary" loading-type="spinner" />
<van-button loading type="danger" loading-text="加载中..." />
<van-button loading type="info" loading-text="加载中..." />
```
### 图标按钮
@ -66,14 +66,14 @@
```html
<van-button icon="star-o" type="primary" />
<van-button icon="star-o" type="primary">按钮</van-button>
<van-button icon="https://img.yzcdn.cn/vant/logo.png" type="danger">按钮</van-button>
<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="danger">圆形按钮</van-button>
<van-button round type="info">圆形按钮</van-button>
```
### 按钮尺寸
@ -92,8 +92,9 @@
通过`color`属性可以自定义按钮的颜色
```html
<van-button color="#7232dd">自定义颜色</van-button>
<van-button color="#7232dd" plain>自定义颜色</van-button>
<van-button color="#7232dd">单色按钮</van-button>
<van-button color="#7232dd" plain>单色按钮</van-button>
<van-button color="linear-gradient(to right, #4bb0ff, #6149f6)">渐变色按钮</van-button>
```
## API
@ -105,7 +106,7 @@
| id | 标识符 | *string* | - | - |
| type | 按钮类型，可选值为 `primary` `info` `warning` `danger` | *string* | `default` | - |
| size | 按钮尺寸，可选值为 `normal` `large` `small` `mini` | *string* | `normal` | - |
| color | 按钮颜色，支持传入`linear-gradient`渐变色 | *string* | - | - |
| color | 按钮颜色，支持传入`linear-gradient`渐变色 | *string* | - | 1.0.0 |
| icon | 左侧图标名称或图片链接，可选值见 Icon 组件 | *string* | - | - |
| plain | 是否为朴素按钮 | *boolean* | `false` | - |
| block | 是否为块级元素 | *boolean* | `false` | - |