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:
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.
