Silver Formily Antd Mobile0.0.0-alpha.1

Appearance

Mobile Preview Open
Open mobile preview

FormLayout ​

FormLayout 是表单布局容器，基于 antd-mobile 的 List 实现，负责统一下发表单项的布局配置。

提示

推荐直接使用 Form， FormLayout 是其内部的实现。

基础使用 ​

tsx
import {
  FormButtonGroup,
  FormItem,
  FormLayout,
  Input,
  Submit,
} from '@silver-formily/antd-mobile'
import { createForm } from '@silver-formily/core'
import { Field, FormProvider } from '@silver-formily/react'

const form = createForm({
  initialValues: {
    username: '张三',
    address: '杭州市余杭区',
  },
})

function onSubmit(values: unknown) {
  return Prompts.alert(JSON.stringify(values, null, 2))
}

export default function FormLayoutBasic() {
  return (
    <FormProvider form={form}>
      <FormLayout>
        <Field
          name="username"
          title="用户名"
          required
          decorator={[FormItem]}
          component={[Input]}
        />
        <Field
          name="address"
          title="地址"
          decorator={[FormItem]}
          component={[Input]}
        />
        <FormButtonGroup>
          <Submit onSubmit={onSubmit}>提交</Submit>
        </FormButtonGroup>
      </FormLayout>
    </FormProvider>
  )
}

垂直布局 ​

通过 layout="vertical" 让标签与控件上下排布，更适合窄屏与长文案场景。

tsx
import {
  FormButtonGroup,
  FormItem,
  FormLayout,
  Input,
  Submit,
} from '@silver-formily/antd-mobile'
import { createForm } from '@silver-formily/core'
import { Field, FormProvider } from '@silver-formily/react'

const form = createForm({
  initialValues: {
    username: '张三',
    address: '杭州市余杭区',
    remark: '备注信息',
  },
})

function onSubmit(values: unknown) {
  return Prompts.alert(JSON.stringify(values, null, 2))
}

export default function FormLayoutVertical() {
  return (
    <FormProvider form={form}>
      <FormLayout layout="vertical">
        <Field
          name="username"
          title="用户名"
          required
          decorator={[FormItem]}
          component={[Input]}
        />
        <Field
          name="address"
          title="地址"
          decorator={[FormItem]}
          component={[Input]}
        />
        <Field
          name="remark"
          title="备注"
          decorator={[FormItem]}
          component={[Input.TextArea]}
        />
        <FormButtonGroup>
          <Submit onSubmit={onSubmit}>提交</Submit>
        </FormButtonGroup>
      </FormLayout>
    </FormProvider>
  )
}

标签冒号 ​

设置 colon 后，内部表单项会在标签末尾显示英文冒号 :，默认不显示。下面用户名继承全局配置，地址通过 decorator={[FormItem, { colon: false }]} 单独关闭冒号。

tsx
import {
  FormButtonGroup,
  FormItem,
  FormLayout,
  Input,
  Submit,
} from '@silver-formily/antd-mobile'
import { createForm } from '@silver-formily/core'
import { Field, FormProvider } from '@silver-formily/react'

const form = createForm({
  initialValues: {
    username: '张三',
    address: '杭州市余杭区',
  },
})

function onSubmit(values: unknown) {
  return Prompts.alert(JSON.stringify(values, null, 2))
}

export default function FormLayoutColon() {
  return (
    <FormProvider form={form}>
      <FormLayout colon>
        <Field
          name="username"
          title="用户名"
          required
          decorator={[FormItem]}
          component={[Input]}
        />
        <Field
          name="address"
          title="地址"
          decorator={[FormItem, { colon: false }]}
          component={[Input]}
        />
        <FormButtonGroup>
          <Submit onSubmit={onSubmit}>提交</Submit>
        </FormButtonGroup>
      </FormLayout>
    </FormProvider>
  )
}

全局配置下发 ​

colon、labelWidth、labelAlign、tooltipLayout 等属性会批量下发给内部的 FormItem，无需逐个重复声明。

tsx
import {
  FormButtonGroup,
  FormItem,
  FormLayout,
  Input,
  Submit,
} from '@silver-formily/antd-mobile'
import { createForm } from '@silver-formily/core'
import { Field, FormProvider } from '@silver-formily/react'

const form = createForm({
  initialValues: {
    username: '张三',
    address: '杭州市余杭区',
  },
})

function onSubmit(values: unknown) {
  return Prompts.alert(JSON.stringify(values, null, 2))
}

export default function FormLayoutSettings() {
  return (
    <FormProvider form={form}>
      <FormLayout
        labelWidth={120}
        labelAlign="right"
        tooltipLayout="text"
      >
        <Field
          name="username"
          title="用户名"
          required
          decorator={[FormItem, { tooltip: '该信息将用于填写个人资料' }]}
          component={[Input, { placeholder: '请输入用户名' }]}
        />
        <Field
          name="address"
          title="地址"
          decorator={[FormItem, { tooltip: '该信息将用于填写个人资料' }]}
          component={[Input, { placeholder: '请输入地址' }]}
        />
        <FormButtonGroup>
          <Submit onSubmit={onSubmit}>提交</Submit>
        </FormButtonGroup>
      </FormLayout>
    </FormProvider>
  )
}

API ​

属性 ​

属性名类型描述默认值
layoutenum布局模式'horizontal'
colonboolean是否在标签后显示英文冒号，可由 FormItem 覆盖false
labelAlignenum标签文本对齐方式-
labelWrapboolean标签内容超长时是否换行false
labelWidthnumber | string标签宽度-
wrapperWidthnumber | string控件宽度-
wrapperAlignenum控件内容对齐方式-
wrapperWrapboolean控件内容超长时是否换行false
borderedboolean是否显示边框-
shallowboolean上下文传递模式，为 true 时仅向下一层传递true
tooltipLayoutenum问号提示布局'icon'

继承 antd-mobile List 的所有配置项，请参考 List 官方文档。