mirror of
https://gitee.com/vant-contrib/vant-weapp.git
synced 2025-04-06 03:58:05 +08:00
docs: update Radio/Picker demo
This commit is contained in:
parent
e5150392b0
commit
5a5789dff8
@ -24,10 +24,6 @@
|
|||||||
/>
|
/>
|
||||||
</demo-block>
|
</demo-block>
|
||||||
|
|
||||||
<demo-block title="禁用选项">
|
|
||||||
<van-picker columns="{{ column2 }}" />
|
|
||||||
</demo-block>
|
|
||||||
|
|
||||||
<demo-block title="多列联动">
|
<demo-block title="多列联动">
|
||||||
<van-picker
|
<van-picker
|
||||||
columns="{{ column4 }}"
|
columns="{{ column4 }}"
|
||||||
@ -35,6 +31,10 @@
|
|||||||
/>
|
/>
|
||||||
</demo-block>
|
</demo-block>
|
||||||
|
|
||||||
|
<demo-block title="禁用选项">
|
||||||
|
<van-picker columns="{{ column2 }}" />
|
||||||
|
</demo-block>
|
||||||
|
|
||||||
<demo-block title="加载状态">
|
<demo-block title="加载状态">
|
||||||
<van-picker
|
<van-picker
|
||||||
loading
|
loading
|
||||||
|
@ -21,25 +21,14 @@
|
|||||||
</van-radio-group>
|
</van-radio-group>
|
||||||
</demo-block>
|
</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>
|
<demo-block title="自定义形状" padding>
|
||||||
<van-radio-group
|
<van-radio-group
|
||||||
value="{{ radioShape }}"
|
value="{{ radioShape }}"
|
||||||
data-key="radioShape"
|
data-key="radioShape"
|
||||||
bind:change="onChange"
|
bind:change="onChange"
|
||||||
>
|
>
|
||||||
<van-radio name="1" shape="square" custom-class="demo-radio" checked-color="#07c160">单选框</van-radio>
|
<van-radio name="1" shape="square" custom-class="demo-radio">单选框</van-radio>
|
||||||
<van-radio name="2" shape="square" checked-color="#07c160">单选框</van-radio>
|
<van-radio name="2" shape="square">单选框</van-radio>
|
||||||
</van-radio-group>
|
</van-radio-group>
|
||||||
</demo-block>
|
</demo-block>
|
||||||
|
|
||||||
@ -60,8 +49,8 @@
|
|||||||
data-key="radioSize"
|
data-key="radioSize"
|
||||||
bind:change="onChange"
|
bind:change="onChange"
|
||||||
>
|
>
|
||||||
<van-radio name="1" icon-size="20px" custom-class="demo-radio" checked-color="#07c160">单选框</van-radio>
|
<van-radio name="1" icon-size="24px" custom-class="demo-radio">单选框</van-radio>
|
||||||
<van-radio name="2" icon-size="25px" checked-color="#07c160">单选框</van-radio>
|
<van-radio name="2" icon-size="24px">单选框</van-radio>
|
||||||
</van-radio-group>
|
</van-radio-group>
|
||||||
</demo-block>
|
</demo-block>
|
||||||
|
|
||||||
@ -92,6 +81,17 @@
|
|||||||
</van-radio-group>
|
</van-radio-group>
|
||||||
</demo-block>
|
</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 组件一起使用">
|
<demo-block title="与 Cell 组件一起使用">
|
||||||
<van-radio-group value="{{ radio5 }}">
|
<van-radio-group value="{{ radio5 }}">
|
||||||
<van-cell-group>
|
<van-cell-group>
|
||||||
|
@ -79,26 +79,6 @@ Page({
|
|||||||
});
|
});
|
||||||
```
|
```
|
||||||
|
|
||||||
### 禁用选项
|
|
||||||
|
|
||||||
选项可以为对象结构,通过设置 disabled 来禁用该选项
|
|
||||||
|
|
||||||
```html
|
|
||||||
<van-picker columns="{{ columns }}" />
|
|
||||||
```
|
|
||||||
|
|
||||||
```javascript
|
|
||||||
Page({
|
|
||||||
data: {
|
|
||||||
columns: [
|
|
||||||
{ text: '杭州', disabled: true },
|
|
||||||
{ text: '宁波' },
|
|
||||||
{ text: '温州' }
|
|
||||||
]
|
|
||||||
}
|
|
||||||
});
|
|
||||||
```
|
|
||||||
|
|
||||||
### 多列联动
|
### 多列联动
|
||||||
|
|
||||||
```html
|
```html
|
||||||
@ -133,6 +113,26 @@ Page({
|
|||||||
});
|
});
|
||||||
```
|
```
|
||||||
|
|
||||||
|
### 禁用选项
|
||||||
|
|
||||||
|
选项可以为对象结构,通过设置 disabled 来禁用该选项
|
||||||
|
|
||||||
|
```html
|
||||||
|
<van-picker columns="{{ columns }}" />
|
||||||
|
```
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
Page({
|
||||||
|
data: {
|
||||||
|
columns: [
|
||||||
|
{ text: '杭州', disabled: true },
|
||||||
|
{ text: '宁波' },
|
||||||
|
{ text: '温州' }
|
||||||
|
]
|
||||||
|
}
|
||||||
|
});
|
||||||
|
```
|
||||||
|
|
||||||
### 加载状态
|
### 加载状态
|
||||||
|
|
||||||
当 Picker 数据是通过异步获取时,可以通过 `loading` 属性显示加载提示
|
当 Picker 数据是通过异步获取时,可以通过 `loading` 属性显示加载提示
|
||||||
|
@ -42,20 +42,20 @@ Page({
|
|||||||
通过`disabled`属性禁止选项切换,在`Radio`上设置`diabled`可以禁用单个选项
|
通过`disabled`属性禁止选项切换,在`Radio`上设置`diabled`可以禁用单个选项
|
||||||
|
|
||||||
```html
|
```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="1">单选框 1</van-radio>
|
||||||
<van-radio name="2">单选框 2</van-radio>
|
<van-radio name="2">单选框 2</van-radio>
|
||||||
</van-radio-group>
|
</van-radio-group>
|
||||||
```
|
```
|
||||||
|
|
||||||
### 禁用文本点击
|
### 自定义形状
|
||||||
|
|
||||||
通过设置`label-disabled`属性可以禁用单选框文本点击
|
将`shape`属性设置为`square`,单选框的形状会变成方形
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<van-radio-group value="{{ radio }}" bind:change="onChange">
|
<van-radio-group value="{{ radio }}" bind:change="onChange">
|
||||||
<van-radio name="1" label-disabled>单选框 1</van-radio>
|
<van-radio name="1" shape="square">单选框 1</van-radio>
|
||||||
<van-radio name="2" label-disabled>单选框 2</van-radio>
|
<van-radio name="2" shape="square">单选框 2</van-radio>
|
||||||
</van-radio-group>
|
</van-radio-group>
|
||||||
```
|
```
|
||||||
|
|
||||||
@ -77,8 +77,8 @@ Page({
|
|||||||
|
|
||||||
```html
|
```html
|
||||||
<van-radio-group value="{{ radio }}" bind:change="onChange">
|
<van-radio-group value="{{ radio }}" bind:change="onChange">
|
||||||
<van-radio name="1">单选框 1</van-radio>
|
<van-radio name="1" icon-size="24px">单选框 1</van-radio>
|
||||||
<van-radio name="2" icon-size="25px">单选框 2</van-radio>
|
<van-radio name="2" icon-size="24px">单选框 2</van-radio>
|
||||||
</van-radio-group>
|
</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 组件一起使用
|
||||||
|
|
||||||
此时你需要再引入`Cell`和`CellGroup`组件。
|
此时你需要再引入`Cell`和`CellGroup`组件。
|
||||||
|
Loading…
x
Reference in New Issue
Block a user