Tab
Usage
r-tabs required slot must be filled by multiple r-tab components.
Examples
Define a preselected tab by passing its index to preselectedTab prop.
Add custom styles with props like divided, menuClass or contentClass.
Use to prop to navigate to routes from tabs.
Show validation state on the tab group with the validate prop and display messages when needed.
| Name | Type | Default | Description |
|---|---|---|---|
| divided | boolean | false | Define style of the tabs, are them divided or not |
| menuClass | string | '' | Specify classes of the tabs |
| contentClass | string | '' | Specify classes of the content |
| preselectedTab | number | 0 | Define preselected tab |
| showValidateMessages | boolean | false | Show validation messages on hover over invalid tab |
| lazy | boolean | true | Defines panel rendering strategy for nested tabs. true - lazy mount with v-if false - eager mount with v-show |
| Name | Description |
|---|---|
| default | Tab content |
| Name | Description |
|---|---|
| tab-selected | When the tab is selected |
| Name | Type | Default | Description |
|---|---|---|---|
| name | string | ||
| panelId | string | '' | |
| value | string | '' | |
| active | boolean | false | |
| to | Optional<Ref<RouteLocation>> | undefined | |
| hidden | boolean | false | |
| lazy | boolean | undefined | |
| validate | Array<BaseValidation> | () => [] | Array of Vuelidate validation objects to aggregate their states for this tab. |
| Name | Description |
|---|---|
| default | Required slot with the content of the tab (can be any html markup or vue components). |