95 lines
4.1 KiB
Vue
95 lines
4.1 KiB
Vue
<template>
|
|
<div class="grid grid-cols-1 items-start gap-6">
|
|
<div class="rounded-lg border p-4">
|
|
<h2 class="mb-4 text-xl font-bold">Simple</h2>
|
|
<MalioTabList v-model="simpleValue" :tabs="tabs">
|
|
<template #qualimat><p class="p-4">Contenu Qualimat</p></template>
|
|
<template #adresses><p class="p-4">Contenu Adresses</p></template>
|
|
<template #contacts><p class="p-4">Contenu Contacts</p></template>
|
|
<template #comptabilite><p class="p-4">Contenu Comptabilité</p></template>
|
|
</MalioTabList>
|
|
</div>
|
|
|
|
<div class="rounded-lg border p-4">
|
|
<h2 class="mb-4 text-xl font-bold">Sans icônes</h2>
|
|
<MalioTabList v-model="noIconValue" :tabs="tabsNoIcon">
|
|
<template #tab1><p class="p-4">Contenu onglet 1</p></template>
|
|
<template #tab2><p class="p-4">Contenu onglet 2</p></template>
|
|
<template #tab3><p class="p-4">Contenu onglet 3</p></template>
|
|
</MalioTabList>
|
|
</div>
|
|
|
|
<div class="rounded-lg border p-4">
|
|
<h2 class="mb-4 text-xl font-bold">Non contrôlé (sans v-model)</h2>
|
|
<MalioTabList :tabs="tabs">
|
|
<template #qualimat><p class="p-4">Contenu Qualimat</p></template>
|
|
<template #adresses><p class="p-4">Contenu Adresses</p></template>
|
|
<template #contacts><p class="p-4">Contenu Contacts</p></template>
|
|
<template #comptabilite><p class="p-4">Contenu Comptabilité</p></template>
|
|
</MalioTabList>
|
|
</div>
|
|
|
|
<div class="rounded-lg border p-4">
|
|
<h2 class="mb-4 text-xl font-bold">Deux onglets</h2>
|
|
<MalioTabList v-model="twoTabValue" :tabs="tabsTwo">
|
|
<template #general><p class="p-4">Informations générales</p></template>
|
|
<template #details><p class="p-4">Détails avancés</p></template>
|
|
</MalioTabList>
|
|
</div>
|
|
|
|
<div class="rounded-lg border p-4">
|
|
<h2 class="mb-1 text-xl font-bold">Beaucoup d'onglets (fenêtré)</h2>
|
|
<p class="mb-4 text-sm text-m-muted">
|
|
7 onglets avec <code>:max-visible-tabs="5"</code> — flèches gauche/droite pour faire défiler
|
|
(1 par 1). L'onglet actif reste sélectionné même hors fenêtre.
|
|
</p>
|
|
<MalioTabList v-model="manyValue" :tabs="manyTabs" :max-visible-tabs="5">
|
|
<template #infos><p class="p-4">Contenu Informations</p></template>
|
|
<template #adresses><p class="p-4">Contenu Adresses</p></template>
|
|
<template #contacts><p class="p-4">Contenu Contacts</p></template>
|
|
<template #compta><p class="p-4">Contenu Comptabilité</p></template>
|
|
<template #documents><p class="p-4">Contenu Documents</p></template>
|
|
<template #historique><p class="p-4">Contenu Historique</p></template>
|
|
<template #parametres><p class="p-4">Contenu Paramètres</p></template>
|
|
</MalioTabList>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref } from 'vue'
|
|
|
|
const tabs = [
|
|
{ key: 'qualimat', label: 'Qualimat', icon: 'mdi:certificate-outline' },
|
|
{ key: 'adresses', label: 'Adresses', icon: 'mdi:map-marker-outline' },
|
|
{ key: 'contacts', label: 'Contacts', icon: 'mdi:account-box-outline' },
|
|
{ key: 'comptabilite', label: 'Comptabilité', icon: 'mdi:web' },
|
|
]
|
|
|
|
const tabsNoIcon = [
|
|
{ key: 'tab1', label: 'Onglet 1' },
|
|
{ key: 'tab2', label: 'Onglet 2' },
|
|
{ key: 'tab3', label: 'Onglet 3' },
|
|
]
|
|
|
|
const tabsTwo = [
|
|
{ key: 'general', label: 'Général', icon: 'mdi:information-outline' },
|
|
{ key: 'details', label: 'Détails', icon: 'mdi:cog-outline' },
|
|
]
|
|
|
|
const manyTabs = [
|
|
{ key: 'infos', label: 'Informations', icon: 'mdi:information-outline' },
|
|
{ key: 'adresses', label: 'Adresses', icon: 'mdi:map-marker-outline' },
|
|
{ key: 'contacts', label: 'Contacts', icon: 'mdi:account-box-outline' },
|
|
{ key: 'compta', label: 'Comptabilité', icon: 'mdi:web' },
|
|
{ key: 'documents', label: 'Documents', icon: 'mdi:file-document-outline' },
|
|
{ key: 'historique', label: 'Historique', icon: 'mdi:history' },
|
|
{ key: 'parametres', label: 'Paramètres', icon: 'mdi:cog-outline' },
|
|
]
|
|
|
|
const simpleValue = ref('qualimat')
|
|
const noIconValue = ref('tab1')
|
|
const twoTabValue = ref('general')
|
|
const manyValue = ref('infos')
|
|
</script>
|