FormLayout 表单布局

使用场景#

表单布局组件，为上层表单方案提供通用布局能力。

示例#

基本用法#

邮箱地址

我们不会公开您的邮箱地址。

这是一条错误消息

inline

function Basic() {
  return (
    <FormControl
      labelPosition="left"
      label="邮箱地址"
      labelTips="这里填入有效的邮箱地址，不支持 qq 邮箱"
      help="我们不会公开您的邮箱地址。"
      error="这是一条错误消息"
      required
    >
      <Input type="email" onChange={console.log} />
    </FormControl>
  );
}

function Basic() {
  return (
    <FormControl
      labelPosition="left"
      label="邮箱地址"
      labelTips="这里填入有效的邮箱地址，不支持 qq 邮箱"
      help="我们不会公开您的邮箱地址。"
      error="这是一条错误消息"
      required
    >
      <Input type="email" onChange={console.log} />
    </FormControl>
  );
}

标签位于上方#

邮箱地址

我们不会公开您的邮箱地址。

这是一条错误消息

inline

function LabelTop() {
  return (
    <FormControl
      labelPosition="top"
      label="邮箱地址"
      labelTips="这里填入有效的邮箱地址，不支持 qq 邮箱"
      help="我们不会公开您的邮箱地址。"
      error="这是一条错误消息"
      required
    >
      <Input type="email" onChange={console.log} />
    </FormControl>
  );
}

function LabelTop() {
  return (
    <FormControl
      labelPosition="top"
      label="邮箱地址"
      labelTips="这里填入有效的邮箱地址，不支持 qq 邮箱"
      help="我们不会公开您的邮箱地址。"
      error="这是一条错误消息"
      required
    >
      <Input type="email" onChange={console.log} />
    </FormControl>
  );
}

没有标签#

我们不会公开您的邮箱地址。

这是一条错误消息

inline

function NoLabelControl() {
  return (
    <FormControl help="我们不会公开您的邮箱地址。" error="这是一条错误消息" required>
      <Input type="email" onChange={console.log} />
    </FormControl>
  );
}

function NoLabelControl() {
  return (
    <FormControl help="我们不会公开您的邮箱地址。" error="这是一条错误消息" required>
      <Input type="email" onChange={console.log} />
    </FormControl>
  );
}

自定义标签宽度#

inline

function LongLabels() {
  return (
    <FormLayout labelWidth="200px">
      <FormControl label="物料供应商全称">
        <Input placeholder="文一西路超市" />
      </FormControl>
      <FormControl label="联系人所在城市街道和门牌号">
        <Input placeholder="街道" style={{ width: 180, marginRight: 12 }} />
        <Input placeholder="邮政编码" style={{ width: 180 }} />
      </FormControl>
    </FormLayout>
  );
}

function LongLabels() {
  return (
    <FormLayout labelWidth="200px">
      <FormControl label="物料供应商全称">
        <Input placeholder="文一西路超市" />
      </FormControl>
      <FormControl label="联系人所在城市街道和门牌号">
        <Input placeholder="街道" style={{ width: 180, marginRight: 12 }} />
        <Input placeholder="邮政编码" style={{ width: 180 }} />
      </FormControl>
    </FormLayout>
  );
}

行内模式#

inline

function Inline() {
  return (
    <FormLayout inline>
      <FormControl label="邮箱地址" required help="我们不会公开您的邮箱地址。" error="这是一条错误消息">
        <Input width="200px" type="email" onChange={console.log} />
      </FormControl>
      <FormControl label="邮箱地址" required help="我们不会公开您的邮箱地址。" error="这是一条错误消息">
        <Input width="200px" type="email" onChange={console.log} />
      </FormControl>
    </FormLayout>
  );
}

function Inline() {
  return (
    <FormLayout inline>
      <FormControl label="邮箱地址" required help="我们不会公开您的邮箱地址。" error="这是一条错误消息">
        <Input width="200px" type="email" onChange={console.log} />
      </FormControl>
      <FormControl label="邮箱地址" required help="我们不会公开您的邮箱地址。" error="这是一条错误消息">
        <Input width="200px" type="email" onChange={console.log} />
      </FormControl>
    </FormLayout>
  );
}

表单项嵌套#

inline

function NestFormControls() {
  return (
    <FormLayout>
      <FormControl label="姓名">
        <Input placeholder="姓名" />
      </FormControl>
      <FormControl label="地址">
        <Group>
          <FormControl inline>
            <Input placeholder="城市" />
          </FormControl>
          <FormControl inline>
            <Input placeholder="邮政编码" />
          </FormControl>
        </Group>
      </FormControl>
    </FormLayout>
  );
}

