Silver Formily Vant0.0.0

Appearance

Mobile Preview Open
Open mobile preview

FormButtonGroup ​

FormButtonGroup 是移动端表单按钮布局容器，适合和 Submit、Reset 搭配使用，支持垂直、水平和紧凑三种布局。

垂直布局 ​

vue
<script setup lang="ts">
import { createForm } from '@formily/core'
import { Form, FormButtonGroup, FormItem, Input, Reset, Submit } from '@silver-formily/vant'
import { Field } from '@silver-formily/vue'
import { showDemoResult } from '../shared'

const form = createForm({
  initialValues: {
    keyword: '垂直布局',
    remark: '默认更适合常规移动端表单',
  },
})

async function handleSubmit(values: typeof form.values) {
  await showDemoResult(values, '垂直布局提交结果')
}
</script>

<template>
  <p class="demo-tip">
    适合表单页底部的主次操作堆叠展示。
  </p>

  <Form :form="form" label-width="4.5em" :on-auto-submit="handleSubmit">
    <Field
      name="keyword"
      title="关键词"
      :decorator="[FormItem]"
      :component="[Input, { placeholder: '请输入关键词' }]"
    />
    <Field
      name="remark"
      title="说明"
      :decorator="[FormItem]"
      :component="[Input.TextArea, { rows: 2, placeholder: '请输入说明' }]"
    />
    <FormButtonGroup>
      <Reset />
      <Submit />
    </FormButtonGroup>
  </Form>
</template>

<style scoped>
.demo-tip {
  padding: 12px 16px 0;
  color: var(--van-text-color-2);
  font-size: 13px;
  line-height: 1.6;
}
</style>

水平布局 ​

vue
<script setup lang="ts">
import { createForm } from '@formily/core'
import { Form, FormButtonGroup, FormItem, Input, Reset, Submit } from '@silver-formily/vant'
import { Field } from '@silver-formily/vue'
import { showDemoResult } from '../shared'

const form = createForm({
  initialValues: {
    keyword: '水平布局',
    remark: '适合两个主操作并排展示',
  },
})

async function handleSubmit(values: typeof form.values) {
  await showDemoResult(values, '水平布局提交结果')
}
</script>

<template>
  <p class="demo-tip">
    两个按钮会并排拉伸，占据同一行。
  </p>

  <Form :form="form" label-width="4.5em" :on-auto-submit="handleSubmit">
    <Field
      name="keyword"
      title="关键词"
      :decorator="[FormItem]"
      :component="[Input, { placeholder: '请输入关键词' }]"
    />
    <Field
      name="remark"
      title="说明"
      :decorator="[FormItem]"
      :component="[Input.TextArea, { rows: 2, placeholder: '请输入说明' }]"
    />
    <FormButtonGroup layout="horizontal">
      <Reset />
      <Submit />
    </FormButtonGroup>
  </Form>
</template>

<style scoped>
.demo-tip {
  padding: 12px 16px 0;
  color: var(--van-text-color-2);
  font-size: 13px;
  line-height: 1.6;
}
</style>

紧凑布局 ​

vue
<script setup lang="ts">
import { createForm } from '@formily/core'
import { Form, FormButtonGroup, FormItem, Input, Reset, Submit } from '@silver-formily/vant'
import { Field } from '@silver-formily/vue'
import { showDemoResult } from '../shared'

const form = createForm({
  initialValues: {
    keyword: '紧凑布局',
    remark: '复用了 ActionBar 的紧凑圆角按钮样式',
  },
})

async function handleSubmit(values: typeof form.values) {
  await showDemoResult(values, '紧凑布局提交结果')
}
</script>

<template>
  <p class="demo-tip">
    `Reset` 和 `Submit` 会自动切到 ActionBar 风格的紧凑按钮，并通过主色边框增强默认白底按钮的辨识度。
  </p>

  <Form :form="form" label-width="4.5em" :on-auto-submit="handleSubmit">
    <Field
      name="keyword"
      title="关键词"
      :decorator="[FormItem]"
      :component="[Input, { placeholder: '请输入关键词' }]"
    />
    <Field
      name="remark"
      title="说明"
      :decorator="[FormItem]"
      :component="[Input.TextArea, { rows: 2, placeholder: '请输入说明' }]"
    />
    <FormButtonGroup layout="compact">
      <Reset />
      <Submit />
    </FormButtonGroup>
  </Form>
