feat(CheckboxGroup): add direction prop

This commit is contained in:
陈嘉涵
2020-02-10 19:37:52 +08:00
parent 4dd41b23de
commit 15390241d8
12 changed files with 184 additions and 128 deletions
+12 -2
View File
@@ -1,12 +1,19 @@
<template>
<demo-block :title="$t('fieldType')">
<van-form @submit="onSubmit">
<van-field name="switch" :label="$t('switch')">
<van-switch v-model="switchChecked" slot="input" size="24" />
</van-field>
<van-field name="checkbox" :label="$t('checkbox')">
<van-checkbox v-model="checkbox" slot="input" shape="square" />
</van-field>
<van-field name="switch" :label="$t('switch')">
<van-switch v-model="switchChecked" slot="input" size="24" />
<van-field name="radio" :label="$t('radio')">
<van-radio-group v-model="radio" direction="horizontal" slot="input">
<van-radio name="1" class="demo-radio">{{ $t('radio') }} 1</van-radio>
<van-radio name="2">{{ $t('radio') }} 2</van-radio>
</van-radio-group>
</van-field>
<van-field name="rate" :label="$t('rate')">
@@ -33,6 +40,7 @@ export default {
i18n: {
'zh-CN': {
rate: '评分',
radio: '单选框',
submit: '提交',
switch: '开关',
slider: '滑块',
@@ -43,6 +51,7 @@ export default {
},
'en-US': {
rate: 'Rate',
radio: 'Radio',
submit: 'Submit',
switch: 'Switch',
slider: 'Slider',
@@ -56,6 +65,7 @@ export default {
data() {
return {
rate: 3,
radio: '1',
slider: 50,
stepper: 1,
checkbox: false,
+22 -3
View File
@@ -21,6 +21,18 @@ exports[`renders demo correctly 1`] = `
</div>
<div>
<form class="van-form">
<div class="van-cell van-field">
<div class="van-cell__title van-field__label"><span>开关</span></div>
<div class="van-cell__value van-field__value">
<div class="van-field__body">
<div class="van-field__control van-field__control--custom">
<div role="switch" aria-checked="false" class="van-switch" style="font-size: 24px;">
<div class="van-switch__node"></div>
</div>
</div>
</div>
</div>
</div>
<div class="van-cell van-field">
<div class="van-cell__title van-field__label"><span>复选框</span></div>
<div class="van-cell__value van-field__value">
@@ -35,12 +47,19 @@ exports[`renders demo correctly 1`] = `
</div>
</div>
<div class="van-cell van-field">
<div class="van-cell__title van-field__label"><span>开关</span></div>
<div class="van-cell__title van-field__label"><span>单选框</span></div>
<div class="van-cell__value van-field__value">
<div class="van-field__body">
<div class="van-field__control van-field__control--custom">
<div role="switch" aria-checked="false" class="van-switch" style="font-size: 24px;">
<div class="van-switch__node"></div>
<div role="radiogroup" class="van-radio-group van-radio-group--horizontal">
<div role="radio" tabindex="0" aria-checked="true" class="demo-radio van-radio van-radio--horizontal">
<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 van-radio--horizontal">
<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>