FormLayout ​

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

const { SchemaField, SchemaVoidField, SchemaStringField } = createSchemaField({
  components: { FormLayout, FormItem, Input, Select },
})
const form = createForm()
</script>

<template>
  <FormProvider :form="form">
    <SchemaField>
      <SchemaVoidField
        x-component="FormLayout"
        :x-component-props="{
          labelCol: 6,
          wrapperCol: 10,
        }"
      >
        <SchemaStringField
          name="input"
          title="Input"
          x-decorator="FormItem"
          :x-decorator-props="{
            tooltip: '123',
          }"
          x-component="Input"
          :required="true"
        />
        <SchemaStringField
          name="select"
          title="Select"
          x-decorator="FormItem"
          x-component="Select"
          :required="true"
        />
      </SchemaVoidField>
    </SchemaField>
  </FormProvider>
</template>

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

const schema = {
  type: 'object',
  properties: {
    layout: {
      'type': 'void',
      'x-component': 'FormLayout',
      'x-component-props': {
        labelCol: 6,
        wrapperCol: 10,
        layout: 'vertical',
      },
      'properties': {
        input: {
          'type': 'string',
          'title': 'Input',
          'required': true,
          'x-decorator': 'FormItem',
          'x-decorator-props': {
            tooltip: '123',
            labelWrap: true,
          },
          'x-component': 'Input',
        },
        select: {
          'type': 'string',
          'title': 'Select',
          'required': true,
          'x-decorator': 'FormItem',
          'x-component': 'Select',
        },
      },
    },
  },
}

const form = createForm()
const { SchemaField } = createSchemaField({
  components: {
    FormLayout,
    FormItem,
    Input,
    Select,
  },
})
</script>

<template>
  <FormProvider :form="form">
    <SchemaField :schema="schema" />
  </FormProvider>
</template>

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

const form = createForm()
</script>

<template>
  <FormProvider :form="form">
    <FormLayout
      :breakpoints="[680]"
      layout="horizontal"
      label-align="left"
      :label-col="6"
      :wrapper-col="10"
      fullness
    >
      <Field
        name="input"
        title="Input"
        :decorator="[
          FormItem,
          {
            tooltip: '123',
          },
        ]"
        :component="[Input]"
        :required="true"
      />
      <Field
        name="select"
        title="Select"
        :decorator="[FormItem]"
        :component="[DatePicker]"
        :required="true"
      />
    </FormLayout>
  </FormProvider>
</template>

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

const form = createForm()
</script>

<template>
  <FormProvider :form="form">
    <FormLayout
      :breakpoints="[600, 700, 780]"
      layout="horizontal"
      label-align="left"
      :label-col="[4, 6, 8]"
      :wrapper-col="10"
    >
      <Field
        name="input"
        title="Input Input Input Input Input Input"
        :decorator="[
          FormItem,
          {
            tooltip: '123',
          },
        ]"
        :component="[Input]"
        :required="true"
      />
      <Field
        name="select"
        title="Select Select Select Select Select Select"
        :decorator="[FormItem]"
        :component="[Select]"
        :required="true"
      />
    </FormLayout>
  </FormProvider>
</template>