blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-24 18:36:51 +08:00
Code Issues Projects Releases Wiki Activity

[Doc] Radio: update demo (#3565)

Browse Source
This commit is contained in:
neverland 2019-06-20 09:46:35 +08:00 committed by GitHub
parent 3fa1a79065
commit 70efdc22cf
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 131 additions and 68 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
packages/checkbox/demo/index.vue
View File

@ -34,7 +34,7 @@
<img <img
slot="icon" slot="icon"
slot-scope="props" slot-scope="props"
:src="props.checked ? icon.active : icon.normal" :src="props.checked ? icon.active : icon.inactive"
> >
</van-checkbox> </van-checkbox>
</demo-block> </demo-block>
@ -122,8 +122,8 @@ export default {
result2: [], result2: [],
result3: [], result3: [],
icon: { icon: {
normal: 'https://img.yzcdn.cn/public_files/2017/10/13/c547715be149dd3faa817e4a948b40c4.png', active: 'https://img.yzcdn.cn/vant/user-active.png',
active: 'https://img.yzcdn.cn/public_files/2017/10/13/793c77793db8641c4c325b7f25bf130d.png' inactive: 'https://img.yzcdn.cn/vant/user-inactive.png'
} }
}; };
}, },

6
packages/checkbox/en-US.md
View File

@ -47,7 +47,7 @@ Use icon slot to custom icon
<img <img
slot="icon" slot="icon"
slot-scope="props" slot-scope="props"
:src="props.checked ? icon.active : icon.normal" :src="props.checked ? icon.active : icon.inactive"
> >
</van-checkbox> </van-checkbox>
``` ```
@ -57,8 +57,8 @@ export default {
data() { data() {
checked: true, checked: true,
icon: { icon: {
normal: '//img.yzcdn.cn/icon-normal.png', active: 'https://img.yzcdn.cn/vant/user-active.png',
active: '//img.yzcdn.cn/icon-active.png' inactive: 'https://img.yzcdn.cn/vant/user-inactive.png'
} }
} }
} }

2
packages/checkbox/test/__snapshots__/demo.spec.js.snap
View File

