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 = undefined
routerViewName
string = undefined
useRouter
boolean = undefined
PublicInstance
Name
Type
_loader
() => OrionLoader
panes
Private.TsxTabPane[]
getValue
() => string | undefined
useRouter
boolean | undefined
_el
() => HTMLElement | undefined
Orion Tab Pane
TabPaneMarker TabPaneStyle
Props
Name
disabled
boolean = undefined
fontIcon
string = undefined
icon
Orion.Icon = undefined
label
string = undefined
lazy
boolean = undefined
lazyOnce
boolean = undefined
marker
number | boolean = undefined
markerColor
Orion.Color = 'danger'
name
string = undefined
Slots
Name
Bindings
default
No bindings
PublicInstance
Name
Type
disabled
boolean | undefined
name
string | undefined
_el
() => HTMLElement | undefined