</template>

<style scoped>
.demo-tip {
  padding: 12px 16px 0;
  color: var(--van-text-color-2);
  font-size: 13px;
  line-height: 1.6;
}
</style>

粘性布局 ​

vue
<script setup lang="ts">
import { createForm } from '@formily/core'
import { Form, FormButtonGroup, FormItem, Input, Reset, Submit } from '@silver-formily/vant'
import { Field } from '@silver-formily/vue'
import { showDemoResult } from '../shared'

const form = createForm({
  initialValues: {
    name: 'Silver Formily',
    phone: '13800000000',
    city: '杭州',
    address: '西湖区文三路 88 号',
    remark: '继续向下滚动，按钮会吸附在底部',
  },
})

async function handleSubmit(values: typeof form.values) {
  await showDemoResult(values, '粘性布局提交结果')
}
</script>

<template>
  <p class="demo-tip">
    `FormButtonGroup.Sticky` 默认会吸附到底部，并优先把当前 `Form` 根节点作为边界容器。
  </p>

  <Form :form="form" label-width="4.5em" :on-auto-submit="handleSubmit">
    <Field
      name="name"
      title="姓名"
      :decorator="[FormItem]"
      :component="[Input, { placeholder: '请输入姓名' }]"
    />
    <Field
      name="phone"
      title="手机"
      :decorator="[FormItem]"
      :component="[Input, { placeholder: '请输入手机号' }]"
    />
    <Field
      name="city"
      title="城市"
      :decorator="[FormItem]"
      :component="[Input, { placeholder: '请输入城市' }]"
    />
    <Field
      name="address"
      title="地址"
      :decorator="[FormItem]"
      :component="[Input, { placeholder: '请输入详细地址' }]"
    />
    <Field
      name="remark"
      title="备注"
      :decorator="[FormItem]"
      :component="[Input.TextArea, { rows: 4, placeholder: '请输入备注' }]"
    />
    <Field
      name="backupPhone"
      title="备用手机"
      :decorator="[FormItem]"
      :component="[Input, { placeholder: '请输入备用手机号' }]"
    />
    <Field
      name="contact"
      title="联系人"
      :decorator="[FormItem]"
      :component="[Input, { placeholder: '请输入联系人' }]"
    />
    <Field
      name="note"
      title="补充说明"
      :decorator="[FormItem]"
      :component="[Input.TextArea, { rows: 3, placeholder: '请输入补充说明' }]"
    />

    <FormButtonGroup.Sticky :offset-bottom="0">
      <FormButtonGroup layout="horizontal">
        <Reset />
        <Submit />
      </FormButtonGroup>
    </FormButtonGroup.Sticky>
  </Form>
</template>

<style scoped>
.demo-tip {
  padding: 12px 16px 0;
  color: var(--van-text-color-2);
  font-size: 13px;
  line-height: 1.6;
}
</style>

API ​

属性名类型描述默认值
layout'vertical' | 'horizontal' | 'compact'按钮布局模式'vertical'
gapnumber | stringvertical / horizontal 模式下的按钮间距12
insetboolean是否给按钮组添加移动端常用的左右留白和底部留白true
safeAreaInsetBottombooleancompact 模式下是否保留底部安全区样式false

使用说明 ​

  • vertical：适合常规表单页底部的上下堆叠按钮
  • horizontal：适合两个主要操作并排展示
  • compact：复用 Vant ActionBar / ActionBarButton 的紧凑圆角样式
  • compact 模式下，Reset 和 Submit 会自动切换为 ActionBarButton
  • compact 模式下默认保留 Reset / Submit 的按钮类型；其中默认白底按钮会补一层主色边框，避免和背景融在一起
  • 如果需要特殊配色，仍然可以继续显式传 type 或 color
  • Submit 在 compact 模式下仍然支持 Form onAutoSubmit 和 onSubmit 两条提交流程
  • FormButtonGroup.Sticky 基于 Vant Sticky 封装，默认 position="bottom"
  • FormButtonGroup.Sticky 在 Form 内部使用时，会默认把当前表单根节点作为 container
  • 如果不在 Form 内使用，或者想修改边界容器，可以继续显式传入 container

FormButtonGroup.Sticky API ​

参考 Vant Sticky 组件。

其中默认值有两点差异：

  • position 默认值调整为 bottom
  • container 在 Form 内部使用时会默认取当前表单根节点