feat: From 组件新增 labelCol、wrapperCol (#1365)
* From 组件新增 labelCol、wrapperCol * 1 Form 组件 types 补充 2 Button 组件 文档优化 3 Radio 组件 样式优化pull/1431/head
PanStar
tangjinzhou
parent
3136e5964f
commit
ae6aee6ce4
|
|
@ -1,11 +1,11 @@
|
|||
<cn>
|
||||
#### 按钮类型
|
||||
按钮有四种类型：主按钮、次按钮、虚线按钮、危险按钮和链接按钮。主按钮在同一个操作区域最多出现一次。
|
||||
按钮有五种类型：主按钮、次按钮、虚线按钮、危险按钮和链接按钮。主按钮在同一个操作区域最多出现一次。
|
||||
</cn>
|
||||
|
||||
<us>
|
||||
#### Type
|
||||
There are `primary` button, `default` button, `dashed` button and `danger` button and `link` button in antd.
|
||||
There are `primary` button, `default` button, `dashed` button , `danger` button and `link` button in antd.
|
||||
</us>
|
||||
|
||||
```tpl
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
import PropTypes from '../_util/vue-types';
|
||||
import classNames from 'classnames';
|
||||
import { ColProps } from '../grid/Col';
|
||||
import Vue from 'vue';
|
||||
import isRegExp from 'lodash/isRegExp';
|
||||
import warning from '../_util/warning';
|
||||
|
|
@ -59,6 +60,8 @@ export const WrappedFormUtils = {
|
|||
|
||||
export const FormProps = {
|
||||
layout: PropTypes.oneOf(['horizontal', 'inline', 'vertical']),
|
||||
labelCol: PropTypes.shape(ColProps).loose,
|
||||
wrapperCol: PropTypes.shape(ColProps).loose,
|
||||
form: PropTypes.object,
|
||||
// onSubmit: React.FormEventHandler<any>;
|
||||
prefixCls: PropTypes.string,
|
||||
|
|
|
|||
|
|
@ -314,7 +314,8 @@ export default {
|
|||
},
|
||||
|
||||
renderWrapper(prefixCls, children) {
|
||||
const { wrapperCol = {} } = this;
|
||||
const { FormProps: { wrapperCol: wrapperColForm = {} } = {} } = this;
|
||||
const { wrapperCol = wrapperColForm } = this;
|
||||
const { class: cls, style, id, on, ...restProps } = wrapperCol;
|
||||
const className = classNames(`${prefixCls}-item-control-wrapper`, cls);
|
||||
const colProps = {
|
||||
|
|
@ -369,7 +370,8 @@ export default {
|
|||
},
|
||||
|
||||
renderLabel(prefixCls) {
|
||||
const { labelCol = {}, colon, id } = this;
|
||||
const { FormProps: { labelCol: labelColForm = {} } = {} } = this;
|
||||
const { labelCol = labelColForm, colon, id } = this;
|
||||
const label = getComponentFromProp(this, 'label');
|
||||
const required = this.isRequired();
|
||||
const {
|
||||
|
|
|
|||
|
|
@ -9,13 +9,13 @@ Demonstration of validation configuration for form controls which are not shown
|
|||
</us>
|
||||
|
||||
<template>
|
||||
<a-form id="components-form-demo-validate-other" :form="form" @submit="handleSubmit">
|
||||
<a-form-item v-bind="formItemLayout" label="Plain Text">
|
||||
<a-form id="components-form-demo-validate-other" :form="form" v-bind="formItemLayout" @submit="handleSubmit">
|
||||
<a-form-item label="Plain Text">
|
||||
<span class="ant-form-text">
|
||||
China
|
||||
</span>
|
||||
</a-form-item>
|
||||
<a-form-item v-bind="formItemLayout" label="Select" has-feedback>
|
||||
<a-form-item label="Select" has-feedback>
|
||||
<a-select
|
||||
v-decorator="[
|
||||
'select',
|
||||
|
|
@ -32,7 +32,7 @@ Demonstration of validation configuration for form controls which are not shown
|
|||
</a-select>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item v-bind="formItemLayout" label="Select[multiple]">
|
||||
<a-form-item label="Select[multiple]">
|
||||
<a-select
|
||||
v-decorator="[
|
||||
'select-multiple',
|
||||
|
|
@ -57,25 +57,25 @@ Demonstration of validation configuration for form controls which are not shown
|
|||
</a-select>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item v-bind="formItemLayout" label="InputNumber">
|
||||
<a-form-item label="InputNumber">
|
||||
<a-input-number v-decorator="['input-number', { initialValue: 3 }]" :min="1" :max="10" />
|
||||
<span class="ant-form-text">
|
||||
machines
|
||||
</span>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item v-bind="formItemLayout" label="Switch">
|
||||
<a-form-item label="Switch">
|
||||
<a-switch v-decorator="['switch', { valuePropName: 'checked' }]" />
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item v-bind="formItemLayout" label="Slider">
|
||||
<a-form-item label="Slider">
|
||||
<a-slider
|
||||
v-decorator="['slider']"
|
||||
:marks="{ 0: 'A', 20: 'B', 40: 'C', 60: 'D', 80: 'E', 100: 'F' }"
|
||||
/>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item v-bind="formItemLayout" label="Radio.Group">
|
||||
<a-form-item label="Radio.Group">
|
||||
<a-radio-group v-decorator="['radio-group']">
|
||||
<a-radio value="a">
|
||||
item 1
|
||||
|
|
@ -89,7 +89,7 @@ Demonstration of validation configuration for form controls which are not shown
|
|||
</a-radio-group>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item v-bind="formItemLayout" label="Radio.Button">
|
||||
<a-form-item label="Radio.Button">
|
||||
<a-radio-group v-decorator="['radio-button']">
|
||||
<a-radio-button value="a">
|
||||
item 1
|
||||
|
|
@ -103,7 +103,7 @@ Demonstration of validation configuration for form controls which are not shown
|
|||
</a-radio-group>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item v-bind="formItemLayout" label="Checkbox.Group">
|
||||
<a-form-item label="Checkbox.Group">
|
||||
<a-checkbox-group
|
||||
v-decorator="['checkbox-group', { initialValue: ['A', 'B'] }]"
|
||||
style="width: 100%;"
|
||||
|
|
@ -138,15 +138,11 @@ Demonstration of validation configuration for form controls which are not shown
|
|||
</a-checkbox-group>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item v-bind="formItemLayout" label="Rate">
|
||||
<a-form-item label="Rate">
|
||||
<a-rate v-decorator="['rate', { initialValue: 3.5 }]" allow-half />
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item
|
||||
v-bind="formItemLayout"
|
||||
label="Upload"
|
||||
extra="longgggggggggggggggggggggggggggggggggg"
|
||||
>
|
||||
<a-form-item label="Upload" extra="longgggggggggggggggggggggggggggggggggg">
|
||||
<a-upload
|
||||
v-decorator="[
|
||||
'upload',
|
||||
|
|
@ -163,7 +159,7 @@ Demonstration of validation configuration for form controls which are not shown
|
|||
</a-upload>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item v-bind="formItemLayout" label="Dragger">
|
||||
<a-form-item label="Dragger">
|
||||
<div class="dropbox">
|
||||
<a-upload-dragger
|
||||
v-decorator="[
|
||||
|
|
|
|||
|
|
@ -7,6 +7,8 @@
|
|||
| form | Decorated by `Form.create()` will be automatically set `this.form` property, so just pass to form. If you use the template syntax, you can use `this.$form.createForm(this, options)` | object | n/a |
|
||||
| hideRequiredMark | Hide required mark of all form items | Boolean | false |
|
||||
| layout | Define form layout | 'horizontal'\|'vertical'\|'inline' | 'horizontal' |
|
||||
| labelCol | The layout of label. You can set `span` `offset` to something like `{span: 3, offset: 12}` or `sm: {span: 3, offset: 12}` same as with `<Col>` | [object](/components/grid/#Col) | |
|
||||
| wrapperCol | The layout for input controls, same as `labelCol` | [object](/components/grid/#Col) | |
|
||||
| autoFormCreate(deprecated) | Automate Form.create, Recommended for use under the `template` component, and cannot be used with `Form.create()`. You should use `$form.createForm` to instead it after 1.1.9. | Function(form) | |
|
||||
| options(deprecated) | The `options` corresponding to `Form.create(options)`. You should use `$form.createForm` to instead it after 1.1.9. | Object | {} |
|
||||
|
||||
|
|
|
|||
|
|
@ -7,6 +7,8 @@
|
|||
| form | 经 `Form.create()` 包装过的组件会自带 `this.form` 属性，如果使用 template 语法，可以使用 this.\$form.createForm(this, options) | object | 无 |
|
||||
| hideRequiredMark | 隐藏所有表单项的必选标记 | Boolean | false |
|
||||
| layout | 表单布局 | 'horizontal'\|'vertical'\|'inline' | 'horizontal' |
|
||||
| labelCol | label 标签布局，同 `<Col>` 组件，设置 `span` `offset` 值，如 `{span: 3, offset: 12}` 或 `sm: {span: 3, offset: 12}` | [object](/components/grid-cn/#Col) | |
|
||||
| wrapperCol | 需要为输入控件设置布局样式时，使用该属性，用法同 labelCol | [object](/components/grid-cn/#Col) | |
|
||||
| selfUpdate | 自定义字段更新逻辑，说明[见下](/components/form-cn/#selfUpdate)，需 1.3.17 版本以上 | boolean | false |
|
||||
|
||||
### 事件
|
||||
|
|
|
|||
|
|
@ -184,18 +184,18 @@ span.@{radio-prefix-cls} + * {
|
|||
line-height: @input-height-sm - 2px;
|
||||
}
|
||||
|
||||
&:not(:first-child) {
|
||||
&::before {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -1px;
|
||||
display: block;
|
||||
width: 1px;
|
||||
height: 100%;
|
||||
background-color: @border-color-base;
|
||||
content: '';
|
||||
}
|
||||
}
|
||||
// &:not(:first-child) {
|
||||
// &::before {
|
||||
// position: absolute;
|
||||
// top: 0;
|
||||
// left: -1px;
|
||||
// display: block;
|
||||
// width: 1px;
|
||||
// height: 100%;
|
||||
// background-color: @border-color-base;
|
||||
// content: '';
|
||||
// }
|
||||
// }
|
||||
&:first-child {
|
||||
border-left: @border-width-base @border-style-base @border-color-base;
|
||||
border-radius: @border-radius-base 0 0 @border-radius-base;
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@
|
|||
// Definitions: https://github.com/vueComponent/ant-design-vue/types
|
||||
|
||||
import { AntdComponent } from '../component';
|
||||
import { Col } from '../grid/col';
|
||||
import Vue from 'vue';
|
||||
import { FormItem } from './form-item';
|
||||
|
||||
|
|
@ -348,6 +349,12 @@ export declare class Form extends AntdComponent {
|
|||
*/
|
||||
hideRequiredMark: boolean;
|
||||
|
||||
/**
|
||||
* The layout of label. You can set span offset to something like {span: 3, offset: 12} or sm: {span: 3, offset: 12} same as with <Col>
|
||||
* @type Col
|
||||
*/
|
||||
labelCol: Col;
|
||||
|
||||
/**
|
||||
* Define form layout
|
||||
* @default 'horizontal'
|
||||
|
|
@ -355,6 +362,12 @@ export declare class Form extends AntdComponent {
|
|||
*/
|
||||
layout: 'horizontal' | 'inline' | 'vertical';
|
||||
|
||||
/**
|
||||
* The layout for input controls, same as labelCol
|
||||
* @type Col
|
||||
*/
|
||||
wrapperCol: Col;
|
||||
|
||||
/**
|
||||
* Automate Form.create, Recommended for use under the template component, and cannot be used with Form.create().
|
||||
* You should use $form.createForm to instead it after 1.1.9.
|
||||
|
|
|
|||
Loading…
Reference in New Issue