Skip to content

Commit

Permalink
feat(.md): Form => FormLayout (#1427)
Browse files Browse the repository at this point in the history
  • Loading branch information
@ifblooms
ifblooms authored May 14, 2021
1 parent 7db3417 commit 2501e72
Show file tree
Hide file tree
Showing 6 changed files with 101 additions and 59 deletions.
14 changes: 8 additions & 6 deletions packages/next/docs/components/FormCollapse.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,10 +14,11 @@ import {
Input,
FormButtonGroup,
Submit,
FormLayout,
} from '@formily/next'
import { createForm } from '@formily/core'
import { FormProvider, createSchemaField } from '@formily/react'
import { Button, Form } from '@alifd/next'
import { Button } from '@alifd/next'

const SchemaField = createSchemaField({
components: {
Expand All @@ -33,7 +34,7 @@ const formCollapse = FormCollapse.createFormCollapse()
export default () => {
return (
<FormProvider form={form}>
<Form labelCol={{ span: 6 }} wrapperCol={{ span: 10 }}>
<FormLayout labelCol={6} wrapperCol={10}>
<SchemaField>
<SchemaField.Void
title="折叠面板"
Expand Down Expand Up @@ -103,7 +104,7 @@ export default () => {
</Button>
<Submit onSubmit={console.log}>提交</Submit>
</FormButtonGroup.FormItem>
</Form>
</FormLayout>
</FormProvider>
)
}
Expand All @@ -119,10 +120,11 @@ import {
Input,
FormButtonGroup,
Submit,
FormLayout,
} from '@formily/next'
import { createForm } from '@formily/core'
import { FormProvider, createSchemaField } from '@formily/react'
import { Button, Form } from '@alifd/next'
import { Button } from '@alifd/next'

const SchemaField = createSchemaField({
components: {
Expand Down Expand Up @@ -203,7 +205,7 @@ const schema = {
export default () => {
return (
<FormProvider form={form}>
<Form labelCol={{ span: 6 }} wrapperCol={{ span: 10 }}>
<FormLayout labelCol={6} wrapperCol={10}>
<SchemaField schema={schema} scope={{ formCollapse }} />
<FormButtonGroup.FormItem>
<Button
Expand All @@ -224,7 +226,7 @@ export default () => {
</Button>
<Submit onSubmit={console.log}>提交</Submit>
</FormButtonGroup.FormItem>
</Form>
</FormLayout>
</FormProvider>
)
}
Expand Down
24 changes: 12 additions & 12 deletions packages/next/docs/components/FormDialog.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,9 +6,9 @@

```tsx
import React from 'react'
import { FormDialog, FormItem, Input } from '@formily/next'
import { FormDialog, FormItem, Input, FormLayout } from '@formily/next'
import { createSchemaField } from '@formily/react'
import { Button, Form } from '@alifd/next'
import { Button } from '@alifd/next'

const SchemaField = createSchemaField({
components: {
Expand All @@ -23,7 +23,7 @@ export default () => {
onClick={() => {
FormDialog('弹窗表单', () => {
return (
<Form labelCol={{ span: 6 }} wrapperCol={{ span: 14 }}>
<FormLayout labelCol={6} wrapperCol={14}>
<SchemaField>
<SchemaField.String
name="aaa"
Expand Down Expand Up @@ -57,7 +57,7 @@ export default () => {
<FormDialog.Footer>
<span style={{ marginLeft: 4 }}>扩展文案</span>
</FormDialog.Footer>
</Form>
</FormLayout>
)
})
.open({
Expand All @@ -78,9 +78,9 @@ export default () => {

```tsx
import React from 'react'
import { FormDialog, FormItem, Input } from '@formily/next'
import { FormDialog, FormItem, Input, FormLayout } from '@formily/next'
import { createSchemaField } from '@formily/react'
import { Button, Form } from '@alifd/next'
import { Button } from '@alifd/next'

const SchemaField = createSchemaField({
components: {
Expand Down Expand Up @@ -129,12 +129,12 @@ export default () => {
onClick={() => {
FormDialog('弹窗表单', () => {
return (
<Form labelCol={{ span: 6 }} wrapperCol={{ span: 14 }}>
<FormLayout labelCol={6} wrapperCol={14}>
<SchemaField schema={schema} />
<FormDialog.Footer>
<span style={{ marginLeft: 4 }}>扩展文案</span>
</FormDialog.Footer>
</Form>
</FormLayout>
)
})
.open({
Expand All @@ -155,17 +155,17 @@ export default () => {

```tsx
import React from 'react'
import { FormDialog, FormItem, Input } from '@formily/next'
import { FormDialog, FormItem, Input, FormLayout } from '@formily/next'
import { Field } from '@formily/react'
import { Button, Form } from '@alifd/next'
import { Button } from '@alifd/next'

export default () => {
return (
<Button
onClick={() => {
FormDialog('弹窗表单', () => {
return (
<Form labelCol={{ span: 6 }} wrapperCol={{ span: 14 }}>
<FormLayout labelCol={6} wrapperCol={14}>
<Field
name="aaa"
required
Expand Down Expand Up @@ -197,7 +197,7 @@ export default () => {
<FormDialog.Footer>
<span style={{ marginLeft: 4 }}>扩展文案</span>
</FormDialog.Footer>
</Form>
</FormLayout>
)
})
.open({
Expand Down
21 changes: 12 additions & 9 deletions packages/next/docs/components/FormDrawer.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,9 +13,10 @@ import {
Submit,
Reset,
FormButtonGroup,
FormLayout,
} from '@formily/next'
import { createSchemaField } from '@formily/react'
import { Button, Form } from '@alifd/next'
import { Button } from '@alifd/next'

const SchemaField = createSchemaField({
components: {
Expand All @@ -30,7 +31,7 @@ export default () => {
onClick={() => {
FormDrawer('抽屉表单', (resolve) => {
return (
<Form labelCol={{ span: 6 }} wrapperCol={{ span: 14 }}>
<FormLayout labelCol={6} wrapperCol={14}>
<SchemaField>
<SchemaField.String
name="aaa"
Expand Down Expand Up @@ -67,7 +68,7 @@ export default () => {
<Reset>重置</Reset>
</FormButtonGroup>
</FormDrawer.Footer>
</Form>
</FormLayout>
)
})
.open({
Expand Down Expand Up @@ -95,9 +96,10 @@ import {
Submit,
Reset,
FormButtonGroup,
FormLayout,
} from '@formily/next'
import { createSchemaField } from '@formily/react'
import { Button, Form } from '@alifd/next'
import { Button } from '@alifd/next'

const SchemaField = createSchemaField({
components: {
Expand Down Expand Up @@ -146,15 +148,15 @@ export default () => {
onClick={() => {
FormDrawer('弹窗表单', (resolve) => {
return (
<Form labelCol={{ span: 6 }} wrapperCol={{ span: 14 }}>
<FormLayout labelCol={6} wrapperCol={14}>
<SchemaField schema={schema} />
<FormDrawer.Footer>
<FormButtonGroup align="right">
<Submit onClick={resolve}>提交</Submit>
<Reset>重置</Reset>
</FormButtonGroup>
</FormDrawer.Footer>
</Form>
</FormLayout>
)
})
.open({
Expand Down Expand Up @@ -182,17 +184,18 @@ import {
Submit,
Reset,
FormButtonGroup,
FormLayout,
} from '@formily/next'
import { Field } from '@formily/react'
import { Button, Form } from '@alifd/next'
import { Button } from '@alifd/next'

export default () => {
return (
<Button
onClick={() => {
FormDrawer('弹窗表单', (resolve) => {
return (
<Form labelCol={{ span: 6 }} wrapperCol={{ span: 14 }}>
<FormLayout labelCol={6} wrapperCol={14}>
<Field
name="aaa"
required
Expand Down Expand Up @@ -227,7 +230,7 @@ export default () => {
<Reset>重置</Reset>
</FormButtonGroup>
</FormDrawer.Footer>
</Form>
</FormLayout>
)
})
.open({
Expand Down
39 changes: 27 additions & 12 deletions packages/next/docs/components/Password.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,10 +6,15 @@

```tsx
import React from 'react'
import { Password, FormItem, FormButtonGroup, Submit } from '@formily/next'
import {
Password,
FormItem,
FormButtonGroup,
Submit,
FormLayout,
} from '@formily/next'
import { createForm } from '@formily/core'
import { FormProvider, createSchemaField } from '@formily/react'
import { Form } from '@alifd/next'

const SchemaField = createSchemaField({
components: {
Expand All @@ -22,7 +27,7 @@ const form = createForm()

export default () => (
<FormProvider form={form}>
<Form labelCol={{ span: 6 }} wrapperCol={{ span: 10 }}>
<FormLayout labelCol={6} wrapperCol={10}>
<SchemaField>
<SchemaField.String
name="input"
Expand All @@ -38,7 +43,7 @@ export default () => (
<FormButtonGroup.FormItem>
<Submit onSubmit={console.log}>提交</Submit>
</FormButtonGroup.FormItem>
</Form>
</FormLayout>
</FormProvider>
)
```
Expand All @@ -47,10 +52,15 @@ export default () => (

```tsx
import React from 'react'
import { Password, FormItem, FormButtonGroup, Submit } from '@formily/next'
import {
Password,
FormItem,
FormButtonGroup,
Submit,
FormLayout,
} from '@formily/next'
import { createForm } from '@formily/core'
import { FormProvider, createSchemaField } from '@formily/react'
import { Form } from '@alifd/next'
const SchemaField = createSchemaField({
components: {
Password,
Expand All @@ -77,12 +87,12 @@ const schema = {

export default () => (
<FormProvider form={form}>
<Form labelCol={{ span: 6 }} wrapperCol={{ span: 10 }}>
<FormLayout labelCol={6} wrapperCol={10}>
<SchemaField schema={schema} />
<FormButtonGroup.FormItem>
<Submit onSubmit={console.log}>提交</Submit>
</FormButtonGroup.FormItem>
</Form>
</FormLayout>
</FormProvider>
)
```
Expand All @@ -91,15 +101,20 @@ export default () => (

```tsx
import React from 'react'
import { Password, FormItem, FormButtonGroup, Submit } from '@formily/next'
import {
Password,
FormItem,
FormButtonGroup,
Submit,
FormLayout,
} from '@formily/next'
import { createForm } from '@formily/core'
import { FormProvider, Field } from '@formily/react'
import { Form } from '@alifd/next'
const form = createForm()

export default () => (
<FormProvider form={form}>
<Form labelCol={{ span: 6 }} wrapperCol={{ span: 10 }}>
<FormLayout labelCol={6} wrapperCol={10}>
<Field
name="input"
title="输入框"
Expand All @@ -115,7 +130,7 @@ export default () => (
<FormButtonGroup.FormItem>
<Submit onSubmit={console.log}>提交</Submit>
</FormButtonGroup.FormItem>
</Form>
</FormLayout>
</FormProvider>
)
```
Expand Down
Loading

0 comments on commit 2501e72

Please sign in to comment.