mirror of
https://gitee.com/ant-design-vue/ant-design-vue.git
synced 2024-12-01 11:38:36 +08:00
docs: update form demo
This commit is contained in:
tangjinzhou
parent
3a49503baa
commit
4d6627dcd4
@ -569,6 +569,20 @@ exports[`renders ./components/form/demo/validate-other.vue correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ant-row ant-form-item">
|
||||
<div class="ant-col-6 ant-form-item-label"><label for="checkbox-group" title="Checkbox.Group" class="">Checkbox.Group</label></div>
|
||||
<div class="ant-col-14 ant-form-item-control-wrapper">
|
||||
<div class="ant-form-item-control has-success"><span class="ant-form-item-children"><div class="ant-checkbox-group" data-__meta="[object Object]" data-__field="[object Object]" id="checkbox-group" style="width: 100%;"><div class="ant-row"><div class="ant-col-8"><label class="ant-checkbox-wrapper ant-checkbox-wrapper-checked"><span class="ant-checkbox ant-checkbox-checked"><input type="checkbox" class="ant-checkbox-input" value="A"><span class="ant-checkbox-inner"></span></span><span>A</span></label></div>
|
||||
<div class="ant-col-8"><label class="ant-checkbox-wrapper ant-checkbox-wrapper-checked ant-checkbox-wrapper-disabled"><span class="ant-checkbox ant-checkbox-checked ant-checkbox-disabled"><input type="checkbox" disabled="disabled" class="ant-checkbox-input" value="B"><span class="ant-checkbox-inner"></span></span><span>B</span></label></div>
|
||||
<div class="ant-col-8"><label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input" value="C"><span class="ant-checkbox-inner"></span></span><span>C</span></label></div>
|
||||
<div class="ant-col-8"><label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input" value="D"><span class="ant-checkbox-inner"></span></span><span>D</span></label></div>
|
||||
<div class="ant-col-8"><label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input" value="E"><span class="ant-checkbox-inner"></span></span><span>E</span></label></div>
|
||||
</div>
|
||||
</div></span>
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ant-row ant-form-item">
|
||||
<div class="ant-col-6 ant-form-item-label"><label for="rate" title="Rate" class="">Rate</label></div>
|
||||
<div class="ant-col-14 ant-form-item-control-wrapper">
|
||||
@ -691,27 +705,24 @@ exports[`renders ./components/form/demo/validate-static.vue correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ant-row ant-form-item">
|
||||
<div class="ant-row ant-form-item" style="margin-bottom: 0px;">
|
||||
<div class="ant-col-xs-24 ant-col-sm-5 ant-form-item-label"><label title="inline" class="">inline</label></div>
|
||||
<div class="ant-col-xs-24 ant-col-sm-12 ant-form-item-control-wrapper">
|
||||
<div class="ant-form-item-control"><span class="ant-form-item-children"><div class="ant-col-11"><div class="ant-row ant-form-item ant-form-item-with-help"><div class="ant-form-item-control-wrapper"><div class="ant-form-item-control has-error"><span class="ant-form-item-children"><span class="ant-calendar-picker" style="width: 100%;"><div class=""><input readonly="true" placeholder="Select date" class="ant-calendar-picker-input ant-input"><i class="ant-calendar-picker-icon anticon anticon-calendar"><svg viewBox="64 64 896 896" data-icon="calendar" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M880 184H712v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H384v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H144c-17.7 0-32 14.3-32 32v664c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V216c0-17.7-14.3-32-32-32zm-40 656H184V460h656v380zM184 392V256h128v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h256v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h128v136H184z"></path></svg></i></div></span></span>
|
||||
<div class="ant-form-item-control"><span class="ant-form-item-children"><div class="ant-row ant-form-item ant-form-item-with-help" style="display: inline-block;"><div class="ant-form-item-control-wrapper"><div class="ant-form-item-control has-error"><span class="ant-form-item-children"><span class="ant-calendar-picker" style="width: 100%;"><div class=""><input readonly="true" placeholder="Select date" class="ant-calendar-picker-input ant-input"><i class="ant-calendar-picker-icon anticon anticon-calendar"><svg viewBox="64 64 896 896" data-icon="calendar" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M880 184H712v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H384v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H144c-17.7 0-32 14.3-32 32v664c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V216c0-17.7-14.3-32-32-32zm-40 656H184V460h656v380zM184 392V256h128v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h256v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h128v136H184z"></path></svg></i></div></span></span>
|
||||
<div class="ant-form-explain show-help-enter">Please select the correct date</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ant-col-2"><span style="display: inline-block; width: 100%; text-align: center;">
|
||||
-
|
||||
</span></div>
|
||||
<div class="ant-col-11">
|
||||
<div class="ant-row ant-form-item">
|
||||
<div class="ant-form-item-control-wrapper">
|
||||
<div class="ant-form-item-control"><span class="ant-form-item-children"><span class="ant-calendar-picker" style="width: 100%;"><div class=""><input readonly="true" placeholder="Select date" class="ant-calendar-picker-input ant-input"><i class="ant-calendar-picker-icon anticon anticon-calendar"><svg viewBox="64 64 896 896" data-icon="calendar" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M880 184H712v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H384v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H144c-17.7 0-32 14.3-32 32v664c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V216c0-17.7-14.3-32-32-32zm-40 656H184V460h656v380zM184 392V256h128v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h256v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h128v136H184z"></path></svg></i></div></span></span>
|
||||
<!---->
|
||||
</div>
|
||||
</div><span style="display: inline-block; width: 24px; text-align: center;">
|
||||
-
|
||||
</span>
|
||||
<div class="ant-row ant-form-item" style="display: inline-block;">
|
||||
<div class="ant-form-item-control-wrapper">
|
||||
<div class="ant-form-item-control"><span class="ant-form-item-children"><span class="ant-calendar-picker" style="width: 100%;"><div class=""><input readonly="true" placeholder="Select date" class="ant-calendar-picker-input ant-input"><i class="ant-calendar-picker-icon anticon anticon-calendar"><svg viewBox="64 64 896 896" data-icon="calendar" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M880 184H712v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H384v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H144c-17.7 0-32 14.3-32 32v664c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V216c0-17.7-14.3-32-32-32zm-40 656H184V460h656v380zM184 392V256h128v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h256v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h128v136H184z"></path></svg></i></div></span></span>
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
</div></span>
|
||||
</div>
|
||||
</span>
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -96,6 +96,21 @@ Demostration for validataion configuration for form controls which are not show
|
||||
</a-radio-group>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item
|
||||
v-bind="formItemLayout"
|
||||
label='Checkbox.Group'
|
||||
>
|
||||
<a-checkbox-group style="width: 100%;" v-decorator="['checkbox-group', {initialValue: ['A', 'B']}]">
|
||||
<a-row>
|
||||
<a-col :span="8"><a-checkbox value="A">A</a-checkbox></a-col>
|
||||
<a-col :span="8"><a-checkbox disabled value="B">B</a-checkbox></a-col>
|
||||
<a-col :span="8"><a-checkbox value="C">C</a-checkbox></a-col>
|
||||
<a-col :span="8"><a-checkbox value="D">D</a-checkbox></a-col>
|
||||
<a-col :span="8"><a-checkbox value="E">E</a-checkbox></a-col>
|
||||
</a-row>
|
||||
</a-checkbox-group>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item
|
||||
v-bind="formItemLayout"
|
||||
label='Rate'
|
||||
|
||||
@ -127,22 +127,21 @@ We provide properties like `validateStatus` `help` `hasFeedback` to customize yo
|
||||
label='inline'
|
||||
:labelCol="labelCol"
|
||||
:wrapperCol="wrapperCol"
|
||||
style="margin-bottom:0;"
|
||||
>
|
||||
<a-col :span="11">
|
||||
<a-form-item validateStatus='error' help='Please select the correct date'>
|
||||
<a-date-picker style="width: 100%"/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="2">
|
||||
<span :style="{ display: 'inline-block', width: '100%', textAlign: 'center' }">
|
||||
-
|
||||
</span>
|
||||
</a-col>
|
||||
<a-col :span="11">
|
||||
<a-form-item>
|
||||
<a-date-picker style="width: 100%"/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-form-item
|
||||
validateStatus='error'
|
||||
help='Please select the correct date'
|
||||
:style="{ display: 'inline-block', width: 'calc(50% - 12px)' }"
|
||||
>
|
||||
<a-date-picker style="width: 100%"/>
|
||||
</a-form-item>
|
||||
<span :style="{ display: 'inline-block', width: '24px', textAlign: 'center' }">
|
||||
-
|
||||
</span>
|
||||
<a-form-item :style="{ display: 'inline-block', width: 'calc(50% - 12px)' }">
|
||||
<a-date-picker style="width: 100%"/>
|
||||
</a-form-item>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item
|
||||
|
||||
@ -67,7 +67,7 @@ If the form has been decorated by `Form.create` then it has `this.form` property
|
||||
| isFieldTouched | Check whether a field is touched by `getFieldDecorator`'s `options.trigger` event | (name: string) => boolean |
|
||||
| isFieldValidating | Check if the specified field is being validated. | Function(name) |
|
||||
| resetFields | Reset the specified fields' value(to `initialValue`) and status. If you don't specify a parameter, all the fields will be reset. | Function(\[names: string\[]]) |
|
||||
| setFields | Set value and error state of fields | ({<br /> \[fieldName\]: {value: any, errors: \[Error\] }<br />}) => void |
|
||||
| setFields | Set value and error state of fields. | ({<br /> \[fieldName\]: {value: any, errors: \[Error\] }<br />}) => void |
|
||||
| setFieldsValue | Set the value of a field. | Function({ [fieldName]: value } |
|
||||
| validateFields | Validate the specified fields and get theirs values and errors. If you don't specify the parameter of fieldNames, you will validate all fields. | (<br /> \[fieldNames: string\[]],<br /> \[options: object\],<br /> callback(errors, values)<br />) => void |
|
||||
| validateFieldsAndScroll | This function is similar to `validateFields`, but after validation, if the target field is not in visible area of form, form will be automatically scrolled to the target field area. | same as `validateFields` |
|
||||
|
||||
Loading…
Reference in New Issue
Block a user