mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
docs(Checkbox): add custom shape demo (#4642)
This commit is contained in:
neverland
GitHub
parent
9d7fed4834
commit
1926d3ad09
@ -33,6 +33,12 @@ export default {
|
||||
<van-checkbox v-model="checked" disabled>Checkbox</van-checkbox>
|
||||
```
|
||||
|
||||
### Custom Shape
|
||||
|
||||
```html
|
||||
<van-checkbox v-model="checked" shape="square">Checkbox</van-checkbox>
|
||||
```
|
||||
|
||||
### Custom Color
|
||||
|
||||
```html
|
||||
|
||||
@ -13,7 +13,7 @@ Vue.use(Checkbox).use(CheckboxGroup);
|
||||
|
||||
### 基础用法
|
||||
|
||||
通过`v-model`绑定 checkbox 的勾选状态
|
||||
通过`v-model`绑定复选框的勾选状态
|
||||
|
||||
```html
|
||||
<van-checkbox v-model="checked">复选框</van-checkbox>
|
||||
@ -37,6 +37,14 @@ export default {
|
||||
<van-checkbox v-model="checked" disabled>复选框</van-checkbox>
|
||||
```
|
||||
|
||||
### 自定义形状
|
||||
|
||||
将`shape`属性设置为`square`，复选框的形状会变成方形
|
||||
|
||||
```html
|
||||
<van-checkbox v-model="checked" shape="square">复选框</van-checkbox>
|
||||
```
|
||||
|
||||
### 自定义颜色
|
||||
|
||||
通过`checked-color`属性可以自定义选中状态下的图标颜色
|
||||
|
||||
@ -13,6 +13,12 @@
|
||||
</van-checkbox>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('customShape')">
|
||||
<van-checkbox v-model="checkboxShape" shape="square">
|
||||
{{ $t('customColor') }}
|
||||
</van-checkbox>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('customColor')">
|
||||
<van-checkbox v-model="checkbox2" checked-color="#07c160">
|
||||
{{ $t('customColor') }}
|
||||
@ -84,6 +90,7 @@ export default {
|
||||
checkbox: '复选框',
|
||||
customIcon: '自定义图标',
|
||||
customColor: '自定义颜色',
|
||||
customShape: '自定义形状',
|
||||
title3: '复选框组',
|
||||
title4: '设置最大可选数',
|
||||
title5: '搭配单元格组件使用',
|
||||
@ -95,6 +102,7 @@ export default {
|
||||
checkbox: 'Checkbox',
|
||||
customIcon: 'Custom Icon',
|
||||
customColor: 'Custom Color',
|
||||
customShape: 'Custom Shape',
|
||||
title3: 'Checkbox Group',
|
||||
title4: 'Maximum amount of checked options',
|
||||
title5: 'Inside a Cell',
|
||||
@ -109,6 +117,7 @@ export default {
|
||||
checkbox1: true,
|
||||
checkbox2: true,
|
||||
checkbox3: true,
|
||||
checkboxShape: true,
|
||||
list: [
|
||||
'a',
|
||||
'b',
|
||||
|
||||
@ -22,6 +22,14 @@ exports[`renders demo correctly 1`] = `
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div role="checkbox" tabindex="0" aria-checked="true" class="van-checkbox">
|
||||
<div class="van-checkbox__icon van-checkbox__icon--square van-checkbox__icon--checked"><i class="van-icon van-icon-success">
|
||||
<!----></i></div><span class="van-checkbox__label">
|
||||
自定义颜色
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div role="checkbox" tabindex="0" aria-checked="true" class="van-checkbox">
|
||||
<div class="van-checkbox__icon van-checkbox__icon--round van-checkbox__icon--checked"><i class="van-icon van-icon-success" style="border-color: #07c160; background-color: rgb(7, 193, 96);">
|
||||
|
||||
@ -62,7 +62,7 @@ Use icon slot to custom icon
|
||||
<img
|
||||
slot="icon"
|
||||
slot-scope="props"
|
||||
:src="props.checked ? icon.active : icon.inactive"
|
||||
:src="props.checked ? activeIcon : inactiveIcon"
|
||||
>
|
||||
</van-radio>
|
||||
<van-radio name="2">
|
||||
@ -70,7 +70,7 @@ Use icon slot to custom icon
|
||||
<img
|
||||
slot="icon"
|
||||
slot-scope="props"
|
||||
:src="props.checked ? icon.active : icon.inactive"
|
||||
:src="props.checked ? activeIcon : inactiveIcon"
|
||||
>
|
||||
</van-radio>
|
||||
</van-radio-group>
|
||||
@ -81,10 +81,8 @@ export default {
|
||||
data() {
|
||||
return {
|
||||
radio: '1',
|
||||
icon: {
|
||||
active: 'https://img.yzcdn.cn/vant/user-active.png',
|
||||
inactive: 'https://img.yzcdn.cn/vant/user-inactive.png'
|
||||
}
|
||||
activeIcon: 'https://img.yzcdn.cn/vant/user-active.png',
|
||||
inactiveIcon: 'https://img.yzcdn.cn/vant/user-inactive.png'
|
||||
};
|
||||
}
|
||||
};
|
||||
|
||||
@ -35,7 +35,7 @@ export default {
|
||||
|
||||
### 禁用状态
|
||||
|
||||
通过`disabled`属性禁止选项切换，在`van-radio`上设置`disabled`可以禁用单个选项
|
||||
通过`disabled`属性禁止选项切换，在`Radio`上设置`disabled`可以禁用单个选项
|
||||
|
||||
```html
|
||||
<van-radio-group v-model="radio" disabled>
|
||||
@ -66,7 +66,7 @@ export default {
|
||||
<img
|
||||
slot="icon"
|
||||
slot-scope="props"
|
||||
:src="props.checked ? icon.active : icon.inactive"
|
||||
:src="props.checked ? activeIcon : inactiveIcon"
|
||||
>
|
||||
</van-radio>
|
||||
<van-radio name="2">
|
||||
@ -74,7 +74,7 @@ export default {
|
||||
<img
|
||||
slot="icon"
|
||||
slot-scope="props"
|
||||
:src="props.checked ? icon.active : icon.inactive"
|
||||
:src="props.checked ? activeIcon : inactiveIcon"
|
||||
>
|
||||
</van-radio>
|
||||
</van-radio-group>
|
||||
@ -83,18 +83,16 @@ export default {
|
||||
```js
|
||||
export default {
|
||||
data() {
|
||||
radio: '1'
|
||||
icon: {
|
||||
active: 'https://img.yzcdn.cn/vant/user-active.png',
|
||||
inactive: 'https://img.yzcdn.cn/vant/user-inactive.png'
|
||||
}
|
||||
radio: '1',
|
||||
activeIcon: 'https://img.yzcdn.cn/vant/user-active.png',
|
||||
inactiveIcon: 'https://img.yzcdn.cn/vant/user-inactive.png'
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### 与 Cell 组件一起使用
|
||||
|
||||
此时你需要再引入`Cell`和`CellGroup`组件。
|
||||
此时你需要再引入`Cell`和`CellGroup`组件
|
||||
|
||||
```html
|
||||
<van-radio-group v-model="radio">
|
||||
|
||||
@ -1,51 +1,28 @@
|
||||
<template>
|
||||
<demo-section>
|
||||
<demo-block :title="$t('basicUsage')">
|
||||
<van-radio-group
|
||||
v-model="radio1"
|
||||
class="demo-radio-group"
|
||||
>
|
||||
<van-radio-group v-model="radio1" class="demo-radio-group">
|
||||
<van-radio name="1">{{ $t('radio') }} 1</van-radio>
|
||||
<van-radio name="2">{{ $t('radio') }} 2</van-radio>
|
||||
</van-radio-group>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('disabled')">
|
||||
<van-radio-group
|
||||
v-model="radio2"
|
||||
class="demo-radio-group"
|
||||
disabled
|
||||
>
|
||||
<van-radio-group v-model="radio2" class="demo-radio-group" disabled>
|
||||
<van-radio name="1">{{ $t('radio') }} 1</van-radio>
|
||||
<van-radio name="2">{{ $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>
|
||||
<van-radio
|
||||
name="2"
|
||||
checked-color="#07c160"
|
||||
>
|
||||
{{ $t('radio') }} 2
|
||||
</van-radio>
|
||||
<van-radio-group v-model="radio3" class="demo-radio-group">
|
||||
<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 :title="$t('customIcon')">
|
||||
<van-radio-group
|
||||
v-model="radio4"
|
||||
class="demo-radio-group"
|
||||
>
|
||||
<van-radio-group v-model="radio4" class="demo-radio-group">
|
||||
<van-radio name="1">
|
||||
{{ $t('radio') }} 1
|
||||
<template #icon="{ checked }">
|
||||
@ -64,25 +41,11 @@
|
||||
<demo-block :title="$t('withCell')">
|
||||
<van-radio-group v-model="radio5">
|
||||
<van-cell-group>
|
||||
<van-cell
|
||||
clickable
|
||||
:title="$t('radio') + 1"
|
||||
@click="radio5 = '1'"
|
||||
>
|
||||
<van-radio
|
||||
name="1"
|
||||
slot="right-icon"
|
||||
/>
|
||||
<van-cell clickable :title="$t('radio') + 1" @click="radio5 = '1'">
|
||||
<van-radio name="1" slot="right-icon" />
|
||||
</van-cell>
|
||||
<van-cell
|
||||
clickable
|
||||
:title="$t('radio') + 2"
|
||||
@click="radio5 = '2'"
|
||||
>
|
||||
<van-radio
|
||||
name="2"
|
||||
slot="right-icon"
|
||||
/>
|
||||
<van-cell clickable :title="$t('radio') + 2" @click="radio5 = '2'">
|
||||
<van-radio name="2" slot="right-icon" />
|
||||
</van-cell>
|
||||
</van-cell-group>
|
||||
</van-radio-group>
|
||||
|
||||
@ -30,15 +30,11 @@ exports[`renders demo correctly 1`] = `
|
||||
<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>
|
||||
<!----></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>
|
||||
<!----></i></div><span class="van-radio__label">单选框 2</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user