alighasami/vant
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

docs: complete some examples of button/cell/checkbox/radio

Browse Source
This commit is contained in:
linrz
2019-12-29 21:21:24 +08:00
committed by neverland
parent 7b905a6de8
commit f0815bc405
16 changed files with 209 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/radio/README.md
+18
View File
@@ -42,6 +42,15 @@ export default {
</van-radio-group>
```
### Disabled Label Click
```html
<van-radio-group v-model="radio">
<van-radio name="1" icon-disabled>Radio 1</van-radio>
<van-radio name="2" icon-disabled>Radio 2</van-radio>
</van-radio-group>
```
### Custom Color
```html
@@ -51,6 +60,15 @@ export default {
</van-radio-group>
```
### Custom Icon Size
```html
<van-radio-group v-model="radio">
<van-radio name="1">Radio 1</van-radio>
<van-radio name="2" icon-size="25px">Radio 2</van-radio>
</van-radio-group>
```
### Custom Icon
Use icon slot to custom icon
src/radio/README.zh-CN.md
+22
View File
@@ -44,6 +44,17 @@ export default {
</van-radio-group>
```
### 禁用文本点击
通过设置`label-disabled`属性可以禁用单选框文本点击
```html
<van-radio-group v-model="radio">
<van-radio name="1" icon-disabled>单选框 1</van-radio>
<van-radio name="2" icon-disabled>单选框 2</van-radio>
</van-radio-group>
```
### 自定义颜色
通过`checked-color`属性设置选中状态的图标颜色
@@ -55,6 +66,17 @@ export default {
</van-radio-group>
```
### 自定义大小
通过`icon-size`属性可以自定义图标的大小
```html
<van-radio-group v-model="radio">
<van-radio name="1">单选框 1</van-radio>
<van-radio name="2" icon-size="25px">单选框 2</van-radio>
</van-radio-group>
```
### 自定义图标
通过`icon`插槽自定义图标，并通过`slotProps`判断是否为选中状态
src/radio/demo/index.vue
+22 -2
View File
@@ -14,6 +14,13 @@
</van-radio-group>
</demo-block>
<demo-block :title="$t('disabledLabelClick')">
<van-radio-group v-model="radioLabel" class="demo-radio-group">
<van-radio name="1" label-disabled>{{ $t('radio') }} 1</van-radio>
<van-radio name="2" label-disabled>{{ $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>
@@ -38,6 +45,13 @@
</van-radio-group>
</demo-block>
<demo-block :title="$t('customIconSize')">
<van-radio-group v-model="radioIconSize" class="demo-radio-group">
<van-radio name="1" checked-color="#07c160">{{ $t('radio') }} 1</van-radio>
<van-radio name="2" checked-color="#07c160" icon-size="25px">{{ $t('radio') }} 2</van-radio>
</van-radio-group>
</demo-block>
<demo-block :title="$t('withCell')">
<van-radio-group v-model="radio5">
<van-cell-group>
@@ -61,16 +75,20 @@ export default {
text1: '未选中禁用',
text2: '选中且禁用',
customIcon: '自定义图标',
customIconSize: '自定义大小',
customColor: '自定义颜色',
withCell: '与 Cell 组件一起使用'
withCell: '与 Cell 组件一起使用',
disabledLabelClick: '禁用单选框文本点击'
},
'en-US': {
radio: 'Radio',
text1: 'Disabled',
text2: 'Disabled and checked',
customIcon: 'Custom Icon',
customIconSize: 'Custom Icon Size',
customColor: 'Custom Color',
withCell: 'Inside a Cell'
withCell: 'Inside a Cell',
disabledLabelClick: 'Disable the click event of label'
}
},
@@ -81,6 +99,8 @@ export default {
radio3: '1',
radio4: '1',
radio5: '1',
radioLabel: '1',
radioIconSize: '1',
icon: {
active: 'https://img.yzcdn.cn/vant/user-active.png',
inactive: 'https://img.yzcdn.cn/vant/user-inactive.png'
src/radio/test/__snapshots__/demo.spec.js.snap
+24
View File
@@ -26,6 +26,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--round 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--round"><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">
@@ -52,6 +64,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--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" style="font-size: 25px;"><i class="van-icon van-icon-success">
<!----></i></div><span class="van-radio__label">单选框 2</span>
</div>
</div>
</div>
<div>
<div role="radiogroup" class="van-radio-group">
<div class="van-cell-group van-hairline--top-bottom">