docs(Form): updat demo, using inset CellGroup (#8938)
This commit is contained in:
neverland
+45
-40
@@ -10,11 +10,12 @@ Register component globally via `app.use`, refer to [Component Registration](#/e
|
||||
|
||||
```js
|
||||
import { createApp } from 'vue';
|
||||
import { Form, Field } from 'vant';
|
||||
import { Form, Field, CellGroup } from 'vant';
|
||||
|
||||
const app = createApp();
|
||||
app.use(Form);
|
||||
app.use(Field);
|
||||
app.use(CellGroup);
|
||||
```
|
||||
|
||||
## Usage
|
||||
@@ -23,21 +24,23 @@ app.use(Field);
|
||||
|
||||
```html
|
||||
<van-form @submit="onSubmit">
|
||||
<van-field
|
||||
v-model="state.username"
|
||||
name="Username"
|
||||
label="Username"
|
||||
placeholder="Username"
|
||||
:rules="[{ required: true, message: 'Username is required' }]"
|
||||
/>
|
||||
<van-field
|
||||
v-model="state.password"
|
||||
type="password"
|
||||
name="Password"
|
||||
label="Password"
|
||||
placeholder="Password"
|
||||
:rules="[{ required: true, message: 'Password is required' }]"
|
||||
/>
|
||||
<van-cell-group inset>
|
||||
<van-field
|
||||
v-model="state.username"
|
||||
name="Username"
|
||||
label="Username"
|
||||
placeholder="Username"
|
||||
:rules="[{ required: true, message: 'Username is required' }]"
|
||||
/>
|
||||
<van-field
|
||||
v-model="state.password"
|
||||
type="password"
|
||||
name="Password"
|
||||
label="Password"
|
||||
placeholder="Password"
|
||||
:rules="[{ required: true, message: 'Password is required' }]"
|
||||
/>
|
||||
</van-cell-group>
|
||||
<div style="margin: 16px;">
|
||||
<van-button round block type="primary" native-type="submit">
|
||||
Submit
|
||||
@@ -71,30 +74,32 @@ export default {
|
||||
|
||||
```html
|
||||
<van-form @failed="onFailed">
|
||||
<van-field
|
||||
v-model="state.value1"
|
||||
name="pattern"
|
||||
placeholder="Use pattern"
|
||||
:rules="[{ pattern, message: 'Error message' }]"
|
||||
/>
|
||||
<van-field
|
||||
v-model="state.value2"
|
||||
name="validator"
|
||||
placeholder="Use validator"
|
||||
:rules="[{ validator, message: 'Error message' }]"
|
||||
/>
|
||||
<van-field
|
||||
v-model="state.value3"
|
||||
name="validatorMessage"
|
||||
placeholder="Use validator to return message"
|
||||
:rules="[{ validator: validatorMessage }]"
|
||||
/>
|
||||
<van-field
|
||||
v-model="state.value4"
|
||||
name="asyncValidator"
|
||||
placeholder="Use async validator"
|
||||
:rules="[{ validator: asyncValidator, message: 'Error message' }]"
|
||||
/>
|
||||
<van-cell-group inset>
|
||||
<van-field
|
||||
v-model="state.value1"
|
||||
name="pattern"
|
||||
placeholder="Use pattern"
|
||||
:rules="[{ pattern, message: 'Error message' }]"
|
||||
/>
|
||||
<van-field
|
||||
v-model="state.value2"
|
||||
name="validator"
|
||||
placeholder="Use validator"
|
||||
:rules="[{ validator, message: 'Error message' }]"
|
||||
/>
|
||||
<van-field
|
||||
v-model="state.value3"
|
||||
name="validatorMessage"
|
||||
placeholder="Use validator to return message"
|
||||
:rules="[{ validator: validatorMessage }]"
|
||||
/>
|
||||
<van-field
|
||||
v-model="state.value4"
|
||||
name="asyncValidator"
|
||||
placeholder="Use async validator"
|
||||
:rules="[{ validator: asyncValidator, message: 'Error message' }]"
|
||||
/>
|
||||
</van-cell-group>
|
||||
<div style="margin: 16px;">
|
||||
<van-button round block type="primary" native-type="submit">
|
||||
Submit
|
||||
|
||||
+49
-44
@@ -10,11 +10,12 @@
|
||||
|
||||
```js
|
||||
import { createApp } from 'vue';
|
||||
import { Form, Field } from 'vant';
|
||||
import { Form, Field, CellGroup } from 'vant';
|
||||
|
||||
const app = createApp();
|
||||
app.use(Form);
|
||||
app.use(Field);
|
||||
app.use(CellGroup);
|
||||
```
|
||||
|
||||
## 代码演示
|
||||
@@ -25,21 +26,23 @@ app.use(Field);
|
||||
|
||||
```html
|
||||
<van-form @submit="onSubmit">
|
||||
<van-field
|
||||
v-model="state.username"
|
||||
name="用户名"
|
||||
label="用户名"
|
||||
placeholder="用户名"
|
||||
:rules="[{ required: true, message: '请填写用户名' }]"
|
||||
/>
|
||||
<van-field
|
||||
v-model="state.password"
|
||||
type="password"
|
||||
name="密码"
|
||||
label="密码"
|
||||
placeholder="密码"
|
||||
:rules="[{ required: true, message: '请填写密码' }]"
|
||||
/>
|
||||
<van-cell-group inset>
|
||||
<van-field
|
||||
v-model="state.username"
|
||||
name="用户名"
|
||||
label="用户名"
|
||||
placeholder="用户名"
|
||||
:rules="[{ required: true, message: '请填写用户名' }]"
|
||||
/>
|
||||
<van-field
|
||||
v-model="state.password"
|
||||
type="password"
|
||||
name="密码"
|
||||
label="密码"
|
||||
placeholder="密码"
|
||||
:rules="[{ required: true, message: '请填写密码' }]"
|
||||
/>
|
||||
</van-cell-group>
|
||||
<div style="margin: 16px;">
|
||||
<van-button round block type="primary" native-type="submit">
|
||||
提交
|
||||
@@ -75,34 +78,36 @@ export default {
|
||||
|
||||
```html
|
||||
<van-form @failed="onFailed">
|
||||
<!-- 通过 pattern 进行正则校验 -->
|
||||
<van-field
|
||||
v-model="state.value1"
|
||||
name="pattern"
|
||||
placeholder="正则校验"
|
||||
:rules="[{ pattern, message: '请输入正确内容' }]"
|
||||
/>
|
||||
<!-- 通过 validator 进行函数校验 -->
|
||||
<van-field
|
||||
v-model="state.value2"
|
||||
name="validator"
|
||||
placeholder="函数校验"
|
||||
:rules="[{ validator, message: '请输入正确内容' }]"
|
||||
/>
|
||||
<!-- 通过 validator 返回错误提示 -->
|
||||
<van-field
|
||||
v-model="state.value3"
|
||||
name="validatorMessage"
|
||||
placeholder="校验函数返回错误提示"
|
||||
:rules="[{ validator: validatorMessage }]"
|
||||
/>
|
||||
<!-- 通过 validator 进行异步函数校验 -->
|
||||
<van-field
|
||||
v-model="state.value4"
|
||||
name="asyncValidator"
|
||||
placeholder="异步函数校验"
|
||||
:rules="[{ validator: asyncValidator, message: '请输入正确内容' }]"
|
||||
/>
|
||||
<van-cell-group inset>
|
||||
<!-- 通过 pattern 进行正则校验 -->
|
||||
<van-field
|
||||
v-model="state.value1"
|
||||
name="pattern"
|
||||
placeholder="正则校验"
|
||||
:rules="[{ pattern, message: '请输入正确内容' }]"
|
||||
/>
|
||||
<!-- 通过 validator 进行函数校验 -->
|
||||
<van-field
|
||||
v-model="state.value2"
|
||||
name="validator"
|
||||
placeholder="函数校验"
|
||||
:rules="[{ validator, message: '请输入正确内容' }]"
|
||||
/>
|
||||
<!-- 通过 validator 返回错误提示 -->
|
||||
<van-field
|
||||
v-model="state.value3"
|
||||
name="validatorMessage"
|
||||
placeholder="校验函数返回错误提示"
|
||||
:rules="[{ validator: validatorMessage }]"
|
||||
/>
|
||||
<!-- 通过 validator 进行异步函数校验 -->
|
||||
<van-field
|
||||
v-model="state.value4"
|
||||
name="asyncValidator"
|
||||
placeholder="异步函数校验"
|
||||
:rules="[{ validator: asyncValidator, message: '请输入正确内容' }]"
|
||||
/>
|
||||
</van-cell-group>
|
||||
<div style="margin: 16px;">
|
||||
<van-button round block type="primary" native-type="submit">
|
||||
提交
|
||||
|
||||
@@ -1,21 +1,24 @@
|
||||
<template>
|
||||
<demo-block :title="t('basicUsage')">
|
||||
<van-form @submit="onSubmit" @failed="onFailed">
|
||||
<van-field
|
||||
v-model="username"
|
||||
name="username"
|
||||
:label="t('username')"
|
||||
:rules="[{ required: true, message: t('requireUsername') }]"
|
||||
:placeholder="t('username')"
|
||||
/>
|
||||
<van-field
|
||||
v-model="password"
|
||||
type="password"
|
||||
name="password"
|
||||
:label="t('password')"
|
||||
:rules="[{ required: true, message: t('requirePassword') }]"
|
||||
:placeholder="t('password')"
|
||||
/>
|
||||
<van-cell-group inset>
|
||||
<van-field
|
||||
v-model="username"
|
||||
name="username"
|
||||
:label="t('username')"
|
||||
:rules="[{ required: true, message: t('requireUsername') }]"
|
||||
:placeholder="t('username')"
|
||||
/>
|
||||
<van-field
|
||||
v-model="password"
|
||||
type="password"
|
||||
name="password"
|
||||
:label="t('password')"
|
||||
:rules="[{ required: true, message: t('requirePassword') }]"
|
||||
:placeholder="t('password')"
|
||||
/>
|
||||
</van-cell-group>
|
||||
|
||||
<div style="margin: 16px 16px 0">
|
||||
<van-button round block type="primary" native-type="submit">
|
||||
{{ t('submit') }}
|
||||
|
||||
+56
-54
@@ -1,68 +1,70 @@
|
||||
<template>
|
||||
<demo-block :title="t('fieldType')">
|
||||
<van-form @submit="onSubmit">
|
||||
<van-field name="switch" :label="t('switch')">
|
||||
<template #input>
|
||||
<van-switch v-model="switchChecked" size="20" />
|
||||
</template>
|
||||
</van-field>
|
||||
<van-cell-group inset>
|
||||
<van-field name="switch" :label="t('switch')">
|
||||
<template #input>
|
||||
<van-switch v-model="switchChecked" size="20" />
|
||||
</template>
|
||||
</van-field>
|
||||
|
||||
<van-field name="checkbox" :label="t('checkbox')">
|
||||
<template #input>
|
||||
<van-checkbox v-model="checkbox" shape="square" />
|
||||
</template>
|
||||
</van-field>
|
||||
<van-field name="checkbox" :label="t('checkbox')">
|
||||
<template #input>
|
||||
<van-checkbox v-model="checkbox" shape="square" />
|
||||
</template>
|
||||
</van-field>
|
||||
|
||||
<van-field name="checkboxGroup" :label="t('checkboxGroup')">
|
||||
<template #input>
|
||||
<van-checkbox-group v-model="checkboxGroup" direction="horizontal">
|
||||
<van-checkbox name="1" shape="square">
|
||||
{{ t('checkbox') }} 1
|
||||
</van-checkbox>
|
||||
<van-checkbox name="2" shape="square">
|
||||
{{ t('checkbox') }} 2
|
||||
</van-checkbox>
|
||||
</van-checkbox-group>
|
||||
</template>
|
||||
</van-field>
|
||||
<van-field name="checkboxGroup" :label="t('checkboxGroup')">
|
||||
<template #input>
|
||||
<van-checkbox-group v-model="checkboxGroup" direction="horizontal">
|
||||
<van-checkbox name="1" shape="square">
|
||||
{{ t('checkbox') }} 1
|
||||
</van-checkbox>
|
||||
<van-checkbox name="2" shape="square">
|
||||
{{ t('checkbox') }} 2
|
||||
</van-checkbox>
|
||||
</van-checkbox-group>
|
||||
</template>
|
||||
</van-field>
|
||||
|
||||
<van-field name="radio" :label="t('radio')">
|
||||
<template #input>
|
||||
<van-radio-group v-model="radio" direction="horizontal">
|
||||
<van-radio name="1">{{ t('radio') }} 1</van-radio>
|
||||
<van-radio name="2">{{ t('radio') }} 2</van-radio>
|
||||
</van-radio-group>
|
||||
</template>
|
||||
</van-field>
|
||||
<van-field name="radio" :label="t('radio')">
|
||||
<template #input>
|
||||
<van-radio-group v-model="radio" direction="horizontal">
|
||||
<van-radio name="1">{{ t('radio') }} 1</van-radio>
|
||||
<van-radio name="2">{{ t('radio') }} 2</van-radio>
|
||||
</van-radio-group>
|
||||
</template>
|
||||
</van-field>
|
||||
|
||||
<van-field name="stepper" :label="t('stepper')">
|
||||
<template #input>
|
||||
<van-stepper v-model="stepper" />
|
||||
</template>
|
||||
</van-field>
|
||||
<van-field name="stepper" :label="t('stepper')">
|
||||
<template #input>
|
||||
<van-stepper v-model="stepper" />
|
||||
</template>
|
||||
</van-field>
|
||||
|
||||
<van-field name="rate" :label="t('rate')">
|
||||
<template #input>
|
||||
<van-rate v-model="rate" />
|
||||
</template>
|
||||
</van-field>
|
||||
<van-field name="rate" :label="t('rate')">
|
||||
<template #input>
|
||||
<van-rate v-model="rate" />
|
||||
</template>
|
||||
</van-field>
|
||||
|
||||
<van-field name="slider" :label="t('slider')">
|
||||
<template #input>
|
||||
<van-slider v-model="slider" />
|
||||
</template>
|
||||
</van-field>
|
||||
<van-field name="slider" :label="t('slider')">
|
||||
<template #input>
|
||||
<van-slider v-model="slider" />
|
||||
</template>
|
||||
</van-field>
|
||||
|
||||
<van-field name="uploader" :label="t('uploader')">
|
||||
<template #input>
|
||||
<van-uploader v-model="uploader" max-count="2" />
|
||||
</template>
|
||||
</van-field>
|
||||
<van-field name="uploader" :label="t('uploader')">
|
||||
<template #input>
|
||||
<van-uploader v-model="uploader" max-count="2" />
|
||||
</template>
|
||||
</van-field>
|
||||
|
||||
<field-type-picker />
|
||||
<field-type-datetime-picker />
|
||||
<field-type-area />
|
||||
<field-type-calendar />
|
||||
<field-type-picker />
|
||||
<field-type-datetime-picker />
|
||||
<field-type-area />
|
||||
<field-type-calendar />
|
||||
</van-cell-group>
|
||||
|
||||
<div style="margin: 16px 16px 0">
|
||||
<van-button round block type="primary" native-type="submit">
|
||||
|
||||
@@ -1,34 +1,36 @@
|
||||
<template>
|
||||
<demo-block :title="t('title')">
|
||||
<van-form @sumbit="onSubmit" @failed="onFailed">
|
||||
<van-field
|
||||
v-model="value1"
|
||||
name="pattern"
|
||||
:label="t('label')"
|
||||
:rules="[{ pattern, message: t('message') }]"
|
||||
:placeholder="t('pattern')"
|
||||
/>
|
||||
<van-field
|
||||
v-model="value2"
|
||||
name="validator"
|
||||
:label="t('label')"
|
||||
:rules="[{ validator, message: t('message') }]"
|
||||
:placeholder="t('validator')"
|
||||
/>
|
||||
<van-field
|
||||
v-model="value3"
|
||||
name="validatorMessage"
|
||||
:label="t('label')"
|
||||
:rules="[{ validator: validatorMessage }]"
|
||||
:placeholder="t('validatorMessage')"
|
||||
/>
|
||||
<van-field
|
||||
v-model="value4"
|
||||
name="asyncValidator"
|
||||
:label="t('label')"
|
||||
:rules="[{ validator: asyncValidator, message: t('message') }]"
|
||||
:placeholder="t('asyncValidator')"
|
||||
/>
|
||||
<van-cell-group inset>
|
||||
<van-field
|
||||
v-model="value1"
|
||||
name="pattern"
|
||||
:label="t('label')"
|
||||
:rules="[{ pattern, message: t('message') }]"
|
||||
:placeholder="t('pattern')"
|
||||
/>
|
||||
<van-field
|
||||
v-model="value2"
|
||||
name="validator"
|
||||
:label="t('label')"
|
||||
:rules="[{ validator, message: t('message') }]"
|
||||
:placeholder="t('validator')"
|
||||
/>
|
||||
<van-field
|
||||
v-model="value3"
|
||||
name="validatorMessage"
|
||||
:label="t('label')"
|
||||
:rules="[{ validator: validatorMessage }]"
|
||||
:placeholder="t('validatorMessage')"
|
||||
/>
|
||||
<van-field
|
||||
v-model="value4"
|
||||
name="asyncValidator"
|
||||
:label="t('label')"
|
||||
:rules="[{ validator: asyncValidator, message: t('message') }]"
|
||||
:placeholder="t('asyncValidator')"
|
||||
/>
|
||||
</van-cell-group>
|
||||
<div style="margin: 16px 16px 0">
|
||||
<van-button round block type="primary" native-type="submit">
|
||||
{{ t('submit') }}
|
||||
|
||||
@@ -3,35 +3,37 @@
|
||||
exports[`should render demo and match snapshot 1`] = `
|
||||
<div>
|
||||
<form class="van-form">
|
||||
<div class="van-cell van-field">
|
||||
<div class="van-cell__title van-field__label">
|
||||
<span>
|
||||
Username
|
||||
</span>
|
||||
</div>
|
||||
<div class="van-cell__value van-field__value">
|
||||
<div class="van-field__body">
|
||||
<input type="text"
|
||||
name="username"
|
||||
class="van-field__control"
|
||||
placeholder="Username"
|
||||
>
|
||||
<div class="van-cell-group van-cell-group--inset">
|
||||
<div class="van-cell van-field">
|
||||
<div class="van-cell__title van-field__label">
|
||||
<span>
|
||||
Username
|
||||
</span>
|
||||
</div>
|
||||
<div class="van-cell__value van-field__value">
|
||||
<div class="van-field__body">
|
||||
<input type="text"
|
||||
name="username"
|
||||
class="van-field__control"
|
||||
placeholder="Username"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-cell van-field">
|
||||
<div class="van-cell__title van-field__label">
|
||||
<span>
|
||||
Password
|
||||
</span>
|
||||
</div>
|
||||
<div class="van-cell__value van-field__value">
|
||||
<div class="van-field__body">
|
||||
<input type="password"
|
||||
name="password"
|
||||
class="van-field__control"
|
||||
placeholder="Password"
|
||||
>
|
||||
<div class="van-cell van-field">
|
||||
<div class="van-cell__title van-field__label">
|
||||
<span>
|
||||
Password
|
||||
</span>
|
||||
</div>
|
||||
<div class="van-cell__value van-field__value">
|
||||
<div class="van-field__body">
|
||||
<input type="password"
|
||||
name="password"
|
||||
class="van-field__control"
|
||||
placeholder="Password"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -50,67 +52,69 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
</div>
|
||||
<div>
|
||||
<form class="van-form">
|
||||
<div class="van-cell van-field">
|
||||
<div class="van-cell__title van-field__label">
|
||||
<span>
|
||||
Label
|
||||
</span>
|
||||
</div>
|
||||
<div class="van-cell__value van-field__value">
|
||||
<div class="van-field__body">
|
||||
<input type="text"
|
||||
name="pattern"
|
||||
class="van-field__control"
|
||||
placeholder="Use pattern"
|
||||
>
|
||||
<div class="van-cell-group van-cell-group--inset">
|
||||
<div class="van-cell van-field">
|
||||
<div class="van-cell__title van-field__label">
|
||||
<span>
|
||||
Label
|
||||
</span>
|
||||
</div>
|
||||
<div class="van-cell__value van-field__value">
|
||||
<div class="van-field__body">
|
||||
<input type="text"
|
||||
name="pattern"
|
||||
class="van-field__control"
|
||||
placeholder="Use pattern"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-cell van-field">
|
||||
<div class="van-cell__title van-field__label">
|
||||
<span>
|
||||
Label
|
||||
</span>
|
||||
</div>
|
||||
<div class="van-cell__value van-field__value">
|
||||
<div class="van-field__body">
|
||||
<input type="text"
|
||||
name="validator"
|
||||
class="van-field__control"
|
||||
placeholder="Use validator"
|
||||
>
|
||||
<div class="van-cell van-field">
|
||||
<div class="van-cell__title van-field__label">
|
||||
<span>
|
||||
Label
|
||||
</span>
|
||||
</div>
|
||||
<div class="van-cell__value van-field__value">
|
||||
<div class="van-field__body">
|
||||
<input type="text"
|
||||
name="validator"
|
||||
class="van-field__control"
|
||||
placeholder="Use validator"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-cell van-field">
|
||||
<div class="van-cell__title van-field__label">
|
||||
<span>
|
||||
Label
|
||||
</span>
|
||||
</div>
|
||||
<div class="van-cell__value van-field__value">
|
||||
<div class="van-field__body">
|
||||
<input type="text"
|
||||
name="validatorMessage"
|
||||
class="van-field__control"
|
||||
placeholder="Use validator to return message"
|
||||
>
|
||||
<div class="van-cell van-field">
|
||||
<div class="van-cell__title van-field__label">
|
||||
<span>
|
||||
Label
|
||||
</span>
|
||||
</div>
|
||||
<div class="van-cell__value van-field__value">
|
||||
<div class="van-field__body">
|
||||
<input type="text"
|
||||
name="validatorMessage"
|
||||
class="van-field__control"
|
||||
placeholder="Use validator to return message"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-cell van-field">
|
||||
<div class="van-cell__title van-field__label">
|
||||
<span>
|
||||
Label
|
||||
</span>
|
||||
</div>
|
||||
<div class="van-cell__value van-field__value">
|
||||
<div class="van-field__body">
|
||||
<input type="text"
|
||||
name="asyncValidator"
|
||||
class="van-field__control"
|
||||
placeholder="Use async validator"
|
||||
>
|
||||
<div class="van-cell van-field">
|
||||
<div class="van-cell__title van-field__label">
|
||||
<span>
|
||||
Label
|
||||
</span>
|
||||
</div>
|
||||
<div class="van-cell__value van-field__value">
|
||||
<div class="van-field__body">
|
||||
<input type="text"
|
||||
name="asyncValidator"
|
||||
class="van-field__control"
|
||||
placeholder="Use async validator"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -129,62 +133,39 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
</div>
|
||||
<div>
|
||||
<form class="van-form">
|
||||
<div class="van-cell van-field">
|
||||
<div class="van-cell__title van-field__label">
|
||||
<span>
|
||||
Switch
|
||||
</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"
|
||||
class="van-switch"
|
||||
style="font-size: 20px;"
|
||||
aria-checked="false"
|
||||
>
|
||||
<div class="van-switch__node">
|
||||
<div class="van-cell-group van-cell-group--inset">
|
||||
<div class="van-cell van-field">
|
||||
<div class="van-cell__title van-field__label">
|
||||
<span>
|
||||
Switch
|
||||
</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"
|
||||
class="van-switch"
|
||||
style="font-size: 20px;"
|
||||
aria-checked="false"
|
||||
>
|
||||
<div class="van-switch__node">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-cell van-field">
|
||||
<div class="van-cell__title van-field__label">
|
||||
<span>
|
||||
Checkbox
|
||||
</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="checkbox"
|
||||
class="van-checkbox"
|
||||
tabindex="0"
|
||||
aria-checked="false"
|
||||
>
|
||||
<div class="van-checkbox__icon van-checkbox__icon--square">
|
||||
<i class="van-badge__wrapper van-icon van-icon-success">
|
||||
</i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-cell van-field">
|
||||
<div class="van-cell__title van-field__label">
|
||||
<span>
|
||||
Checkbox
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-cell van-field">
|
||||
<div class="van-cell__title van-field__label">
|
||||
<span>
|
||||
Checkbox Group
|
||||
</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 class="van-checkbox-group van-checkbox-group--horizontal">
|
||||
<div class="van-cell__value van-field__value">
|
||||
<div class="van-field__body">
|
||||
<div class="van-field__control van-field__control--custom">
|
||||
<div role="checkbox"
|
||||
class="van-checkbox van-checkbox--horizontal"
|
||||
class="van-checkbox"
|
||||
tabindex="0"
|
||||
aria-checked="false"
|
||||
>
|
||||
@@ -192,192 +173,217 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
<i class="van-badge__wrapper van-icon van-icon-success">
|
||||
</i>
|
||||
</div>
|
||||
<span class="van-checkbox__label">
|
||||
Checkbox 1
|
||||
</span>
|
||||
</div>
|
||||
<div role="checkbox"
|
||||
class="van-checkbox van-checkbox--horizontal"
|
||||
tabindex="0"
|
||||
aria-checked="false"
|
||||
>
|
||||
<div class="van-checkbox__icon van-checkbox__icon--square">
|
||||
<i class="van-badge__wrapper van-icon van-icon-success">
|
||||
</i>
|
||||
</div>
|
||||
<span class="van-checkbox__label">
|
||||
Checkbox 2
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-cell van-field">
|
||||
<div class="van-cell__title van-field__label">
|
||||
<span>
|
||||
Radio
|
||||
</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 class="van-radio-group van-radio-group--horizontal"
|
||||
role="radiogroup"
|
||||
>
|
||||
<div role="radio"
|
||||
class="van-radio van-radio--horizontal"
|
||||
tabindex="0"
|
||||
aria-checked="true"
|
||||
>
|
||||
<div class="van-radio__icon van-radio__icon--round van-radio__icon--checked">
|
||||
<i class="van-badge__wrapper van-icon van-icon-success">
|
||||
</i>
|
||||
</div>
|
||||
<span class="van-radio__label">
|
||||
Radio 1
|
||||
</span>
|
||||
</div>
|
||||
<div role="radio"
|
||||
class="van-radio van-radio--horizontal"
|
||||
tabindex="0"
|
||||
aria-checked="false"
|
||||
>
|
||||
<div class="van-radio__icon van-radio__icon--round">
|
||||
<i class="van-badge__wrapper van-icon van-icon-success">
|
||||
</i>
|
||||
</div>
|
||||
<span class="van-radio__label">
|
||||
Radio 2
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-cell van-field">
|
||||
<div class="van-cell__title van-field__label">
|
||||
<span>
|
||||
Checkbox Group
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-cell van-field">
|
||||
<div class="van-cell__title van-field__label">
|
||||
<span>
|
||||
Stepper
|
||||
</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 class="van-stepper">
|
||||
<button type="button"
|
||||
class="van-stepper__minus van-stepper__minus--disabled"
|
||||
>
|
||||
</button>
|
||||
<input type="text"
|
||||
role="spinbutton"
|
||||
class="van-stepper__input"
|
||||
inputmode="decimal"
|
||||
aria-valuemax="Infinity"
|
||||
aria-valuemin="1"
|
||||
aria-valuenow="1"
|
||||
>
|
||||
<button type="button"
|
||||
class="van-stepper__plus"
|
||||
>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-cell van-field">
|
||||
<div class="van-cell__title van-field__label">
|
||||
<span>
|
||||
Rate
|
||||
</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="radiogroup"
|
||||
class="van-rate"
|
||||
tabindex="0"
|
||||
>
|
||||
<div role="radio"
|
||||
class="van-rate__item"
|
||||
tabindex="0"
|
||||
aria-setsize="5"
|
||||
aria-posinset="1"
|
||||
aria-checked="true"
|
||||
>
|
||||
<i class="van-badge__wrapper van-icon van-icon-star van-rate__icon van-rate__icon--full">
|
||||
</i>
|
||||
</div>
|
||||
<div role="radio"
|
||||
class="van-rate__item"
|
||||
tabindex="0"
|
||||
aria-setsize="5"
|
||||
aria-posinset="2"
|
||||
aria-checked="true"
|
||||
>
|
||||
<i class="van-badge__wrapper van-icon van-icon-star van-rate__icon van-rate__icon--full">
|
||||
</i>
|
||||
</div>
|
||||
<div role="radio"
|
||||
class="van-rate__item"
|
||||
tabindex="0"
|
||||
aria-setsize="5"
|
||||
aria-posinset="3"
|
||||
aria-checked="true"
|
||||
>
|
||||
<i class="van-badge__wrapper van-icon van-icon-star van-rate__icon van-rate__icon--full">
|
||||
</i>
|
||||
</div>
|
||||
<div role="radio"
|
||||
class="van-rate__item"
|
||||
tabindex="0"
|
||||
aria-setsize="5"
|
||||
aria-posinset="4"
|
||||
aria-checked="false"
|
||||
>
|
||||
<i class="van-badge__wrapper van-icon van-icon-star-o van-rate__icon">
|
||||
</i>
|
||||
</div>
|
||||
<div role="radio"
|
||||
class="van-rate__item"
|
||||
tabindex="0"
|
||||
aria-setsize="5"
|
||||
aria-posinset="5"
|
||||
aria-checked="false"
|
||||
>
|
||||
<i class="van-badge__wrapper van-icon van-icon-star-o van-rate__icon">
|
||||
</i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-cell van-field">
|
||||
<div class="van-cell__title van-field__label">
|
||||
<span>
|
||||
Slider
|
||||
</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 class="van-slider">
|
||||
<div class="van-slider__bar"
|
||||
style="width: 50%; left: 0%;"
|
||||
>
|
||||
<div role="slider"
|
||||
class="van-slider__button-wrapper"
|
||||
<div class="van-cell__value van-field__value">
|
||||
<div class="van-field__body">
|
||||
<div class="van-field__control van-field__control--custom">
|
||||
<div class="van-checkbox-group van-checkbox-group--horizontal">
|
||||
<div role="checkbox"
|
||||
class="van-checkbox van-checkbox--horizontal"
|
||||
tabindex="0"
|
||||
aria-valuemin="0"
|
||||
aria-valuenow="50"
|
||||
aria-valuemax="100"
|
||||
aria-orientation="horizontal"
|
||||
aria-checked="false"
|
||||
>
|
||||
<div class="van-slider__button">
|
||||
<div class="van-checkbox__icon van-checkbox__icon--square">
|
||||
<i class="van-badge__wrapper van-icon van-icon-success">
|
||||
</i>
|
||||
</div>
|
||||
<span class="van-checkbox__label">
|
||||
Checkbox 1
|
||||
</span>
|
||||
</div>
|
||||
<div role="checkbox"
|
||||
class="van-checkbox van-checkbox--horizontal"
|
||||
tabindex="0"
|
||||
aria-checked="false"
|
||||
>
|
||||
<div class="van-checkbox__icon van-checkbox__icon--square">
|
||||
<i class="van-badge__wrapper van-icon van-icon-success">
|
||||
</i>
|
||||
</div>
|
||||
<span class="van-checkbox__label">
|
||||
Checkbox 2
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-cell van-field">
|
||||
<div class="van-cell__title van-field__label">
|
||||
<span>
|
||||
Radio
|
||||
</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 class="van-radio-group van-radio-group--horizontal"
|
||||
role="radiogroup"
|
||||
>
|
||||
<div role="radio"
|
||||
class="van-radio van-radio--horizontal"
|
||||
tabindex="0"
|
||||
aria-checked="true"
|
||||
>
|
||||
<div class="van-radio__icon van-radio__icon--round van-radio__icon--checked">
|
||||
<i class="van-badge__wrapper van-icon van-icon-success">
|
||||
</i>
|
||||
</div>
|
||||
<span class="van-radio__label">
|
||||
Radio 1
|
||||
</span>
|
||||
</div>
|
||||
<div role="radio"
|
||||
class="van-radio van-radio--horizontal"
|
||||
tabindex="0"
|
||||
aria-checked="false"
|
||||
>
|
||||
<div class="van-radio__icon van-radio__icon--round">
|
||||
<i class="van-badge__wrapper van-icon van-icon-success">
|
||||
</i>
|
||||
</div>
|
||||
<span class="van-radio__label">
|
||||
Radio 2
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-cell van-field">
|
||||
<div class="van-cell__title van-field__label">
|
||||
<span>
|
||||
Stepper
|
||||
</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 class="van-stepper">
|
||||
<button type="button"
|
||||
class="van-stepper__minus van-stepper__minus--disabled"
|
||||
>
|
||||
</button>
|
||||
<input type="text"
|
||||
role="spinbutton"
|
||||
class="van-stepper__input"
|
||||
inputmode="decimal"
|
||||
aria-valuemax="Infinity"
|
||||
aria-valuemin="1"
|
||||
aria-valuenow="1"
|
||||
>
|
||||
<button type="button"
|
||||
class="van-stepper__plus"
|
||||
>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-cell van-field">
|
||||
<div class="van-cell__title van-field__label">
|
||||
<span>
|
||||
Rate
|
||||
</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="radiogroup"
|
||||
class="van-rate"
|
||||
tabindex="0"
|
||||
>
|
||||
<div role="radio"
|
||||
class="van-rate__item"
|
||||
tabindex="0"
|
||||
aria-setsize="5"
|
||||
aria-posinset="1"
|
||||
aria-checked="true"
|
||||
>
|
||||
<i class="van-badge__wrapper van-icon van-icon-star van-rate__icon van-rate__icon--full">
|
||||
</i>
|
||||
</div>
|
||||
<div role="radio"
|
||||
class="van-rate__item"
|
||||
tabindex="0"
|
||||
aria-setsize="5"
|
||||
aria-posinset="2"
|
||||
aria-checked="true"
|
||||
>
|
||||
<i class="van-badge__wrapper van-icon van-icon-star van-rate__icon van-rate__icon--full">
|
||||
</i>
|
||||
</div>
|
||||
<div role="radio"
|
||||
class="van-rate__item"
|
||||
tabindex="0"
|
||||
aria-setsize="5"
|
||||
aria-posinset="3"
|
||||
aria-checked="true"
|
||||
>
|
||||
<i class="van-badge__wrapper van-icon van-icon-star van-rate__icon van-rate__icon--full">
|
||||
</i>
|
||||
</div>
|
||||
<div role="radio"
|
||||
class="van-rate__item"
|
||||
tabindex="0"
|
||||
aria-setsize="5"
|
||||
aria-posinset="4"
|
||||
aria-checked="false"
|
||||
>
|
||||
<i class="van-badge__wrapper van-icon van-icon-star-o van-rate__icon">
|
||||
</i>
|
||||
</div>
|
||||
<div role="radio"
|
||||
class="van-rate__item"
|
||||
tabindex="0"
|
||||
aria-setsize="5"
|
||||
aria-posinset="5"
|
||||
aria-checked="false"
|
||||
>
|
||||
<i class="van-badge__wrapper van-icon van-icon-star-o van-rate__icon">
|
||||
</i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-cell van-field">
|
||||
<div class="van-cell__title van-field__label">
|
||||
<span>
|
||||
Slider
|
||||
</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 class="van-slider">
|
||||
<div class="van-slider__bar"
|
||||
style="width: 50%; left: 0%;"
|
||||
>
|
||||
<div role="slider"
|
||||
class="van-slider__button-wrapper"
|
||||
tabindex="0"
|
||||
aria-valuemin="0"
|
||||
aria-valuenow="50"
|
||||
aria-valuemax="100"
|
||||
aria-orientation="horizontal"
|
||||
>
|
||||
<div class="van-slider__button">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -385,125 +391,125 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-cell van-field">
|
||||
<div class="van-cell__title van-field__label">
|
||||
<span>
|
||||
Uploader
|
||||
</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 class="van-uploader">
|
||||
<div class="van-uploader__wrapper">
|
||||
<div class="van-uploader__preview">
|
||||
<div class="van-image van-uploader__preview-image">
|
||||
<img src="https://img.yzcdn.cn/vant/leaf.jpg"
|
||||
class="van-image__img"
|
||||
style="object-fit: cover;"
|
||||
>
|
||||
<div class="van-image__loading">
|
||||
<i class="van-badge__wrapper van-icon van-icon-photo van-image__loading-icon">
|
||||
<div class="van-cell van-field">
|
||||
<div class="van-cell__title van-field__label">
|
||||
<span>
|
||||
Uploader
|
||||
</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 class="van-uploader">
|
||||
<div class="van-uploader__wrapper">
|
||||
<div class="van-uploader__preview">
|
||||
<div class="van-image van-uploader__preview-image">
|
||||
<img src="https://img.yzcdn.cn/vant/leaf.jpg"
|
||||
class="van-image__img"
|
||||
style="object-fit: cover;"
|
||||
>
|
||||
<div class="van-image__loading">
|
||||
<i class="van-badge__wrapper van-icon van-icon-photo van-image__loading-icon">
|
||||
</i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-uploader__preview-delete">
|
||||
<i class="van-badge__wrapper van-icon van-icon-cross van-uploader__preview-delete-icon">
|
||||
</i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-uploader__preview-delete">
|
||||
<i class="van-badge__wrapper van-icon van-icon-cross van-uploader__preview-delete-icon">
|
||||
<div class="van-uploader__upload">
|
||||
<i class="van-badge__wrapper van-icon van-icon-photograph van-uploader__upload-icon">
|
||||
</i>
|
||||
<input type="file"
|
||||
class="van-uploader__input"
|
||||
accept="image/*"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-uploader__upload">
|
||||
<i class="van-badge__wrapper van-icon van-icon-photograph van-uploader__upload-icon">
|
||||
</i>
|
||||
<input type="file"
|
||||
class="van-uploader__input"
|
||||
accept="image/*"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-cell van-cell--clickable van-field"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
>
|
||||
<div class="van-cell__title van-field__label">
|
||||
<span>
|
||||
Picker
|
||||
</span>
|
||||
</div>
|
||||
<div class="van-cell__value van-field__value">
|
||||
<div class="van-field__body">
|
||||
<input type="text"
|
||||
name="picker"
|
||||
class="van-field__control"
|
||||
readonly
|
||||
placeholder="Select city"
|
||||
>
|
||||
<div class="van-cell van-cell--clickable van-field"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
>
|
||||
<div class="van-cell__title van-field__label">
|
||||
<span>
|
||||
Picker
|
||||
</span>
|
||||
</div>
|
||||
<div class="van-cell__value van-field__value">
|
||||
<div class="van-field__body">
|
||||
<input type="text"
|
||||
name="picker"
|
||||
class="van-field__control"
|
||||
readonly
|
||||
placeholder="Select city"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-cell van-cell--clickable van-field"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
>
|
||||
<div class="van-cell__title van-field__label">
|
||||
<span>
|
||||
Datetime Picker
|
||||
</span>
|
||||
</div>
|
||||
<div class="van-cell__value van-field__value">
|
||||
<div class="van-field__body">
|
||||
<input type="text"
|
||||
name="datetimePicker"
|
||||
class="van-field__control"
|
||||
readonly
|
||||
placeholder="Select time"
|
||||
>
|
||||
<div class="van-cell van-cell--clickable van-field"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
>
|
||||
<div class="van-cell__title van-field__label">
|
||||
<span>
|
||||
Datetime Picker
|
||||
</span>
|
||||
</div>
|
||||
<div class="van-cell__value van-field__value">
|
||||
<div class="van-field__body">
|
||||
<input type="text"
|
||||
name="datetimePicker"
|
||||
class="van-field__control"
|
||||
readonly
|
||||
placeholder="Select time"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-cell van-cell--clickable van-field"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
>
|
||||
<div class="van-cell__title van-field__label">
|
||||
<span>
|
||||
Area Picker
|
||||
</span>
|
||||
</div>
|
||||
<div class="van-cell__value van-field__value">
|
||||
<div class="van-field__body">
|
||||
<input type="text"
|
||||
name="area"
|
||||
class="van-field__control"
|
||||
readonly
|
||||
placeholder="Select area"
|
||||
>
|
||||
<div class="van-cell van-cell--clickable van-field"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
>
|
||||
<div class="van-cell__title van-field__label">
|
||||
<span>
|
||||
Area Picker
|
||||
</span>
|
||||
</div>
|
||||
<div class="van-cell__value van-field__value">
|
||||
<div class="van-field__body">
|
||||
<input type="text"
|
||||
name="area"
|
||||
class="van-field__control"
|
||||
readonly
|
||||
placeholder="Select area"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-cell van-cell--clickable van-field"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
>
|
||||
<div class="van-cell__title van-field__label">
|
||||
<span>
|
||||
Calendar
|
||||
</span>
|
||||
</div>
|
||||
<div class="van-cell__value van-field__value">
|
||||
<div class="van-field__body">
|
||||
<input type="text"
|
||||
name="calendar"
|
||||
class="van-field__control"
|
||||
readonly
|
||||
placeholder="Select date"
|
||||
>
|
||||
<div class="van-cell van-cell--clickable van-field"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
>
|
||||
<div class="van-cell__title van-field__label">
|
||||
<span>
|
||||
Calendar
|
||||
</span>
|
||||
</div>
|
||||
<div class="van-cell__value van-field__value">
|
||||
<div class="van-field__body">
|
||||
<input type="text"
|
||||
name="calendar"
|
||||
class="van-field__control"
|
||||
readonly
|
||||
placeholder="Select date"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user