function NestFormControls() {
  return (
    <FormLayout>
      <FormControl label="姓名">
        <Input placeholder="姓名" />
      </FormControl>
      <FormControl label="地址">
        <Group>
          <FormControl inline>
            <Input placeholder="城市" />
          </FormControl>
          <FormControl inline>
            <Input placeholder="邮政编码" />
          </FormControl>
        </Group>
      </FormControl>
    </FormLayout>
  );
}

简单表单布局#

inline

function SimpleFormLayout() {
  return (
    <FormLayout>
      <FormControl label="店名" required help="辅助文本">
        <Input placeholder="文一西路超市" />
      </FormControl>

      <FormControl label="地址">
        <Group>
          <Input placeholder="城市" />
          <Input placeholder="邮政编码" />
        </Group>
      </FormControl>

      <FormControl label="日期">
        <Group>
          <DatePicker placeholder="开始日期" />
          <DatePicker placeholder="结束日期" />
        </Group>
      </FormControl>
    </FormLayout>
  );
}

function SimpleFormLayout() {
  return (
    <FormLayout>
      <FormControl label="店名" required help="辅助文本">
        <Input placeholder="文一西路超市" />
      </FormControl>

      <FormControl label="地址">
        <Group>
          <Input placeholder="城市" />
          <Input placeholder="邮政编码" />
        </Group>
      </FormControl>

      <FormControl label="日期">
        <Group>
          <DatePicker placeholder="开始日期" />
          <DatePicker placeholder="结束日期" />
        </Group>
      </FormControl>
    </FormLayout>
  );
}

表单项分组#

inline

function FormFieldSets() {
  return (
    <FormLayout>
      <FieldSet title="办公室信息">
        <FormControl label="地址名称" required help="辅助文本">
          <Input placeholder="请输入" />
        </FormControl>
        <FormControl label="街道地址" required error="必填字段">
          <Input placeholder="请选择" />
        </FormControl>
      </FieldSet>
      <FieldSet title="联系信息">
        <FormControl label="电子邮箱" required help="辅助文本">
          <Input placeholder="请输入" />
        </FormControl>
        <FormControl label="电话" required error="必填字段">
          <Input placeholder="请选择" />
        </FormControl>
      </FieldSet>
    </FormLayout>
  );
}

function FormFieldSets() {
  return (
    <FormLayout>
      <FieldSet title="办公室信息">
        <FormControl label="地址名称" required help="辅助文本">
          <Input placeholder="请输入" />
        </FormControl>
        <FormControl label="街道地址" required error="必填字段">
          <Input placeholder="请选择" />
        </FormControl>
      </FieldSet>
      <FieldSet title="联系信息">
        <FormControl label="电子邮箱" required help="辅助文本">
          <Input placeholder="请输入" />
        </FormControl>
        <FormControl label="电话" required error="必填字段">
          <Input placeholder="请选择" />
        </FormControl>
      </FieldSet>
    </FormLayout>
  );
}

表单项分组多列展示#

办公室信息

城市

辅助文本

地址名称

辅助文本

街道地址

必填字段

inline

function MultiColumnFormFieldSet() {
  return (
    <FieldSet title="办公室信息" columns={2}>
      <FormControl label="城市" required help="辅助文本">
        <Input placeholder="请输入" />
      </FormControl>
      <FormControl label="地址名称" required help="辅助文本">
        <Input placeholder="请输入" />
      </FormControl>
      <FormControl label="街道地址" required error="必填字段">
        <Input placeholder="请选择" />
      </FormControl>
    </FieldSet>
  );
}

function MultiColumnFormFieldSet() {
  return (
    <FieldSet title="办公室信息" columns={2}>
      <FormControl label="城市" required help="辅助文本">
        <Input placeholder="请输入" />
      </FormControl>
      <FormControl label="地址名称" required help="辅助文本">
        <Input placeholder="请输入" />
      </FormControl>
      <FormControl label="街道地址" required error="必填字段">
        <Input placeholder="请选择" />
      </FormControl>
    </FieldSet>
  );
}

搜索表单布局#

inline

