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
loaderstring | boolean = undefined
routerViewNamestring = undefined
useRouterboolean = 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
disabledboolean = undefined
fontIconstring = undefined
iconOrion.Icon = undefined
labelstring = undefined
lazyboolean = undefined
lazyOnceboolean = undefined
markernumber | boolean = undefined
markerColorOrion.Color = 'danger'
namestring = undefined

Slots

Name
Bindings
default
No bindings

PublicInstance

Name
Type
disabled
boolean | undefined
name
string | undefined
_el
() => HTMLElement | undefined