Silver Formily Antd Mobile0.0.0-alpha.1

Appearance

Mobile Preview Open
Open mobile preview

FormButtonGroup ​

移动端表单按钮布局容器，支持纵向、横向等宽、紧凑连体三种布局。

纵向布局 ​

默认纵向排列。Submit 默认 block。

tsx
import { FormButtonGroup, Reset, Submit } from '@silver-formily/antd-mobile'
import { createForm } from '@silver-formily/core'
import { FormProvider } from '@silver-formily/react'
import { useMemo } from 'react'

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

export default function Demo() {
  const form = useMemo(() => createForm({ initialValues: { username: '张三' } }), [])
  return (
    <FormProvider form={form}>
      <FormButtonGroup layout="vertical">
        <Reset>重置</Reset>
        <Submit onSubmit={onSubmit} />
      </FormButtonGroup>
    </FormProvider>
  )
}

横向等宽 ​

横向布局下，直接渲染的按钮等分可用宽度，gap 控制间距。

tsx
import { FormButtonGroup, Reset, Submit } from '@silver-formily/antd-mobile'
import { createForm } from '@silver-formily/core'
import { FormProvider } from '@silver-formily/react'
import { useMemo } from 'react'

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

export default function Demo() {
  const form = useMemo(() => createForm({ initialValues: { username: '张三' } }), [])
  return (
    <FormProvider form={form}>
      <FormButtonGroup layout="horizontal">
        <Reset>重置</Reset>
        <Submit onSubmit={onSubmit} />
      </FormButtonGroup>
    </FormProvider>
  )
}

紧凑连体 ​

compact 使用原生 antd-mobile Button，无间距、等宽，默认直角；开启 shape="rounded" 后首尾按钮保留外侧圆角；Submit 的提交行为与其他布局一致。

tsx
import { FormButtonGroup, Reset, Submit } from '@silver-formily/antd-mobile'
import { createForm } from '@silver-formily/core'
import { FormProvider } from '@silver-formily/react'
import { useMemo } from 'react'

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

export default function Demo() {
  const form = useMemo(() => createForm({ initialValues: { username: '张三' } }), [])
  return (
    <FormProvider form={form}>
      <FormButtonGroup layout="compact" safeAreaInsetBottom>
        <Reset>重置</Reset>
        <Submit onSubmit={onSubmit} />
      </FormButtonGroup>
    </FormProvider>
  )
}

紧凑布局统一圆角 ​

在按钮组上同时设置 layout="compact" 和 shape="rounded"，即可统一按钮形状：首尾保留外侧圆角，中间连接处保持直角。

tsx
import { FormButtonGroup, Reset, Submit } from '@silver-formily/antd-mobile'
import { createForm } from '@silver-formily/core'
import { FormProvider } from '@silver-formily/react'
import { useMemo } from 'react'

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

export default function CompactRoundedDemo() {
  const form = useMemo(() => createForm({ initialValues: { username: '张三' } }), [])
  return (
    <FormProvider form={form}>
      <FormButtonGroup layout="compact" shape="rounded">
        <Reset>重置</Reset>
        <Submit onSubmit={onSubmit} />
      </FormButtonGroup>
    </FormProvider>
  )
}

按钮形状 ​

默认直角。

tsx
import { FormButtonGroup, Reset, Submit } from '@silver-formily/antd-mobile'
import { createForm } from '@silver-formily/core'
import { FormProvider } from '@silver-formily/react'
import { useMemo } from 'react'

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

export default function RoundedDemo() {
  const form = useMemo(() => createForm({ initialValues: { username: '张三' } }), [])
  return (
    <FormProvider form={form}>
      <FormButtonGroup layout="horizontal" shape="rounded">
        <Reset>重置</Reset>
        <Submit shape="rectangular" onSubmit={onSubmit} />
      </FormButtonGroup>
    </FormProvider>
  )
}

滚动吸底 ​

底部 Sticky 内的按钮组默认开启底部安全区。启用时页面需配置 viewport-fit=cover。

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

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

export default function StickyDemo() {
  const form = useMemo(() => createForm({ initialValues: { username: '张三' } }), [])
  return (
    <FormProvider form={form}>
      <div style={{ height: '100vh', padding: 16 }}>继续向下滚动，表单进入屏幕后才会出现底部提交栏。</div>
      <FormLayout>
        <Field name="username" title="用户名" decorator={[FormItem]} component={[Input]} />
        <div style={{ minHeight: '110vh', padding: 16, color: 'var(--adm-color-weak)' }}>
          向下滚动查看吸底效果。按钮栏以当前 FormLayout 为边界，回到原位置时恢复普通布局。
        </div>
        <FormButtonGroup.Sticky zIndex={10}>
          <FormButtonGroup layout="compact">
            <Reset>重置</Reset>
            <Submit onSubmit={onSubmit} />
          </FormButtonGroup>
        </FormButtonGroup.Sticky>
      </FormLayout>
      <div style={{ height: '100vh', padding: 16 }}>表单已结束，底部提交栏不再悬浮。</div>
    </FormProvider>
  )
}

API ​

属性类型默认值说明
shape'default' | 'rounded' | 'rectangular'未设置优先覆盖子按钮形状，未设置时按钮默认直角
layout'vertical' | 'horizontal' | 'compact''vertical'布局模式
gapnumber | string12纵向/横向间距，数字按 px 处理
insetbooleantrue上 12px、左右 16px、下 16px 留白
safeAreaInsetBottomboolean底部 Sticky 内为 true，其他为 false所有布局均支持；显式设置优先

布局针对直接渲染的按钮元素；自定义组件应直接返回按钮，避免额外宽度包装。

FormButtonGroup.Sticky ​

属性类型默认值说明
position'top' | 'bottom''bottom'吸附方向
offsetTopnumber | string0顶部偏移，支持 px、rem、vh 等 CSS 长度
offsetBottomnumber | string0底部偏移
containerHTMLElement最近 form / FormLayout / 父元素限制吸附范围的容器
zIndexnumber | string—固定内容的层级