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

docs(Button/Cell/Checkbox/Radio): update some examples (#2576)

Browse Source 
* docs: complete some examples of  button/cell/checbox/radio

* docs: update button text

* docs: add some usage of button/cell/checbox/radio
This commit is contained in:
linrz 2019-12-23 10:14:26 +08:00 committed by rex
parent 2dbabe7bf3
commit 9f173eac00
13 changed files with 134 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -53,4 +53,9 @@
<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-section>

8
example/pages/cell/index.wxml
View File

@ -79,3 +79,11 @@
<van-icon slot="right-icon" name="search" />
</van-cell>
</demo-block>
<demo-block title="垂直居中">
<van-cell
title="单元格"
value="多行内容多行内容多行内容多行内容"
center
/>
</demo-block>

2
example/pages/checkbox/index.js
View File

@ -5,6 +5,8 @@ Page({
checkbox1: true,
checkbox2: true,
checkbox3: true,
checkboxLabel: true,
checkboxSize: true,
checkboxShape: true,
list: ['a', 'b', 'c'],
result: ['a', 'b'],

24
example/pages/checkbox/index.wxml
View File

@ -26,6 +26,18 @@
</van-checkbox>
</demo-block>
<demo-block title="禁用复选框文本点击">
<van-checkbox
label-disabled
value="{{ checkboxLabel }}"
data-key="checkboxLabel"
custom-class="demo-checkbox"
bind:change="onChange"
>
复选框
</van-checkbox>
</demo-block>
<demo-block title="自定义形状">
<van-checkbox
value="{{ checkboxShape }}"
@ -50,6 +62,18 @@
</van-checkbox>
</demo-block>
<demo-block title="自定义大小">
<van-checkbox
icon-size="25px"
value="{{ checkboxSize }}"
data-key="checkboxSize"
custom-class="demo-checkbox"
bind:change="onChange"
>
复选框
</van-checkbox>
</demo-block>
<demo-block title="自定义图标">
<van-checkbox
use-icon-slot

3
example/pages/radio/index.js
View File

@ -7,6 +7,9 @@ Page({
radio3: '1',
radio4: '1',
radio5: '1',
radioSize: '1',
radioLabel: '1',
radioShape: '1',
icon: {
normal:
'https://img.yzcdn.cn/public_files/2017/10/13/c547715be149dd3faa817e4a948b40c4.png',

33
example/pages/radio/index.wxml
View File

@ -21,6 +21,28 @@
</van-radio-group>
</demo-block>
<demo-block title="禁用单选框文本点击" padding>
<van-radio-group
value="{{ radioLabel }}"
data-key="radioLabel"
bind:change="onChange"
>
<van-radio label-disabled name="1" custom-class="demo-radio">单选框 1</van-radio>
<van-radio label-disabled name="2">单选框 2</van-radio>
</van-radio-group>
</demo-block>
<demo-block title="自定义形状" padding>
<van-radio-group
value="{{ radioShape }}"
data-key="radioShape"
bind:change="onChange"
>
<van-radio name="1" shape="square" custom-class="demo-radio" checked-color="#07c160">单选框</van-radio>
<van-radio name="2" shape="square" checked-color="#07c160">单选框</van-radio>
</van-radio-group>
</demo-block>
<demo-block title="自定义颜色" padding>
<van-radio-group
value="{{ radio3 }}"
@ -32,6 +54,17 @@
</van-radio-group>
</demo-block>
<demo-block title="自定义大小" padding>
<van-radio-group
value="{{ radioSize }}"
data-key="radioSize"
bind:change="onChange"
>
<van-radio name="1" icon-size="20px" custom-class="demo-radio" checked-color="#07c160">单选框</van-radio>
<van-radio name="2" icon-size="25px" checked-color="#07c160">单选框</van-radio>
</van-radio-group>
</demo-block>
<demo-block title="自定义图标" padding>
<van-radio-group
value="{{ radio4 }}"

8
packages/button/README.md
View File

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

8
packages/cell/README.md
View File

@ -93,6 +93,14 @@
</van-cell>
```
### 垂直居中
通过`center`属性在多行文本时控制左侧标题垂直居中
```html
<van-cell center title="单元格" value="多行内容多行内容多行内容多行内容" />
```
## API
### CellGroup Props

16
packages/checkbox/README.md
View File

@ -44,6 +44,14 @@ Page({
</van-checkbox>
```
### 禁用文本点击
通过设置`label-disabled`属性可以禁用复选框文本点击
```html
<van-checkbox value="{{ checked }}" icon-disabled>复选框</van-checkbox>
```
### 自定义形状
将`shape`属性设置为`square`，复选框的形状会变成方形
@ -64,6 +72,14 @@ Page({
</van-checkbox>
```
### 自定义大小
通过`icon-size`属性可以自定义图标的大小
```html
<van-checkbox value="{{ checked }}" icon-size="25px">复选框</van-checkbox>
```
### 自定义图标
通过 icon 插槽自定义图标

1
packages/checkbox/index.less
View File

@ -3,6 +3,7 @@
.van-checkbox {
display: flex;
align-items: center;
overflow: hidden;
user-select: none;

22
packages/radio/README.md
View File

@ -48,6 +48,17 @@ Page({
</van-radio-group>
```
### 禁用文本点击
通过设置`label-disabled`属性可以禁用单选框文本点击
```html
<van-radio-group value="{{ radio }}" bind:change="onChange">
<van-radio name="1" icon-disabled>单选框 1</van-radio>
<van-radio name="2" icon-disabled>单选框 2</van-radio>
</van-radio-group>
```
### 自定义颜色
通过`checked-color`属性设置选中状态的图标颜色
@ -60,6 +71,17 @@ Page({
```
### 自定义大小
通过`icon-size`属性可以自定义图标的大小
```html
<van-radio-group value="{{ radio }}" bind:change="onChange">
<van-radio name="1">单选框 1</van-radio>
<van-radio name="2" icon-size="25px">单选框 2</van-radio>
</van-radio-group>
```
### 自定义图标
通过`icon`插槽自定义图标，需要设置`use-icon-slot`属性

4
packages/radio/index.less
View File

@ -12,7 +12,9 @@
}
&__icon {
display: block;
display: flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
width: 1em;
height: 1em;

2
packages/radio/index.wxml
View File

@ -14,7 +14,7 @@
wx:else
name="success"
class="{{ utils.bem('radio__icon', [shape, { disabled, checked: value === name }]) }}"
style="{{ checkedColor && !disabled && value === name ? 'border-color:' + checkedColor + '; background-color:' + checkedColor + ';' : '' }}"
style="font-size: {{ utils.addUnit(iconSize) }};{{ checkedColor && !disabled && value === name ? 'border-color:' + checkedColor + '; background-color:' + checkedColor + ';' : '' }}"
custom-class="icon-class"
custom-style="line-height: {{ utils.addUnit(iconSize) }};font-size: .8em;display: block;"
/>