radio-group 单项选择器组

解释：单项选择器组，内部由多个radio组成。代码示例与 radio 相同。

属性说明

示例

在开发者工具中预览效果

扫码体验

请使用百度APP扫码

代码示例1 - 默认样式

在开发者工具中预览效果

  1. <view class="card-area">    <view class="top-description border-bottom">默认样式</view>    <view class="radio">        <radio-group>            <radio checked>单选项一</radio>            <radio class="radio-before" checked="false">单选项二</radio>        </radio-group>    </view></view>

代码示例2 - 列表展示

  1. <view class="card-area">    <view class="top-description border-bottom">列表展示</view>    <view class="radio-area">        <radio-group>            <radio class="radio border-bottom" checked>单选项一</radio>            <radio class="radio border-bottom" checked="false">单选项二</radio>            <radio class="radio border-bottom" checked="false">单选项三</radio>        </radio-group>    </view></view>

代码示例3 - 包含禁用选项

  1. <view class="card-area">    <view class="top-description border-bottom">        <view>包含禁用选项</view>        <view>disabled</view>    </view>    <view class="radio-area">        <radio-group>            <radio class="radio border-bottom" checked>可用选项</radio>            <radio class="radio border-bottom" checked="false">可用选项</radio>            <radio class="radio" checked="false" disabled>                <text class="disabledText">禁用选项</text>            </radio>        </radio-group>    </view></view>

代码示例4 - 默认不选中

  1. <view class="card-area">    <view class="top-description border-bottom">        <view>默认不选中</view>        <view>checked="false"</view>    </view>    <view class="radio-area">        <radio-group>            <radio class="radio border-bottom" checked>单选项一</radio>            <radio class="radio border-bottom" checked="false">单选项二</radio>        </radio-group>    </view></view>

代码示例5 - 自定义颜色

  1. <view class="card-area">    <view class="top-description border-bottom">        <view>自定义颜色</view>        <view>color="#00BC89"</view>    </view>    <view class="radio-area">        <radio-group>            <radio class="radio border-bottom" color="#00BC89" checked>单选项一</radio>            <radio class="radio border-bottom" color="#00BC89">单选项二</radio>        </radio-group>    </view></view>

代码示例 6: 改变小程序原生组件大小,拿radio举例，其他组件也适用

在开发者工具中预览效果

  1. <view class="wrap">    <view class="card-area">        <view class="top-description border-bottom">改变小程序原生组件大小</view>            <radio-group class="radioSmall">                <radio checked class="radio1">单选项一</radio>                <radio checked="false" class="radio2">单选项二</radio>            </radio-group>        </view>    </view></view>
  1. .radioSmall {    transform: scale(0.7)}