FormTabs โ€‹

Renders form tabs using FormTab components.

Basic Usage โ€‹

<FormTabs> component can be used in <Vueform> component's #empty slot:

vue
<template>
  <Vueform>
    <template #empty>
      <FormTabs>
        <FormTab
          name="account"
          label="Account"
          :elements="['email', 'password']"
        />
        <FormTab
          name="personal"
          label="Personal"
          :elements="['name', 'bio']"
        />
        <FormTab
          name="social"
          label="Social"
          :elements="['facebook', 'twitter']"
        />
      </FormTabs>

      <FormElements>
        <TextElement
          name="email"
          label="Email"
        />
        <TextElement
          input-type="password"
          name="password"
          label="Password"
        />
        <TextElement
          name="name"
          label="Name"
        />
        <TextareaElement
          name="bio"
          label="bio"
        />
        <TextElement
          name="facebook"
          label="Facebook"
        />
        <TextElement
          name="twitter"
          label="Twitter"
        />
      </FormElements>
    </template>
  </Vueform>
</template>

Options โ€‹

Find below the list of options that can use to configure FormTabs component. Options can be passed to the component via props.

view โ€‹

  • Type: string
vue
<FormTabs view="alt" ... />

The name of the view to be used for the component and child components (FormTab). If undefined the default view will be used.

Learn more about views here.

Properties โ€‹

All the data, computed and inject properties of the component. They can be used via Vueform component's tabs$ property.

tabs โ€‹

  • Type: object
  • Group: computed

The object containing tabs defined in Vueform.

tabs$Array โ€‹

  • Type: array
  • Default: []
  • Group: data

The child FormTab components.

elements$ โ€‹

  • Type: object
  • Group: computed

The form elements' components.

tabs$ โ€‹

  • Type: object
  • Group: computed

The child FormTab components with indexed keys.

visible$ โ€‹

  • Type: object
  • Group: computed

All the visible FormTab components.

first$ โ€‹

  • Type: FormTab
  • Group: computed

The first visible FormTab component.

last$ โ€‹

  • Type: FormTab
  • Group: computed

The last visible FormTab component.

current$ โ€‹

  • Type: FormTab
  • Group: computed

The current FormTab component.

next$ โ€‹

  • Type: FormTab
  • Group: computed

The next visible FormTab component.

previous$ โ€‹

  • Type: FormTab
  • Group: computed

The previous visible FormTab component.

Size โ€‹

  • Type: string
  • Group: inject

The size of the component.

View โ€‹

  • Type: string
  • Group: computed

The name of the resolved view for the component. This one should be used to determine the component's view in class functions.

template โ€‹

  • Type: object
  • Group: computed

The component's template.

classes โ€‹

  • Type: object
  • Group: computed

The component's classes.

theme โ€‹

  • Type: object
  • Group: inject

The global theme object, which contains all the default templates and classes.

form$ โ€‹

  • Type: Vueform
  • Group: inject

The root form's component.

Methods โ€‹

The methods of the component. They can be used via Vueform component's tabs$ property.

tab$ โ€‹

  • Arguments:
    • {string} tab* - name of the tab
  • Returns: FormTab

Returns a specific FormTab by index.

goTo โ€‹

  • Arguments:
    • {string} name* - name of tab to go to
  • Returns: void

Go to a tab.

reset โ€‹

  • Returns: void

Jump back to the first visible tab.

on โ€‹

  • Arguments:
    • {string} event* - name of the event to listen for
    • {function} callback* - callback to run when the event is triggered
  • Returns: void

Adds a listener for an event.

off โ€‹

  • Arguments:
    • {string} event* - name of the event to remove
  • Returns: void

Removes all listeners for an event.

fire โ€‹

  • Arguments:
    • {any} args - list of arguments to pass over to the event callback
  • Returns: void

Fires and emits an event.

Events โ€‹

Events emitted by the component. You can subscribe to them using regular @{eventName} listener in inline components or by using on(event, callback) method.

select โ€‹

  • Params:
    • {component} activeTab$ - the active tab
    • {component} previousTab$ - the previously active tab

Triggered when a tab becomes active.

๐Ÿ‘‹ Hire Vueform team for form customizations and developmentLearn more