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: complete some examples of button/cell/checkbox/radio

Browse Source
This commit is contained in:
linrz 2019-12-22 20:33:47 +08:00 committed by neverland
parent 7b905a6de8
commit f0815bc405
16 changed files with 209 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/button/README.md
View File

@ -89,6 +89,11 @@ Vue.use(Button);
<van-button color="linear-gradient(to right, #4bb0ff, #6149f6)">Gradient</van-button>
```
### Block Element
```html
<van-button type="primary" block>Display as a block element</van-button>
```
## API
### Props

9
src/button/README.zh-CN.md
View File

@ -109,6 +109,15 @@ Vue.use(Button);
<van-button color="linear-gradient(to right, #4bb0ff, #6149f6)">渐变色按钮</van-button>
```
### 块级元素按钮
通过`block`属性可以设置按钮的元素类型
```html
<van-button type="primary" block>块级元素按钮</van-button>
```
## API
### Props

13
src/button/demo/index.vue
View File

@ -64,6 +64,13 @@
<van-button plain color="#7232dd" :text="$t('pure')" />
<van-button color="linear-gradient(to right, #4bb0ff, #6149f6)" :text="$t('gradient')" />
</demo-block>
<demo-block :title="$t('blockElement')">
<div class="demo-button-row">
<van-button type="primary">{{ $t('normal') }}</van-button>
</div>
<van-button type="primary" block>{{ $t('blockElement') }}</van-button>
</demo-block>
</demo-section>
</template>
@ -96,7 +103,8 @@ export default {
vueRoute: '路由跳转',
customColor: '自定义颜色',
pure: '单色按钮',
gradient: '渐变色按钮'
gradient: '渐变色按钮',
blockElement: '块级元素按钮'
},
'en-US': {
type: 'Type',
@ -124,7 +132,8 @@ export default {
vueRoute: 'Vue Router',
customColor: 'Custom Color',
pure: 'Pure',
gradient: 'Gradient'
gradient: 'Gradient',
blockElement: 'Display as a block element'
}
}
};

3
src/button/test/__snapshots__/demo.spec.js.snap
View File

@ -23,5 +23,8 @@ exports[`renders demo correctly 1`] = `
<div><button class="van-button van-button--primary van-button--large"><span class="van-button__text">大号按钮</span></button> <button class="van-button van-button--primary van-button--normal"><span class="van-button__text">普通按钮</span></button> <button class="van-button van-button--primary van-button--small"><span class="van-button__text">小型按钮</span></button> <button class="van-button van-button--primary van-button--mini"><span class="van-button__text">迷你按钮</span></button></div>
<div><button class="van-button van-button--primary van-button--normal"><span class="van-button__text">URL 跳转</span></button> <button class="van-button van-button--primary van-button--normal"><span class="van-button__text">路由跳转</span></button></div>
<div><button class="van-button van-button--default van-button--normal" style="color: rgb(255, 255, 255); background: rgb(114, 50, 221); border-color: #7232dd;"><span class="van-button__text">单色按钮</span></button> <button class="van-button van-button--default van-button--normal van-button--plain" style="color: rgb(114, 50, 221); border-color: #7232dd;"><span class="van-button__text">单色按钮</span></button> <button class="van-button van-button--default van-button--normal" style="color: rgb(255, 255, 255); border: 0px;"><span class="van-button__text">渐变色按钮</span></button></div>
<div>
<div class="demo-button-row"><button class="van-button van-button--primary van-button--normal"><span class="van-button__text">普通按钮</span></button></div> <button class="van-button van-button--primary van-button--normal van-button--block"><span class="van-button__text">块级元素按钮</span></button>
</div>
</div>
`;

6
src/cell/README.md
View File

@ -94,6 +94,12 @@ Vue.use(Cell).use(CellGroup);
</van-cell>
```
### Vertical Center
```html
<van-cell center title="Cell title" value="Multiple lines content, multiple lines content" />
```
## API
### CellGroup Props

9
src/cell/README.zh-CN.md
View File

@ -102,6 +102,15 @@ Vue.use(Cell).use(CellGroup);
</van-cell>
```
### 垂直居中
通过`center`属性在多行文本时控制左侧标题垂直居中
```html
<van-cell center title="单元格" value="多行内容多行内容多行内容多行内容" />
```
## API
### CellGroup Props

12
src/cell/demo/index.vue
View File

@ -54,6 +54,10 @@
</template>
</van-cell>
</demo-block>
<demo-block :title="$t('verticalCenter')">
<van-cell center :title="$t('cell')" :value="$t('multipleLinesContent')" />
</demo-block>
</demo-section>
</template>
@ -71,7 +75,9 @@ export default {
router: '页面导航',
urlRoute: 'URL 跳转',
vueRoute: '路由跳转',
useSlots: '使用插槽'
useSlots: '使用插槽',
verticalCenter: '垂直居中',
multipleLinesContent: '多行内容多行内容多行内容多行内容',
},
'en-US': {
cell: 'Cell title',
@ -84,7 +90,9 @@ export default {
router: 'Router',
urlRoute: 'URL',
vueRoute: 'Vue Router',
useSlots: 'Use Slots'
useSlots: 'Use Slots',
verticalCenter: 'Vertical center',
multipleLinesContent: 'Multiple lines content, multiple lines content'
}
}
};

