feat(CheckboxGroup): add direction prop
This commit is contained in:
陈嘉涵
+9
-9
@@ -51,15 +51,6 @@ 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 Shape
|
||||
|
||||
```html
|
||||
@@ -124,6 +115,15 @@ export default {
|
||||
};
|
||||
```
|
||||
|
||||
### Disable Label Click
|
||||
|
||||
```html
|
||||
<van-radio-group v-model="radio">
|
||||
<van-radio name="1" label-disabled>Radio 1</van-radio>
|
||||
<van-radio name="2" label-disabled>Radio 2</van-radio>
|
||||
</van-radio-group>
|
||||
```
|
||||
|
||||
### Inside a Cell
|
||||
|
||||
```html
|
||||
|
||||
+11
-11
@@ -55,17 +55,6 @@ 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>
|
||||
```
|
||||
|
||||
### 自定义形状
|
||||
|
||||
通过`square`属性设置选中状态的图标颜色
|
||||
@@ -134,6 +123,17 @@ export default {
|
||||
}
|
||||
```
|
||||
|
||||
### 禁用文本点击
|
||||
|
||||
设置`label-disabled`属性后，点击图标以外的内容不会触发单选框切换
|
||||
|
||||
```html
|
||||
<van-radio-group v-model="radio">
|
||||
<van-radio name="1" label-disabled>单选框 1</van-radio>
|
||||
<van-radio name="2" label-disabled>单选框 2</van-radio>
|
||||
</van-radio-group>
|
||||
```
|
||||
|
||||
### 与 Cell 组件一起使用
|
||||
|
||||
此时你需要再引入`Cell`和`CellGroup`组件
|
||||
|
||||
+17
-17
@@ -25,13 +25,6 @@
|
||||
</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('customShape')">
|
||||
<van-radio-group v-model="radioShape" class="demo-radio-group">
|
||||
<van-radio name="1" shape="square">{{ $t('radio') }} 1</van-radio>
|
||||
@@ -50,6 +43,17 @@
|
||||
</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" icon-size="24px">
|
||||
{{ $t('radio') }} 1
|
||||
</van-radio>
|
||||
<van-radio name="2" checked-color="#07c160" icon-size="24px">
|
||||
{{ $t('radio') }} 2
|
||||
</van-radio>
|
||||
</van-radio-group>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('customIcon')">
|
||||
<van-radio-group v-model="radio4" class="demo-radio-group">
|
||||
<van-radio name="1">
|
||||
@@ -67,14 +71,10 @@
|
||||
</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" icon-size="24px">
|
||||
{{ $t('radio') }} 1
|
||||
</van-radio>
|
||||
<van-radio name="2" checked-color="#07c160" icon-size="24px">
|
||||
{{ $t('radio') }} 2
|
||||
</van-radio>
|
||||
<demo-block :title="$t('disableLabel')">
|
||||
<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>
|
||||
|
||||
@@ -106,7 +106,7 @@ export default {
|
||||
customColor: '自定义颜色',
|
||||
customShape: '自定义形状',
|
||||
customIconSize: '自定义大小',
|
||||
disabledLabelClick: '禁用文本点击',
|
||||
disableLabel: '禁用文本点击',
|
||||
},
|
||||
'en-US': {
|
||||
radio: 'Radio',
|
||||
@@ -118,7 +118,7 @@ export default {
|
||||
customColor: 'Custom Color',
|
||||
customShape: 'Custom Shape',
|
||||
customIconSize: 'Custom Icon Size',
|
||||
disabledLabelClick: 'Disable the click event of label',
|
||||
disableLabel: 'Disable label click',
|
||||
},
|
||||
},
|
||||
|
||||
|
||||
@@ -38,18 +38,6 @@ 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 van-radio--label-disabled">
|
||||
<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--label-disabled">
|
||||
<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">
|
||||
@@ -78,6 +66,22 @@ 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" style="font-size: 24px;"><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: 24px;"><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">
|
||||
@@ -94,17 +98,13 @@ exports[`renders demo correctly 1`] = `
|
||||
</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" style="font-size: 24px;"><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 role="radio" tabindex="0" aria-checked="true" class="van-radio van-radio--label-disabled">
|
||||
<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" style="font-size: 24px;"><i class="van-icon van-icon-success">
|
||||
<!----></i></div><span class="van-radio__label">
|
||||
单选框 2
|
||||
</span>
|
||||
<div role="radio" tabindex="-1" aria-checked="false" class="van-radio van-radio--label-disabled">
|
||||
<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>
|
||||
|
||||
Reference in New Issue
Block a user