OrionTabs

<o-tabs> permet d'afficher des onglets. Il doit être utilisé avec des <o-tab-pane> (plus d'infos ci-dessous).

Son mécanisme est très similaire avec celui du composant <o-timeline> (plus d'infos ici).

Usage

TabsPlayground

Utilisation avec VueRouter

Depuis la version 1.6.0 il est possible d'utiliser le composant OrionTabs avec VueRouter.

Il n'y alors alors qu'à renseigner les OrionTabPane enfants, Orion s'occupera automatiquement de rajouter le composant <router-view/> adéquat.

La prop name correspondra alors à la propriété name de la route cible.

<!-- Utilisation simple -->
<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>


Afin de ne pas rentrer en conflit avec vos autre subviews, vous pouvez utiliser le système de named views de VueRouter : https://router.vuejs.org/guide/essentials/named-views.html

<!-- Utilisation avec les 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