6
src/cell/test/__snapshots__/demo.spec.js.snap
View File

@ -98,5 +98,11 @@ exports[`renders demo correctly 1`] = `
<!----></i>
</div>
</div>
<div>
<div class="van-cell van-cell--center">
<div class="van-cell__title"><span>单元格</span></div>
<div class="van-cell__value"><span>多行内容多行内容多行内容多行内容</span></div>
</div>
</div>
</div>
`;

12
src/checkbox/README.md
View File

@ -33,6 +33,12 @@ export default {
<van-checkbox v-model="checked" disabled>Checkbox</van-checkbox>
```
### Disabled Label Click
```html
<van-checkbox v-model="checked" label-disabled>Checkbox</van-checkbox>
```
### Custom Shape
```html
@ -45,6 +51,12 @@ export default {
<van-checkbox v-model="checked" checked-color="#07c160">Checkbox</van-checkbox>
```
### Custom Icon Size
```html
<van-checkbox v-model="checked" icon-size="25px">Checkbox</van-checkbox>
```
### Custom Icon
Use icon slot to custom icon

16
src/checkbox/README.zh-CN.md
View File

@ -37,6 +37,14 @@ export default {
<van-checkbox v-model="checked" disabled>复选框</van-checkbox>
```
### 禁用文本点击
通过设置`label-disabled`属性可以禁用复选框文本点击
```html
<van-checkbox v-model="checked" icon-disabled>复选框</van-checkbox>
```
### 自定义形状
将`shape`属性设置为`square`，复选框的形状会变成方形
@ -53,6 +61,14 @@ export default {
<van-checkbox v-model="checked" checked-color="#07c160">复选框</van-checkbox>
```
### 自定义大小
通过`icon-size`属性可以自定义图标的大小
```html
<van-checkbox v-model="checked" icon-size="25px">复选框</van-checkbox>
```
### 自定义图标
通过 icon 插槽自定义图标，可以通过`slotProps`判断是否为选中状态

22
src/checkbox/demo/index.vue
View File

@ -13,6 +13,12 @@
</van-checkbox>
</demo-block>
<demo-block :title="$t('disabledLabelClick')">
<van-checkbox v-model="checkboxLabel" label-disabled>
{{ $t('checkbox') }}
</van-checkbox>
</demo-block>
<demo-block :title="$t('customShape')">
<van-checkbox v-model="checkboxShape" shape="square">
{{ $t('customColor') }}
@ -25,6 +31,12 @@
</van-checkbox>
</demo-block>
<demo-block :title="$t('customIconSize')">
<van-checkbox v-model="checboxIcon" icon-size="25px">
{{ $t('customIconSize') }}
</van-checkbox>
</demo-block>
<demo-block :title="$t('customIcon')">
<van-checkbox v-model="checkbox3">
{{ $t('customIcon') }}
@ -89,6 +101,7 @@ export default {
'zh-CN': {
checkbox: '复选框',
customIcon: '自定义图标',
customIconSize: '自定义大小',
customColor: '自定义颜色',
customShape: '自定义形状',
title3: '复选框组',
@ -96,11 +109,13 @@ export default {
title5: '搭配单元格组件使用',
toggleAll: '全选与反选',
checkAll: '全选',
inverse: '反选'
inverse: '反选',
disabledLabelClick: '禁用复选框文本点击'
},
'en-US': {
checkbox: 'Checkbox',
customIcon: 'Custom Icon',
customIconSize: 'Custom Icon Size',
customColor: 'Custom Color',
customShape: 'Custom Shape',
title3: 'Checkbox Group',
@ -108,7 +123,8 @@ export default {
title5: 'Inside a Cell',
toggleAll: 'Toggle All',
checkAll: 'Check All',
inverse: 'Inverse'
inverse: 'Inverse',
disabledLabelClick: 'Disable the click event of label'
}
},
@ -118,6 +134,8 @@ export default {
checkbox2: true,
checkbox3: true,
checkboxShape: true,
checkboxLabel: true,
checboxIcon: true,
list: [
'a',
'b',

16
src/checkbox/test/__snapshots__/demo.spec.js.snap
View File

@ -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--round 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--square van-checkbox__icon--checked"><i class="van-icon van-icon-success">
@ -38,6 +46,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--round van-checkbox__icon--checked" style="font-size: 25px;"><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"><img src="https://img.yzcdn.cn/vant/user-active.png"></div><span class="van-checkbox__label">

18
src/radio/README.md
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

22
src/radio/README.zh-CN.md
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`判断是否为选中状态

24
src/radio/demo/index.vue
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'

24
src/radio/test/__snapshots__/demo.spec.js.snap
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">