FormButtonGroup ​

<script>
import { createForm } from '@formily/core'
import { createSchemaField, FormProvider } from '@formily/vue'
import {
  FormButtonGroup,
  FormItem,
  FormLayout,
  Input,
  Reset,
  Select,
  Submit,
} from '@silver-formily/element-plus'

const fields = createSchemaField({ components: { FormItem, Input, Select } })

export default {
  components: {
    FormProvider,
    FormLayout,
    Submit,
    Reset,
    FormButtonGroup,
    ...fields,
  },
  data() {
    const form = createForm()
    return {
      form,
    }
  },
  methods: {
    log(v) {
      console.log(v)
    },
  },
}
</script>

<template>
  <FormProvider :form="form">
    <FormLayout :label-col="6" :wrapper-col="10">
      <SchemaField>
        <SchemaStringField
          required
          title="输入框"
          x-decorator="FormItem"
          x-component="Input"
        />
        <SchemaStringField
          required
          title="输入框"
          x-decorator="FormItem"
          x-component="Input"
        />
        <SchemaStringField
          required
          title="输入框"
          x-decorator="FormItem"
          x-component="Input"
        />
        <SchemaStringField
          required
          title="输入框"
          x-decorator="FormItem"
          x-component="Input"
        />
        <SchemaStringField
          required
          title="输入框"
          x-decorator="FormItem"
          x-component="Input"
        />
        <SchemaStringField
          required
          title="输入框"
          x-decorator="FormItem"
          x-component="Input"
        />
        <SchemaStringField
          required
          title="输入框"
          x-decorator="FormItem"
          x-component="Input"
        />
      </SchemaField>
      <FormButtonGroup align-form-item>
        <Submit @submit="log">
          提交
        </Submit>
        <Reset>重置</Reset>
      </FormButtonGroup>
    </FormLayout>
  </FormProvider>
</template>

<script>
import { createForm } from '@formily/core'
import { createSchemaField, FormProvider } from '@formily/vue'
import {
  FormButtonGroup,
  FormItem,
  FormLayout,
  Input,
  Reset,
  Select,
  Submit,
} from '@silver-formily/element-plus'

const fields = createSchemaField({ components: { FormItem, Input, Select } })

export default {
  components: {
    FormProvider,
    FormLayout,
    Submit,
    Reset,
    FormButtonGroup,
    FormButtonGroupSticky: FormButtonGroup.Sticky,
    ...fields,
  },
  data() {
    const form = createForm()
    return {
      form,
    }
  },
  methods: {
    log(v) {
      console.log(v)
    },
  },
}
</script>

<template>
  <FormProvider :form="form">
    <FormLayout :label-col="6" :wrapper-col="10">
      <SchemaField>
        <SchemaStringField required title="输入框1" x-decorator="FormItem" x-component="Input" />
        <SchemaStringField required title="输入框2" x-decorator="FormItem" x-component="Input" />
        <SchemaStringField required title="输入框3" x-decorator="FormItem" x-component="Input" />
        <SchemaStringField required title="输入框4" x-decorator="FormItem" x-component="Input" />
        <SchemaStringField required title="输入框5" x-decorator="FormItem" x-component="Input" />
        <SchemaStringField required title="输入框6" x-decorator="FormItem" x-component="Input" />
        <SchemaStringField required title="输入框7" x-decorator="FormItem" x-component="Input" />
        <SchemaStringField required title="输入框8" x-decorator="FormItem" x-component="Input" />
        <SchemaStringField required title="输入框9" x-decorator="FormItem" x-component="Input" />
      </SchemaField>
      <FormButtonGroupSticky>
        <FormButtonGroup align-form-item>
          <Submit @submit="log">
            提交
          </Submit>
          <Reset>重置</Reset>
        </FormButtonGroup>
      </FormButtonGroupSticky>
    </FormLayout>
  </FormProvider>
</template>

<script setup lang="ts">
import { createForm } from '@formily/core'
import { Field, FormProvider } from '@formily/vue'
import {
  FormButtonGroup,
  FormItem,
  FormLayout,
  Input,
  Reset,
  Submit,
} from '@silver-formily/element-plus'

const form = createForm()

async function log(...v) {
  console.log(...v)
}
</script>

<template>
  <FormProvider :form="form">
    <FormLayout :label-col="6" :wrapper-col="10">
      <Field name="input1" title="输入框1" :decorator="[FormItem]" :component="[Input]" />
      <Field name="input2" title="输入框2" :decorator="[FormItem]" :component="[Input]" />
      <Field name="input3" title="输入框3" :decorator="[FormItem]" :component="[Input]" />
      <Field name="input4" title="输入框4" :decorator="[FormItem]" :component="[Input]" />
      <Field name="input5" title="输入框5" :decorator="[FormItem]" :component="[Input]" />
      <Field name="input6" title="输入框6" :decorator="[FormItem]" :component="[Input]" />
      <Field name="input7" title="输入框7" :decorator="[FormItem]" :component="[Input]" />
      <Field name="input8" title="输入框8" :decorator="[FormItem]" :component="[Input]" />
      <Field name="input9" title="输入框9" :decorator="[FormItem]" :component="[Input]" />
      <FormButtonGroup.Sticky>
        <FormButtonGroup align="center">
          <Submit @submit="log">
            提交
          </Submit>
          <Reset>重置</Reset>
        </FormButtonGroup>
      </FormButtonGroup.Sticky>
    </FormLayout>
  </FormProvider>
</template>