mirror of
https://gitee.com/vant-contrib/vant-weapp.git
synced 2025-04-05 19:41:45 +08:00
docs(Radio): improve document (#2315)
This commit is contained in:
neverland
GitHub
parent
07b502bc20
commit
aa44a107df
@ -1,3 +1,7 @@
|
||||
page {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.text {
|
||||
width: 100%;
|
||||
margin-top: 5px;
|
||||
|
||||
@ -5,13 +5,14 @@ Page({
|
||||
radio1: '1',
|
||||
radio2: '2',
|
||||
radio3: '1',
|
||||
radio4: '1',
|
||||
radio5: '1',
|
||||
icon: {
|
||||
normal:
|
||||
'https://img.yzcdn.cn/public_files/2017/10/13/c547715be149dd3faa817e4a948b40c4.png',
|
||||
active:
|
||||
'https://img.yzcdn.cn/public_files/2017/10/13/793c77793db8641c4c325b7f25bf130d.png'
|
||||
},
|
||||
list: ['1', '2', '3', '4']
|
||||
}
|
||||
},
|
||||
|
||||
onChange(event) {
|
||||
@ -22,7 +23,7 @@ Page({
|
||||
onClick(event) {
|
||||
const { name } = event.currentTarget.dataset;
|
||||
this.setData({
|
||||
radio3: name
|
||||
radio5: name
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
@ -2,11 +2,10 @@
|
||||
<van-radio-group
|
||||
value="{{ radio1 }}"
|
||||
data-key="radio1"
|
||||
custom-class="demo-radio-group"
|
||||
bind:change="onChange"
|
||||
>
|
||||
<van-radio name="1" custom-class="demo-radio">单选框 1</van-radio>
|
||||
<van-radio name="2" custom-class="demo-radio">单选框 2</van-radio>
|
||||
<van-radio name="2">单选框 2</van-radio>
|
||||
</van-radio-group>
|
||||
</demo-block>
|
||||
|
||||
@ -15,50 +14,69 @@
|
||||
disabled
|
||||
value="{{ radio2 }}"
|
||||
data-key="radio2"
|
||||
custom-class="demo-radio-group"
|
||||
bind:change="onChange"
|
||||
>
|
||||
<van-radio name="1" custom-class="demo-radio">单选框 1</van-radio>
|
||||
<van-radio name="2" custom-class="demo-radio">单选框 2</van-radio>
|
||||
<van-radio name="2">单选框 2</van-radio>
|
||||
</van-radio-group>
|
||||
</demo-block>
|
||||
|
||||
<demo-block title="自定义颜色" padding>
|
||||
<van-radio
|
||||
name="1"
|
||||
value="1"
|
||||
custom-class="demo-radio"
|
||||
checked-color="#07c160"
|
||||
<van-radio-group
|
||||
value="{{ radio3 }}"
|
||||
data-key="radio3"
|
||||
bind:change="onChange"
|
||||
>
|
||||
单选框
|
||||
</van-radio>
|
||||
<van-radio name="1" custom-class="demo-radio" checked-color="#07c160">单选框</van-radio>
|
||||
<van-radio name="2" checked-color="#07c160">单选框</van-radio>
|
||||
</van-radio-group>
|
||||
</demo-block>
|
||||
|
||||
<demo-block title="自定义图标" padding>
|
||||
<van-radio use-icon-slot value="1" name="1">
|
||||
自定义图标
|
||||
<image
|
||||
slot="icon"
|
||||
src="{{ radio3 === '1' ? icon.active : icon.normal }}"
|
||||
class="icon"
|
||||
mode="widthFix"
|
||||
/>
|
||||
</van-radio>
|
||||
<van-radio-group
|
||||
value="{{ radio4 }}"
|
||||
data-key="radio4"
|
||||
bind:change="onChange"
|
||||
>
|
||||
<van-radio use-icon-slot name="1">
|
||||
自定义图标
|
||||
<image
|
||||
slot="icon"
|
||||
src="{{ radio4 === '1' ? icon.active : icon.normal }}"
|
||||
class="icon"
|
||||
mode="widthFix"
|
||||
/>
|
||||
</van-radio>
|
||||
<van-radio use-icon-slot name="2">
|
||||
自定义图标
|
||||
<image
|
||||
slot="icon"
|
||||
src="{{ radio4 === '2' ? icon.active : icon.normal }}"
|
||||
class="icon"
|
||||
mode="widthFix"
|
||||
/>
|
||||
</van-radio>
|
||||
</van-radio-group>
|
||||
</demo-block>
|
||||
|
||||
<demo-block title="与 Cell 组件一起使用">
|
||||
<van-radio-group value="{{ radio3 }}">
|
||||
<van-radio-group value="{{ radio5 }}">
|
||||
<van-cell-group>
|
||||
<van-cell
|
||||
wx:for="{{ list }}"
|
||||
wx:key="index"
|
||||
title="单选框 {{ item }}"
|
||||
value-class="value-class"
|
||||
title="单选框 1"
|
||||
clickable
|
||||
data-name="{{ item }}"
|
||||
data-name="1"
|
||||
bind:click="onClick"
|
||||
>
|
||||
<van-radio name="{{ item }}" />
|
||||
<van-radio slot="right-icon" name="1" />
|
||||
</van-cell>
|
||||
<van-cell
|
||||
title="单选框 2"
|
||||
clickable
|
||||
data-name="2"
|
||||
bind:click="onClick"
|
||||
>
|
||||
<van-radio slot="right-icon" name="2" />
|
||||
</van-cell>
|
||||
</van-cell-group>
|
||||
</van-radio-group>
|
||||
|
||||
@ -1,15 +1,7 @@
|
||||
.demo-radio-group {
|
||||
padding: 0 17px;
|
||||
}
|
||||
|
||||
.demo-radio {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.value-class {
|
||||
flex: none !important;
|
||||
}
|
||||
|
||||
.icon {
|
||||
width: 20px;
|
||||
}
|
||||
|
||||
@ -29,7 +29,6 @@ Page({
|
||||
data: {
|
||||
radio: '1'
|
||||
},
|
||||
|
||||
onChange(event) {
|
||||
this.setData({
|
||||
radio: event.detail
|
||||
@ -40,7 +39,7 @@ Page({
|
||||
|
||||
### 禁用状态
|
||||
|
||||
通过`disabled`属性禁止选项切换，在`van-radio`上设置`diabled`可以禁用单个选项
|
||||
通过`disabled`属性禁止选项切换，在`Radio`上设置`diabled`可以禁用单个选项
|
||||
|
||||
```html
|
||||
<van-radio-group value="{{ radio }}" bind:change="onChange" disabled>
|
||||
@ -51,22 +50,31 @@ Page({
|
||||
|
||||
### 自定义颜色
|
||||
|
||||
通过`checked-color`属性设置选中状态的图标颜色
|
||||
|
||||
```html
|
||||
<van-radio checked-color="#07c160">复选框</van-radio>
|
||||
<van-radio-group value="{{ radio }}" bind:change="onChange">
|
||||
<van-radio name="1" checked-color="#07c160">单选框 1</van-radio>
|
||||
<van-radio name="2" checked-color="#07c160">单选框 2</van-radio>
|
||||
</van-radio-group>
|
||||
|
||||
```
|
||||
|
||||
### 自定义图标
|
||||
|
||||
通过 icon 插槽自定义图标
|
||||
通过`icon`插槽自定义图标，需要设置`use-icon-slot`属性
|
||||
|
||||
```html
|
||||
<van-radio use-icon-slot value="{{ radio }}" name="1" bind:change="onChange">
|
||||
自定义图标
|
||||
<image
|
||||
slot="icon"
|
||||
src="{{ radio === '1' ? icon.active : icon.normal }}"
|
||||
/>
|
||||
</van-radio>
|
||||
<van-radio-group value="{{ radio }}" bind:change="onChange">
|
||||
<van-radio use-icon-slot value="{{ radio }}" name="1">
|
||||
自定义图标
|
||||
<image slot="icon" src="{{ radio === '1' ? icon.active : icon.normal }}" />
|
||||
</van-radio>
|
||||
<van-radio use-icon-slot value="{{ radio }}" name="2">
|
||||
自定义图标
|
||||
<image slot="icon" src="{{ radio === '2' ? icon.active : icon.normal }}" />
|
||||
</van-radio>
|
||||
</van-radio-group>
|
||||
```
|
||||
|
||||
```js
|
||||
@ -78,7 +86,6 @@ Page({
|
||||
active: '//img.yzcdn.cn/icon-active.png'
|
||||
}
|
||||
},
|
||||
|
||||
onChange(event) {
|
||||
this.setData({
|
||||
radio: event.detail
|
||||
@ -96,21 +103,19 @@ Page({
|
||||
<van-cell-group>
|
||||
<van-cell
|
||||
title="单选框 1"
|
||||
value-class="value-class"
|
||||
clickable
|
||||
data-name="1"
|
||||
bind:click="onClick"
|
||||
>
|
||||
<van-radio name="1" />
|
||||
<van-radio slot="right-icon" name="1" />
|
||||
</van-cell>
|
||||
<van-cell
|
||||
title="单选框 2"
|
||||
value-class="value-class"
|
||||
clickable
|
||||
data-name="2"
|
||||
bind:click="onClick"
|
||||
>
|
||||
<van-radio name="2" />
|
||||
<van-radio slot="right-icon" name="2" />
|
||||
</van-cell>
|
||||
</van-cell-group>
|
||||
</van-radio-group>
|
||||
@ -137,27 +142,29 @@ Page({
|
||||
});
|
||||
```
|
||||
|
||||
```css
|
||||
.value-class {
|
||||
flex: none !important;
|
||||
}
|
||||
```
|
||||
|
||||
## API
|
||||
|
||||
### RadioGroup Props
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| name | 在表单内提交时的标识符 | *string* | - | - |
|
||||
| value | 当前选中项的标识符 | *any* | - | - |
|
||||
| disabled | 是否禁用所有单选框 | *boolean* | `false` | - |
|
||||
|
||||
### Radio Props
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| name | 标识 Radio 名称 | *string* | - | - |
|
||||
| value | 当前选中项的 name | *any* | - | - |
|
||||
| shape | 形状，可选值为 `round` `square` | *string* | `round` | - |
|
||||
| name | 标识符 | *string* | - | - |
|
||||
| shape | 形状，可选值为 `square` | *string* | `round` | - |
|
||||
| disabled | 是否为禁用状态 | *boolean* | `false` | - |
|
||||
| icon-size | 图标大小，默认单位为`px` | *string \| number* | `20px` | - |
|
||||
| label-disabled | 是否禁用文本内容点击 | *boolean* | `false` | - |
|
||||
| label-position | 文本位置，可选值为 `left` | *string* | `right` | - |
|
||||
| use-icon-slot | 是否使用 icon slot | *boolean* | `false` | - |
|
||||
| icon-size | 图标大小，默认单位为`px` | *string \| number* | `20px` | - |
|
||||
| checked-color | 选中状态颜色 | *string* | `#1989fa` | - |
|
||||
| use-icon-slot | 是否使用 icon 插槽 | *boolean* | `false` | - |
|
||||
|
||||
### Radio Event
|
||||
|
||||
@ -173,14 +180,6 @@ Page({
|
||||
| icon-class | 图标样式类 |
|
||||
| label-class | 描述信息样式类 |
|
||||
|
||||
### RadioGroup Props
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| name | 在表单内提交时的标识符 | *string* | - | - |
|
||||
| value | 当前选中项的 name | *any* | - | - |
|
||||
| disabled | 是否禁用所有单选框 | *boolean* | `false` | - |
|
||||
|
||||
### RadioGroup Event
|
||||
|
||||
| 事件名 | 说明 | 回调参数 |
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user