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.