blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-06 03:57:59 +08:00
Code Issues Projects Releases Wiki Activity

docs: add radio shape usage

Browse Source
This commit is contained in:
linrz 2019-12-22 20:43:31 +08:00 committed by neverland
parent f0815bc405
commit abdc38eeee
4 changed files with 42 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/radio/README.md
View File

@ -51,6 +51,15 @@ export default {
</van-radio-group>
```
### Custom Shape
```html
<van-radio-group v-model="radio">
<van-radio name="1" shape="square">Radio 1</van-radio>
<van-radio name="2" shape="square">Radio 2</van-radio>
</van-radio-group>
```
### Custom Color
```html

11
src/radio/README.zh-CN.md
View File

@ -55,6 +55,17 @@ export default {
</van-radio-group>
```
### 自定义形状
通过`square`属性设置选中状态的图标颜色
```html
<van-radio-group v-model="radio">
<van-radio name="1" shape="square">单选框 1</van-radio>
<van-radio name="2" shape="square">单选框 2</van-radio>
</van-radio-group>
```
### 自定义颜色
通过`checked-color`属性设置选中状态的图标颜色

10
src/radio/demo/index.vue
View File

@ -21,6 +21,13 @@
</van-radio-group>
</demo-block>
<demo-block :title="$t('customShape')">
<van-radio-group v-model="radioShape" class="demo-radio-group">
<van-radio name="1" shape="square">{{ $t('radio') }} 1</van-radio>
<van-radio name="2" shape="square">{{ $t('radio') }} 2</van-radio>
</van-radio-group>
</demo-block>
<demo-block :title="$t('customColor')">
<van-radio-group v-model="radio3" class="demo-radio-group">
<van-radio name="1" checked-color="#07c160">{{ $t('radio') }} 1</van-radio>
@ -77,6 +84,7 @@ export default {
customIcon: '自定义图标',
customIconSize: '自定义大小',
customColor: '自定义颜色',
customShape: '自定义形状',
withCell: '与 Cell 组件一起使用',
disabledLabelClick: '禁用单选框文本点击'
},
@ -87,6 +95,7 @@ export default {
customIcon: 'Custom Icon',
customIconSize: 'Custom Icon Size',
customColor: 'Custom Color',
customShape: 'Custom Shape',
withCell: 'Inside a Cell',
disabledLabelClick: 'Disable the click event of label'
}
@ -101,6 +110,7 @@ export default {
radio5: '1',
radioLabel: '1',
radioIconSize: '1',
radioShape: '1',
icon: {
active: 'https://img.yzcdn.cn/vant/user-active.png',
inactive: 'https://img.yzcdn.cn/vant/user-inactive.png'

12
src/radio/test/__snapshots__/demo.spec.js.snap
View File

@ -38,6 +38,18 @@ exports[`renders demo correctly 1`] = `
</div>
</div>
</div>
<div>
<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--square van-radio__icon--checked"><i class="van-icon van-icon-success">
<!----></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--square"><i class="van-icon van-icon-success">
<!----></i></div><span class="van-radio__label">单选框 2</span>
</div>
</div>
</div>
<div>
<div role="radiogroup" class="demo-radio-group van-radio-group">
<div role="radio" tabindex="0" aria-checked="true" class="van-radio">