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
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