@ -32,7 +32,7 @@ exports[`renders demo correctly 1`] = `
</div> </div>
<div> <div>
<div role="checkbox" tabindex="0" aria-checked="true" class="van-checkbox"> <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> </span>
</div> </div>

6
packages/checkbox/zh-CN.md
View File

@ -49,7 +49,7 @@ export default {
<img <img
slot="icon" slot="icon"
slot-scope="props" slot-scope="props"
:src="props.checked ? icon.active : icon.normal" :src="props.checked ? icon.active : icon.inactive"
> >
</van-checkbox> </van-checkbox>
``` ```
@ -59,8 +59,8 @@ export default {
data() { data() {
checked: true, checked: true,
icon: { icon: {
normal: '//img.yzcdn.cn/icon-normal.png', active: 'https://img.yzcdn.cn/vant/user-active.png',
active: '//img.yzcdn.cn/icon-active.png' inactive: 'https://img.yzcdn.cn/vant/user-inactive.png'
} }
} }
} }

68
packages/radio/demo/index.vue
View File

@ -22,45 +22,63 @@
</demo-block> </demo-block>
<demo-block :title="$t('customColor')"> <demo-block :title="$t('customColor')">
<van-radio <van-radio-group
name="1" v-model="radio3"
value="1"
checked-color="#07c160"
class="demo-radio-group" 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>
<demo-block :title="$t('customIcon')"> <demo-block :title="$t('customIcon')">
<van-radio <van-radio-group
name="1" v-model="radio4"
value="1"
class="demo-radio-group" class="demo-radio-group"
> >
{{ $t('customIcon') }} <van-radio name="1">
<img {{ $t('radio') }} 1
slot="icon" <img
slot-scope="props" slot="icon"
:src="props.checked ? icon.active : icon.normal" slot-scope="props"
> :src="props.checked ? icon.active : icon.inactive"
</van-radio> >
</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>
<demo-block :title="$t('withCell')"> <demo-block :title="$t('withCell')">
<van-radio-group v-model="radio3"> <van-radio-group v-model="radio5">
<van-cell-group> <van-cell-group>
<van-cell <van-cell
:title="$t('radio') + 1"
clickable clickable
@click="radio3 = '1'" :title="$t('radio') + 1"
@click="radio5 = '1'"
> >
<van-radio name="1" /> <van-radio name="1" />
</van-cell> </van-cell>
<van-cell <van-cell
:title="$t('radio') + 2"
clickable clickable
@click="radio3 = '2'" :title="$t('radio') + 2"
@click="radio5 = '2'"
> >
<van-radio name="2" /> <van-radio name="2" />
</van-cell> </van-cell>
@ -96,9 +114,11 @@ export default {
radio1: '1', radio1: '1',
radio2: '2', radio2: '2',
radio3: '1', radio3: '1',
radio4: '1',
radio5: '1',
icon: { icon: {
normal: 'https://img.yzcdn.cn/public_files/2017/10/13/c547715be149dd3faa817e4a948b40c4.png', active: 'https://img.yzcdn.cn/vant/user-active.png',
active: 'https://img.yzcdn.cn/public_files/2017/10/13/793c77793db8641c4c325b7f25bf130d.png' inactive: 'https://img.yzcdn.cn/vant/user-inactive.png'
} }
}; };
} }
@ -110,7 +130,7 @@ export default {
&-group { &-group {
padding: 0 17px; padding: 0 17px;
.van-radio { .van-radio:not(:last-child) {
margin-bottom: 10px; margin-bottom: 10px;
} }
} }

37
packages/radio/en-US.md
View File

@ -44,7 +44,10 @@ export default {
### Custom Color ### Custom Color
```html ```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 ### Custom Icon
@ -52,23 +55,33 @@ export default {
Use icon slot to custom icon Use icon slot to custom icon
```html ```html
<van-radio v-model="checked"> <van-radio-group v-model="radio">
Custom Icon <van-radio name="1">
<img Radio 1
slot="icon" <img
slot-scope="props" slot="icon"
:src="props.checked ? icon.active : icon.normal" slot-scope="props"
> :src="props.checked ? icon.active : icon.inactive"
</van-radio> >
</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 ```js
export default { export default {
data() { data() {
checked: true, radio: '1',
icon: { icon: {
normal: '//img.yzcdn.cn/icon-normal.png', active: 'https://img.yzcdn.cn/vant/user-active.png',
active: '//img.yzcdn.cn/icon-active.png' inactive: 'https://img.yzcdn.cn/vant/user-inactive.png'
} }
} }
} }

33
packages/radio/test/__snapshots__/demo.spec.js.snap
View File

@ -27,18 +27,33 @@ exports[`renders demo correctly 1`] = `
</div> </div>
</div> </div>
<div> <div>
<div role="radio" tabindex="0" aria-checked="true" class="demo-radio-group van-radio"> <div role="radiogroup" class="demo-radio-group van-radio-group">
<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);"> <div role="radio" tabindex="0" aria-checked="true" class="van-radio">
<!----></i></div><span class="van-radio__label"> <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> 单选框 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>
<div> <div>
<div role="radio" tabindex="0" aria-checked="true" class="demo-radio-group van-radio"> <div role="radiogroup" class="demo-radio-group van-radio-group">
<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"> <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">
</span> 单选框 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> </div>
<div> <div>

41
packages/radio/zh-CN.md
View File

@ -45,32 +45,47 @@ export default {
### 自定义颜色 ### 自定义颜色
通过`checked-color`属性设置选中状态的图标颜色
```html ```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 ```html
<van-radio v-model="checked"> <van-radio-group v-model="radio">
自定义图标 <van-radio name="1">
<img 单选框 1
slot="icon" <img
slot-scope="props" slot="icon"
:src="props.checked ? icon.active : icon.normal" slot-scope="props"
> :src="props.checked ? icon.active : icon.inactive"
</van-radio> >
</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 ```js
export default { export default {
data() { data() {
checked: true, radio: '1'
icon: { icon: {
normal: '//img.yzcdn.cn/icon-normal.png', active: 'https://img.yzcdn.cn/vant/user-active.png',
active: '//img.yzcdn.cn/icon-active.png' inactive: 'https://img.yzcdn.cn/vant/user-inactive.png'
} }
} }
} }