function BasicSearchFormLayout() {
  return (
    <SearchFormLayout>
      <FormControl label="订单号" required labelTips="请输入 16 位订单编码">
        <Input placeholder="请输入" />
      </FormControl>
      <FormControl label="仓库" required>
        <Input placeholder="请输入" />
      </FormControl>
      <FormControl label="商家" required>
        <Input placeholder="请输入" />
      </FormControl>
      <FormControl label="门店" required>
        <Input placeholder="请输入" />
      </FormControl>
      <FormControl label="创建人" required>
        <Input placeholder="请输入" />
      </FormControl>
      <FormControl label="更新人" required>
        <Input placeholder="请选择" />
      </FormControl>
    </SearchFormLayout>
  );
}

function BasicSearchFormLayout() {
  return (
    <SearchFormLayout>
      <FormControl label="订单号" required labelTips="请输入 16 位订单编码">
        <Input placeholder="请输入" />
      </FormControl>
      <FormControl label="仓库" required>
        <Input placeholder="请输入" />
      </FormControl>
      <FormControl label="商家" required>
        <Input placeholder="请输入" />
      </FormControl>
      <FormControl label="门店" required>
        <Input placeholder="请输入" />
      </FormControl>
      <FormControl label="创建人" required>
        <Input placeholder="请输入" />
      </FormControl>
      <FormControl label="更新人" required>
        <Input placeholder="请选择" />
      </FormControl>
    </SearchFormLayout>
  );
}

API#

FormLayout#

字段	描述
inline	`boolean` 是否行内布局
labelPosition	`LabelPosition` 标签位置
labelWidth	`string` 标签宽度
columns	`ResponsiveType` 布局列数
as	`any`
style	`CSSProperties`
className	`string`
m	`StringOrNumber`
margin	`StringOrNumber`
mt	`StringOrNumber`
marginTop	`StringOrNumber`
mr	`StringOrNumber`
marginRight	`StringOrNumber`
mb	`StringOrNumber`
marginBottom	`StringOrNumber`
ml	`StringOrNumber`
marginLeft	`StringOrNumber`
mx	`StringOrNumber`
marginX	`StringOrNumber`
my	`StringOrNumber`
marginY	`StringOrNumber`
p	`StringOrNumber`
padding	`StringOrNumber`
pt	`StringOrNumber`
paddingTop	`StringOrNumber`
pr	`StringOrNumber`
paddingRight	`StringOrNumber`
pb	`StringOrNumber`
paddingBottom	`StringOrNumber`
pl	`StringOrNumber`
paddingLeft	`StringOrNumber`
px	`StringOrNumber`
paddingX	`StringOrNumber`
py	`StringOrNumber`
paddingY	`StringOrNumber`
color	`Color`
bg	`Color`
backgroundColor	`Color`
opacity	`Opacity`
width	`StringOrNumber`
minWidth	`StringOrNumber`
maxWidth	`StringOrNumber`
height	`StringOrNumber`
minHeight	`StringOrNumber`
maxHeight	`StringOrNumber`
size	`StringOrNumber`
display	`Display`
verticalAlign	`VerticalAlign<0 \| (string & {})>`
overflow	`Overflow`
overflowX	`OverflowX`
overflowY	`OverflowY`
fontFamily	`FontFamily`
fontStyle	`FontStyle`
letterSpacing	`LetterSpacing<0 \| (string & {})>`
textAlign	`TextAlign`
fontSize	`string`
fontWeight	`FontWeight`
lineHeight	`StringOrNumber`
alignItems	`AlignItems`
alignContent	`AlignContent`
justifyItems	`JustifyItems`
justifyContent	`JustifyContent`
flexWrap	`FlexWrap`
flexDirection	`FlexDirection`
flex	`Flex<Length>`
flexGrow	`FlexGrow`
flexShrink	`FlexShrink`
flexBasis	`FlexBasis<Length>`
justifySelf	`JustifySelf`
alignSelf	`AlignSelf`
order	`Order`
gridGap	`GridGap<Length>`
gridRowGap	`GridRowGap<Length>`
gridColumnGap	`GridColumnGap<Length>`
gridColumn	`GridColumn`
gridColumnStart	`GridColumnStart`
gridColumnEnd	`GridColumnEnd`
gridRow	`GridRow`
gridRowStart	`GridRowStart`
gridRowEnd	`GridRowEnd`
gridArea	`GridArea`
gridTemplateRows	`GridTemplateRows<0 \| (string & {})>`
gridTemplateColumns	`GridTemplateColumns<0 \| (string & {})>`
gridTemplateAreas	`GridTemplateAreas`
border	`string`
borderTop	`string`
borderRight	`string`
borderBottom	`string`
borderLeft	`string`
borderWidth	`StringOrNumber`
borderColor	`Color`
borderTopColor	`Color`
borderRightColor	`Color`
borderBottomColor	`Color`
borderLeftColor	`Color`
borderRadius	`string`
position	`Position`
zIndex	`ZIndex`
top	`string`
right	`string`
bottom	`string`
left	`string`
boxShadow	`BoxShadow`
textShadow	`TextShadow`

