mirror of
https://git.hmsn.ink/kospo/svcm/oa.git
synced 2026-03-20 06:13:35 +09:00
80 lines
2.8 KiB
Markdown
80 lines
2.8 KiB
Markdown
### VTabs
|
|
|
|
Vuero provides styled navigation tabs that you can use to build nice
|
|
looking and optimized layouts. Tabs work with a javascript implementation.
|
|
Check the markup for more details.
|
|
|
|
<!--code-->
|
|
|
|
```vue
|
|
<template>
|
|
<VTabs
|
|
selected="team"
|
|
:tabs="[
|
|
{ label: 'Team', value: 'team' },
|
|
{ label: 'Projects', value: 'projects' },
|
|
{ label: 'Tasks', value: 'tasks' },
|
|
]"
|
|
>
|
|
<template #tab="{ activeValue }">
|
|
<p v-if="activeValue === 'team'">
|
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quid iudicant sensus?
|
|
Primum quid tu dicis breve? Etiam beatissimum? Ne discipulum abducam, times. Quae
|
|
diligentissime contra Aristonem dicuntur a Chryippo. Duo Reges: constructio
|
|
interrete.
|
|
</p>
|
|
<p v-else-if="activeValue === 'projects'">
|
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quid iudicant sensus?
|
|
Primum quid tu dicis breve? Etiam beatissimum? Ne discipulum abducam, times. Quae
|
|
diligentissime contra Aristonem dicuntur a Chryippo. Duo Reges: constructio
|
|
interrete.
|
|
</p>
|
|
<p v-else-if="activeValue === 'tasks'">
|
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quid iudicant sensus?
|
|
Primum quid tu dicis breve? Etiam beatissimum? Ne discipulum abducam, times. Quae
|
|
diligentissime contra Aristonem dicuntur a Chryippo. Duo Reges: constructio
|
|
interrete.
|
|
</p>
|
|
<p v-else>
|
|
Default content
|
|
</p>
|
|
</template>
|
|
</VTabs>
|
|
</template>
|
|
```
|
|
|
|
<!--/code-->
|
|
|
|
<!--example-->
|
|
|
|
<VTabs selected="team" :tabs="[{ label: 'Team', value: 'team' },{ label: 'Projects', value: 'projects' },{ label: 'Tasks', value: 'tasks' }]">
|
|
<template #tab="{ activeValue, ...rest }">
|
|
<p v-if="activeValue === 'team'">
|
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
|
|
Quid iudicant sensus? Primum quid tu dicis breve? Etiam
|
|
beatissimum? Ne discipulum abducam, times. Quae
|
|
diligentissime contra Aristonem dicuntur a Chryippo. Duo
|
|
Reges: constructio interrete.
|
|
</p>
|
|
<p v-else-if="activeValue === 'projects'">
|
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
|
|
Quid iudicant sensus? Primum quid tu dicis breve? Etiam
|
|
beatissimum? Ne discipulum abducam, times. Quae
|
|
diligentissime contra Aristonem dicuntur a Chryippo. Duo
|
|
Reges: constructio interrete.
|
|
</p>
|
|
<p v-else-if="activeValue === 'tasks'">
|
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
|
|
Quid iudicant sensus? Primum quid tu dicis breve? Etiam
|
|
beatissimum? Ne discipulum abducam, times. Quae
|
|
diligentissime contra Aristonem dicuntur a Chryippo. Duo
|
|
Reges: constructio interrete.
|
|
</p>
|
|
<p v-else>
|
|
azeaze {{ { rest, activeValue } }}
|
|
</p>
|
|
</template>
|
|
</VTabs>
|
|
|
|
<!--/example-->
|