- radio 单项选择器
- 属性说明
- 示例
- 代码示例 1：默认样式
- 代码示例 2：列表展示
- 代码示例 3：包含禁用选项
- 代码示例 4：默认不选中
- 代码示例 5：自定义颜色
- 业务示例：自定义大小
radio 单项选择器
解释：单项选择器。
属性说明
| 属性名 | 类型 | 默认值 | 必填 | 说明 |
|---|---|---|---|---|
|
value |
String |
|
否 |
<radio> 组件标识。当该 <radio> 选中时，<radio-group> 的 change 事件会携带 <radio> 的 value |
|
checked |
Boolean |
false |
否 |
当前是否选中 |
|
disabled |
Boolean |
false |
否 |
是否禁用 |
|
color |
Color |
#3c76ff |
否 |
radio 的颜色，同 CSS 的 color |
示例
跳转编辑工具
在开发者工具中打开
在 WEB IDE 中打开
扫码体验
代码示例
请使用百度APP扫码
代码示例 1：默认样式
- SWAN
<view class="wrap"><view class="card-area"><view class="top-description border-bottom">默认样式</view><view class="block"><radio-group bindchange="radioChange"><radio value="radio1" checked>单选项一</radio><radio value="radio2" class="block-before" checked="false">单选项二</radio></radio-group></view></view></view>
代码示例 2：列表展示
- SWAN
- JS
<view class="wrap"><view class="card-area"><view class="top-description border-bottom">列表展示</view><view class="block-area"><radio-group bindchange="radioChange"><radio s-for="item in items" value="{{item.value}}" class="block border-bottom" checked="{{item.checked}}">{{item.text}}</radio></radio-group></view></view></view>
代码示例 3：包含禁用选项
- SWAN
<view class="wrap"><view class="card-area"><view class="top-description border-bottom"><view>包含禁用选项</view><view>disabled</view></view><view class="block-area"><radio-group><radio class="block border-bottom" checked>可用选项</radio><radio class="block border-bottom" checked="false">可用选项</radio><radio class="block" checked="false" disabled><text class="disabledText">禁用选项</text></radio></radio-group></view></view></view>
代码示例 4：默认不选中
- SWAN
<view class="wrap"><view class="card-area"><view class="top-description border-bottom"><view>默认不选中</view><view>checked="false"</view></view><view class="block-area"><radio-group><radio class="block border-bottom" checked>单选项一</radio><radio class="block border-bottom" checked="false">单选项二</radio></radio-group></view></view></view>
代码示例 5：自定义颜色
- SWAN
<view class="wrap"><view class="card-area"><view class="top-description border-bottom"><view>自定义颜色</view><view>color="#00BC89"</view></view><view class="block-area"><radio-group><radio class="block border-bottom" color="#00BC89" checked>单选项一</radio><radio class="block border-bottom" color="#00BC89">单选项二</radio></radio-group></view></view></view>
业务示例：自定义大小
- SWAN
- CSS
<view class="wrap"><view class="card-area"><view class="top-description border-bottom">自定义大小</view><view class="block-area"><radio-group><radio class="block radio-big border-bottom" checked>单选项一</radio><radio class="block radio-small"><view class="radio-small-text">单选项二</view></radio></radio-group></view></view></view>