FormControl#

字段	描述
label	`ReactNode` 字段名
labelWidth	`string` 标签宽度，仅在水平排布时生效
labelPosition	`"top" \| "left"` 标签位置
labelTips	`ReactNode` 字段名提示信息或解释信息
help	`ReactNode` 附加提示文本
error	`string \| string[]` 错误消息
required	`boolean` 是否显示必选标记
inline	`boolean` 是否行内模式

FieldSet#

字段	描述
title	`ReactNode` 分组标题
columns	`ResponsiveType` 列数
size	`StringOrNumber`
p	`StringOrNumber`
style	`CSSProperties`
className	`string`
color	`Color`
width	`StringOrNumber`
flexDirection	`FlexDirection`
top	`string`
bottom	`string`
right	`string`
left	`string`
as	`any`
m	`StringOrNumber`
margin	`StringOrNumber`
mt	`StringOrNumber`
marginTop	`StringOrNumber`
mr	`StringOrNumber`
marginRight	`StringOrNumber`
mb	`StringOrNumber`
marginBottom	`StringOrNumber`
ml	`StringOrNumber`
marginLeft	`StringOrNumber`
mx	`StringOrNumber`
marginX	`StringOrNumber`
my	`StringOrNumber`
marginY	`StringOrNumber`
padding	`StringOrNumber`
pt	`StringOrNumber`
paddingTop	`StringOrNumber`
pr	`StringOrNumber`
paddingRight	`StringOrNumber`
pb	`StringOrNumber`
paddingBottom	`StringOrNumber`
pl	`StringOrNumber`
paddingLeft	`StringOrNumber`
px	`StringOrNumber`
paddingX	`StringOrNumber`
py	`StringOrNumber`
paddingY	`StringOrNumber`
bg	`Color`
backgroundColor	`Color`
opacity	`Opacity`
minWidth	`StringOrNumber`
maxWidth	`StringOrNumber`
height	`StringOrNumber`
minHeight	`StringOrNumber`
maxHeight	`StringOrNumber`
display	`Display`
verticalAlign	`VerticalAlign<0 \| (string & {})>`
overflow	`Overflow`
overflowX	`OverflowX`
overflowY	`OverflowY`
fontFamily	`FontFamily`
fontStyle	`FontStyle`
letterSpacing	`LetterSpacing<0 \| (string & {})>`
textAlign	`TextAlign`
fontSize	`string`
fontWeight	`FontWeight`
lineHeight	`StringOrNumber`
alignItems	`AlignItems`
alignContent	`AlignContent`
justifyItems	`JustifyItems`
justifyContent	`JustifyContent`
flexWrap	`FlexWrap`
flex	`Flex<Length>`
flexGrow	`FlexGrow`
flexShrink	`FlexShrink`
flexBasis	`FlexBasis<Length>`
justifySelf	`JustifySelf`
alignSelf	`AlignSelf`
order	`Order`
gridGap	`GridGap<Length>`
gridRowGap	`GridRowGap<Length>`
gridColumnGap	`GridColumnGap<Length>`
gridColumn	`GridColumn`
gridColumnStart	`GridColumnStart`
gridColumnEnd	`GridColumnEnd`
gridRow	`GridRow`
gridRowStart	`GridRowStart`
gridRowEnd	`GridRowEnd`
gridArea	`GridArea`
gridTemplateRows	`GridTemplateRows<0 \| (string & {})>`
gridTemplateColumns	`GridTemplateColumns<0 \| (string & {})>`
gridTemplateAreas	`GridTemplateAreas`
border	`string`
borderTop	`string`
borderRight	`string`
borderBottom	`string`
borderLeft	`string`
borderWidth	`StringOrNumber`
borderColor	`Color`
borderTopColor	`Color`
borderRightColor	`Color`
borderBottomColor	`Color`
borderLeftColor	`Color`
borderRadius	`string`
position	`Position`
zIndex	`ZIndex`
boxShadow	`BoxShadow`
textShadow	`TextShadow`