Appearance

VfTabs ​

Basic ​

VfTabs renders the tab bar in a tabbed form. Override the tabs slot on VfForm to render VfTabs with custom props or alongside additional content.

vue
<VfForm tabbed>
  <template #tabs="{ pager }">
    <VfTabs :pager="pager" />
  </template>
  <VfGroup name="general" page="General">
    <VfText name="name" label="Name" />
  </VfGroup>
  <VfGroup name="profile" page="Profile">
    <VfText name="bio" label="Bio" />
  </VfGroup>
</VfForm>
vue
<template>
  <VfForm tabbed>
    <template #tabs="{ pager }">
      <VfTabs :pager="pager" />
    </template>
    <VfGroup name="general" page="General">
      <VfText name="name" label="Name" />
    </VfGroup>
    <VfGroup name="profile" page="Profile">
      <VfText name="bio" label="Bio" />
    </VfGroup>
  </VfForm>
</template>
vue
<script setup lang="ts">
import { defineSchema, defineSlot, useForm } from '@vueform/ui'
import { h, resolveComponent } from 'vue'

const schema = defineSchema({
  general: {
    type: 'group',
    page: 'General',
    schema: {
      name: { type: 'text', label: 'Name' },
    },
  },
  profile: {
    type: 'group',
    page: 'Profile',
    schema: {
      bio: { type: 'text', label: 'Bio' },
    },
  },
})

const [MyForm] = useForm({
  schema,
  tabbed: true,
  slots: {
    tabs: defineSlot('VfForm.tabs', {
      props: ['pager'],
      setup: (props) => () => {
        const VfTabs = resolveComponent('VfTabs')

        return h(VfTabs, { pager: props.pager })
      },
    }),
  },
})
</script>

<template>
  <MyForm />
</template>
Released under the MIT License.
Copyright © 2022-present Adam Berecz