2019-11-15 15:24:34 +08:00

84 lines
2.1 KiB
Plaintext

<demo-block title="基本用法" padding>
<van-radio-group
value="{{ radio1 }}"
data-key="radio1"
bind:change="onChange"
>
<van-radio name="1" custom-class="demo-radio">单选框 1</van-radio>
<van-radio name="2">单选框 2</van-radio>
</van-radio-group>
</demo-block>
<demo-block title="禁用状态" padding>
<van-radio-group
disabled
value="{{ radio2 }}"
data-key="radio2"
bind:change="onChange"
>
<van-radio name="1" custom-class="demo-radio">单选框 1</van-radio>
<van-radio name="2">单选框 2</van-radio>
</van-radio-group>
</demo-block>
<demo-block title="自定义颜色" padding>
<van-radio-group
value="{{ radio3 }}"
data-key="radio3"
bind:change="onChange"
>
<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-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="{{ radio5 }}">
<van-cell-group>
<van-cell
title="单选框 1"
clickable
data-name="1"
bind:click="onClick"
>
<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>
</demo-block>