mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
[Doc] Radio: update demo (#3565)
This commit is contained in:
neverland
GitHub
parent
3fa1a79065
commit
70efdc22cf
@ -34,7 +34,7 @@
|
||||
<img
|
||||
slot="icon"
|
||||
slot-scope="props"
|
||||
:src="props.checked ? icon.active : icon.normal"
|
||||
:src="props.checked ? icon.active : icon.inactive"
|
||||
>
|
||||
</van-checkbox>
|
||||
</demo-block>
|
||||
@ -122,8 +122,8 @@ export default {
|
||||
result2: [],
|
||||
result3: [],
|
||||
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'
|
||||
active: 'https://img.yzcdn.cn/vant/user-active.png',
|
||||
inactive: 'https://img.yzcdn.cn/vant/user-inactive.png'
|
||||
}
|
||||
};
|
||||
},
|
||||
|
||||
@ -47,7 +47,7 @@ Use icon slot to custom icon
|
||||
<img
|
||||
slot="icon"
|
||||
slot-scope="props"
|
||||
:src="props.checked ? icon.active : icon.normal"
|
||||
:src="props.checked ? icon.active : icon.inactive"
|
||||
>
|
||||
</van-checkbox>
|
||||
```
|
||||
@ -57,8 +57,8 @@ export default {
|
||||
data() {
|
||||
checked: true,
|
||||
icon: {
|
||||
normal: '//img.yzcdn.cn/icon-normal.png',
|
||||
active: '//img.yzcdn.cn/icon-active.png'
|
||||
active: 'https://img.yzcdn.cn/vant/user-active.png',
|
||||
inactive: 'https://img.yzcdn.cn/vant/user-inactive.png'
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -32,7 +32,7 @@ exports[`renders demo correctly 1`] = `
|
||||
</div>
|
||||
<div>
|
||||
<div role="checkbox" tabindex="0" aria-checked="true" class="van-checkbox">
|
||||
<div class="van-checkbox__icon van-checkbox__icon--round van-checkbox__icon--checked"><img src="https://img.yzcdn.cn/public_files/2017/10/13/793c77793db8641c4c325b7f25bf130d.png"></div><span class="van-checkbox__label">
|
||||
<div class="van-checkbox__icon van-checkbox__icon--round van-checkbox__icon--checked"><img src="https://img.yzcdn.cn/vant/user-active.png"></div><span class="van-checkbox__label">
|
||||
自定义图标
|
||||
</span>
|
||||
</div>
|
||||
|
||||
@ -49,7 +49,7 @@ export default {
|
||||
<img
|
||||
slot="icon"
|
||||
slot-scope="props"
|
||||
:src="props.checked ? icon.active : icon.normal"
|
||||
:src="props.checked ? icon.active : icon.inactive"
|
||||
>
|
||||
</van-checkbox>
|
||||
```
|
||||
@ -59,8 +59,8 @@ export default {
|
||||
data() {
|
||||
checked: true,
|
||||
icon: {
|
||||
normal: '//img.yzcdn.cn/icon-normal.png',
|
||||
active: '//img.yzcdn.cn/icon-active.png'
|
||||
active: 'https://img.yzcdn.cn/vant/user-active.png',
|
||||
inactive: 'https://img.yzcdn.cn/vant/user-inactive.png'
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -22,45 +22,63 @@
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('customColor')">
|
||||
<van-radio
|
||||
name="1"
|
||||
value="1"
|
||||
checked-color="#07c160"
|
||||
<van-radio-group
|
||||
v-model="radio3"
|
||||
class="demo-radio-group"
|
||||
>
|
||||
{{ $t('radio') }}
|
||||
</van-radio>
|
||||
<van-radio
|
||||
name="1"
|
||||
checked-color="#07c160"
|
||||
>
|
||||
{{ $t('radio') }} 1
|
||||
</van-radio>
|
||||
<van-radio
|
||||
name="2"
|
||||
checked-color="#07c160"
|
||||
>
|
||||
{{ $t('radio') }} 2
|
||||
</van-radio>
|
||||
</van-radio-group>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('customIcon')">
|
||||
<van-radio
|
||||
name="1"
|
||||
value="1"
|
||||
<van-radio-group
|
||||
v-model="radio4"
|
||||
class="demo-radio-group"
|
||||
>
|
||||
{{ $t('customIcon') }}
|
||||
<img
|
||||
slot="icon"
|
||||
slot-scope="props"
|
||||
:src="props.checked ? icon.active : icon.normal"
|
||||
>
|
||||
</van-radio>
|
||||
<van-radio name="1">
|
||||
{{ $t('radio') }} 1
|
||||
<img
|
||||
slot="icon"
|
||||
slot-scope="props"
|
||||
:src="props.checked ? icon.active : icon.inactive"
|
||||
>
|
||||
</van-radio>
|
||||
<van-radio name="2">
|
||||
{{ $t('radio') }} 2
|
||||
<img
|
||||
slot="icon"
|
||||
slot-scope="props"
|
||||
:src="props.checked ? icon.active : icon.inactive"
|
||||
>
|
||||
</van-radio>
|
||||
</van-radio-group>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('withCell')">
|
||||
<van-radio-group v-model="radio3">
|
||||
<van-radio-group v-model="radio5">
|
||||
<van-cell-group>
|
||||
<van-cell
|
||||
:title="$t('radio') + 1"
|
||||
clickable
|
||||
@click="radio3 = '1'"
|
||||
:title="$t('radio') + 1"
|
||||
@click="radio5 = '1'"
|
||||
>
|
||||
<van-radio name="1" />
|
||||
</van-cell>
|
||||
<van-cell
|
||||
:title="$t('radio') + 2"
|
||||
clickable
|
||||
@click="radio3 = '2'"
|
||||
:title="$t('radio') + 2"
|
||||
@click="radio5 = '2'"
|
||||
>
|
||||
<van-radio name="2" />
|
||||
</van-cell>
|
||||
@ -96,9 +114,11 @@ export default {
|
||||
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'
|
||||
active: 'https://img.yzcdn.cn/vant/user-active.png',
|
||||
inactive: 'https://img.yzcdn.cn/vant/user-inactive.png'
|
||||
}
|
||||
};
|
||||
}
|
||||
@ -110,7 +130,7 @@ export default {
|
||||
&-group {
|
||||
padding: 0 17px;
|
||||
|
||||
.van-radio {
|
||||
.van-radio:not(:last-child) {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -44,7 +44,10 @@ export default {
|
||||
### Custom Color
|
||||
|
||||
```html
|
||||
<van-radio checked-color="#07c160">Radio</van-radio>
|
||||
<van-radio-group v-model="radio">
|
||||
<van-radio name="1" checked-color="#07c160">Radio 1</van-radio>
|
||||
<van-radio name="2" checked-color="#07c160">Radio 2</van-radio>
|
||||
</van-radio-group>
|
||||
```
|
||||
|
||||
### Custom Icon
|
||||
@ -52,23 +55,33 @@ export default {
|
||||
Use icon slot to custom icon
|
||||
|
||||
```html
|
||||
<van-radio v-model="checked">
|
||||
Custom Icon
|
||||
<img
|
||||
slot="icon"
|
||||
slot-scope="props"
|
||||
:src="props.checked ? icon.active : icon.normal"
|
||||
>
|
||||
</van-radio>
|
||||
<van-radio-group v-model="radio">
|
||||
<van-radio name="1">
|
||||
Radio 1
|
||||
<img
|
||||
slot="icon"
|
||||
slot-scope="props"
|
||||
:src="props.checked ? icon.active : icon.inactive"
|
||||
>
|
||||
</van-radio>
|
||||
<van-radio name="2">
|
||||
Radio 2
|
||||
<img
|
||||
slot="icon"
|
||||
slot-scope="props"
|
||||
:src="props.checked ? icon.active : icon.inactive"
|
||||
>
|
||||
</van-radio>
|
||||
</van-radio-group>
|
||||
```
|
||||
|
||||
```js
|
||||
export default {
|
||||
data() {
|
||||
checked: true,
|
||||
radio: '1',
|
||||
icon: {
|
||||
normal: '//img.yzcdn.cn/icon-normal.png',
|
||||
active: '//img.yzcdn.cn/icon-active.png'
|
||||
active: 'https://img.yzcdn.cn/vant/user-active.png',
|
||||
inactive: 'https://img.yzcdn.cn/vant/user-inactive.png'
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -27,18 +27,33 @@ exports[`renders demo correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div role="radio" tabindex="0" aria-checked="true" class="demo-radio-group van-radio">
|
||||
<div class="van-radio__icon van-radio__icon--round van-radio__icon--checked"><i class="van-icon van-icon-success" style="border-color: #07c160; background-color: rgb(7, 193, 96);">
|
||||
<!----></i></div><span class="van-radio__label">
|
||||
单选框
|
||||
</span>
|
||||
<div role="radiogroup" class="demo-radio-group van-radio-group">
|
||||
<div role="radio" tabindex="0" aria-checked="true" class="van-radio">
|
||||
<div class="van-radio__icon van-radio__icon--round van-radio__icon--checked"><i class="van-icon van-icon-success" style="border-color: #07c160; background-color: rgb(7, 193, 96);">
|
||||
<!----></i></div><span class="van-radio__label">
|
||||
单选框 1
|
||||
</span>
|
||||
</div>
|
||||
<div role="radio" tabindex="-1" aria-checked="false" class="van-radio">
|
||||
<div class="van-radio__icon van-radio__icon--round"><i class="van-icon van-icon-success">
|
||||
<!----></i></div><span class="van-radio__label">
|
||||
单选框 2
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div role="radio" tabindex="0" aria-checked="true" class="demo-radio-group van-radio">
|
||||
<div class="van-radio__icon van-radio__icon--round van-radio__icon--checked"><img src="https://img.yzcdn.cn/public_files/2017/10/13/793c77793db8641c4c325b7f25bf130d.png"></div><span class="van-radio__label">
|
||||
自定义图标
|
||||
</span>
|
||||
<div role="radiogroup" class="demo-radio-group van-radio-group">
|
||||
<div role="radio" tabindex="0" aria-checked="true" class="van-radio">
|
||||
<div class="van-radio__icon van-radio__icon--round van-radio__icon--checked"><img src="https://img.yzcdn.cn/vant/user-active.png"></div><span class="van-radio__label">
|
||||
单选框 1
|
||||
</span>
|
||||
</div>
|
||||
<div role="radio" tabindex="-1" aria-checked="false" class="van-radio">
|
||||
<div class="van-radio__icon van-radio__icon--round"><img src="https://img.yzcdn.cn/vant/user-inactive.png"></div><span class="van-radio__label">
|
||||
单选框 2
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
|
||||
@ -45,32 +45,47 @@ export default {
|
||||
|
||||
### 自定义颜色
|
||||
|
||||
通过`checked-color`属性设置选中状态的图标颜色
|
||||
|
||||
```html
|
||||
<van-radio checked-color="#07c160">复选框</van-radio>
|
||||
<van-radio-group v-model="radio">
|
||||
<van-radio name="1" checked-color="#07c160">单选框 1</van-radio>
|
||||
<van-radio name="2" checked-color="#07c160">单选框 2</van-radio>
|
||||
</van-radio-group>
|
||||
```
|
||||
|
||||
### 自定义图标
|
||||
|
||||
通过 icon 插槽自定义图标，可以通过 `slot-scope` 判断是否为选中状态
|
||||
通过`icon`插槽自定义图标，并通过`slot-scope`判断是否为选中状态
|
||||
|
||||
```html
|
||||
<van-radio v-model="checked">
|
||||
自定义图标
|
||||
<img
|
||||
slot="icon"
|
||||
slot-scope="props"
|
||||
:src="props.checked ? icon.active : icon.normal"
|
||||
>
|
||||
</van-radio>
|
||||
<van-radio-group v-model="radio">
|
||||
<van-radio name="1">
|
||||
单选框 1
|
||||
<img
|
||||
slot="icon"
|
||||
slot-scope="props"
|
||||
:src="props.checked ? icon.active : icon.inactive"
|
||||
>
|
||||
</van-radio>
|
||||
<van-radio name="2">
|
||||
单选框 2
|
||||
<img
|
||||
slot="icon"
|
||||
slot-scope="props"
|
||||
:src="props.checked ? icon.active : icon.inactive"
|
||||
>
|
||||
</van-radio>
|
||||
</van-radio-group>
|
||||
```
|
||||
|
||||
```js
|
||||
export default {
|
||||
data() {
|
||||
checked: true,
|
||||
radio: '1'
|
||||
icon: {
|
||||
normal: '//img.yzcdn.cn/icon-normal.png',
|
||||
active: '//img.yzcdn.cn/icon-active.png'
|
||||
active: 'https://img.yzcdn.cn/vant/user-active.png',
|
||||
inactive: 'https://img.yzcdn.cn/vant/user-inactive.png'
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user