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: update Radio/Picker demo

Browse Source
This commit is contained in:
chenjiahan 2020-03-21 07:02:16 +08:00 committed by neverland
parent e5150392b0
commit 5a5789dff8
4 changed files with 57 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -24,10 +24,6 @@
/>
</demo-block>
<demo-block title="禁用选项">
<van-picker columns="{{ column2 }}" />
</demo-block>
<demo-block title="多列联动">
<van-picker
columns="{{ column4 }}"
@ -35,6 +31,10 @@
/>
</demo-block>
<demo-block title="禁用选项">
<van-picker columns="{{ column2 }}" />
</demo-block>
<demo-block title="加载状态">
<van-picker
loading

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

@ -21,25 +21,14 @@
</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 name="1" shape="square" custom-class="demo-radio">单选框</van-radio>
<van-radio name="2" shape="square">单选框</van-radio>
</van-radio-group>
</demo-block>
@ -60,8 +49,8 @@
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 name="1" icon-size="24px" custom-class="demo-radio">单选框</van-radio>
<van-radio name="2" icon-size="24px">单选框</van-radio>
</van-radio-group>
</demo-block>
@ -92,6 +81,17 @@
</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="与 Cell 组件一起使用">
<van-radio-group value="{{ radio5 }}">
<van-cell-group>

40
packages/picker/README.md
View File

@ -79,26 +79,6 @@ Page({
});
```
### 禁用选项
选项可以为对象结构，通过设置 disabled 来禁用该选项
```html
<van-picker columns="{{ columns }}" />
```
```javascript
Page({
data: {
columns: [
{ text: '杭州', disabled: true },
{ text: '宁波' },
{ text: '温州' }
]
}
});
```
### 多列联动
```html
@ -133,6 +113,26 @@ Page({
});
```
### 禁用选项
选项可以为对象结构，通过设置 disabled 来禁用该选项
```html
<van-picker columns="{{ columns }}" />
```
```javascript
Page({
data: {
columns: [
{ text: '杭州', disabled: true },
{ text: '宁波' },
{ text: '温州' }
]
}
});
```
### 加载状态
当 Picker 数据是通过异步获取时，可以通过 `loading` 属性显示加载提示

25
packages/radio/README.md
View File

@ -42,20 +42,20 @@ Page({
通过`disabled`属性禁止选项切换，在`Radio`上设置`diabled`可以禁用单个选项
```html
<van-radio-group value="{{ radio }}" bind:change="onChange" disabled>
<van-radio-group value="{{ radio }}" disabled bind:change="onChange">
<van-radio name="1">单选框 1</van-radio>
<van-radio name="2">单选框 2</van-radio>
</van-radio-group>
```
### 禁用文本点击
### 自定义形状
通过设置`label-disabled`属性可以禁用单选框文本点击
将`shape`属性设置为`square`，单选框的形状会变成方形
```html
<van-radio-group value="{{ radio }}" bind:change="onChange">
<van-radio name="1" label-disabled>单选框 1</van-radio>
<van-radio name="2" label-disabled>单选框 2</van-radio>
<van-radio name="1" shape="square">单选框 1</van-radio>
<van-radio name="2" shape="square">单选框 2</van-radio>
</van-radio-group>
```
@ -77,8 +77,8 @@ Page({
```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 name="1" icon-size="24px">单选框 1</van-radio>
<van-radio name="2" icon-size="24px">单选框 2</van-radio>
</van-radio-group>
```
@ -116,6 +116,17 @@ Page({
});
```
### 禁用文本点击
通过设置`label-disabled`属性可以禁用单选框文本点击
```html
<van-radio-group value="{{ radio }}" bind:change="onChange">
<van-radio name="1" label-disabled>单选框 1</van-radio>
<van-radio name="2" label-disabled>单选框 2</van-radio>
</van-radio-group>
```
### 与 Cell 组件一起使用
此时你需要再引入`Cell`和`CellGroup`组件。