OrionTabs
<o-tabs> displays tabs. It must be used with <o-tab-pane> components (more infos below).
Its mecanism is very similar with the <o-timeline> component (more infos here).
Usage
TabsPlayground
Using with VueRouter
Since version 1.6.0, it is possible to use the OrionTabs component with VueRouter.
You only need to provide the nested OrionTabPane, and Orion will automatically add the appropriate <router-view/> component.
The name prop will correspond to the name property of the target route.
<!-- Simple usage -->
<o-tabs use-router>
<o-tab-pane name="RouteOne" label="Label One"/>
<o-tab-pane name="RouteTwo" label="Label Two"/>
<o-tab-pane name="RouteThree" label="Label Three"/>
</o-tabs>
To avoid conflicts with your other subviews, you can use the named views system of VueRouter: https://router.vuejs.org/guide/essentials/named-views.html
<!-- Usage with named views -->
<o-tabs use-router router-view-name="mySubview">
<o-tab-pane name="RouteOne" label="Label One"/>
<o-tab-pane name="RouteTwo" label="Label Two"/>
<o-tab-pane name="RouteThree" label="Label Three"/>
</o-tabs>
Orion Tabs
Props
Name
loader
string | boolean = undefinedmodelValue
string = undefinedrouterViewName
string = undefineduseRouter
boolean = falseEvents
Name
Payload type
input
stringtab-click
[OrionTabPane, MouseEvent]update:modelValue
stringPublicInstance
Name
Type
_loader
() => OrionLoaderpanes
Orion.Private.TsxTabPane[]getValue
() => string | undefineduseRouter
boolean_el
(() => HTMLElement | undefined) | undefinedProvide
Name
Type
_tabs
publicInstanceOrion Tab Pane
TabPaneMarker TabPaneStyle
Props
Name
disabled
boolean = falsefontIcon
string = undefinedicon
Orion.Icon = undefinedlabel
string = undefinedlazy
boolean = falselazyOnce
boolean = falsemarker
boolean | number = undefinedmarkerColor
Orion.Color = 'danger'name
string = undefined Required
Slots
Name
Bindings
default
No bindingsPublicInstance
Name
Type
disabled
booleanname
string_el
(() => HTMLElement | undefined) | undefined