FormTabs

Renders form tabs using FormTab components.

Basic Usage

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

<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
<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: component
  • Group: computed

The first visible FormTab component.

current$

  • Type: component
  • Group: computed

The current FormTab component.

next$

  • Type: component
  • Group: computed

The next visible FormTab component.

previous$

  • Type: component
  • Group: computed

The previous visible FormTab component.

Size

  • Type: component
  • 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: component
  • Group: inject

The root form's component.

Methods

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

.tab$(tab)

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

Returns a specific FormTab by index.

.goTo(name)

  • 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(event, callback)

  • 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(event)

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

Removes all listeners for an event.

.fire(args)

  • 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 development Learn more