From 912a370444ad142a81f12a27e538f392824120d3 Mon Sep 17 00:00:00 2001
From: tristan <tristan@yuno.malio.fr>
Date: Thu, 4 Jun 2026 08:20:47 +0200
Subject: [PATCH] =?UTF-8?q?docs(playground)=20:=20TabList=20=E2=80=94=20ex?=
 =?UTF-8?q?emple=203=20onglets=20+=20maxVisibleTabs=20(fen=C3=AAtrage=20in?=
 =?UTF-8?q?actif)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 .playground/pages/composant/tab/tabList.vue | 20 ++++++++++++++++++++
 1 file changed, 20 insertions(+)

diff --git a/.playground/pages/composant/tab/tabList.vue b/.playground/pages/composant/tab/tabList.vue
index 73e9981..ae19ca7 100644
--- a/.playground/pages/composant/tab/tabList.vue
+++ b/.playground/pages/composant/tab/tabList.vue
@@ -53,6 +53,19 @@
         <template #parametres><p class="p-4">Contenu Paramètres</p></template>
       </MalioTabList>
     </div>
+
+    <div class="rounded-lg border p-4">
+      <h2 class="mb-1 text-xl font-bold">Peu d'onglets avec maxVisibleTabs</h2>
+      <p class="mb-4 text-sm text-m-muted">
+        3 onglets avec <code>:max-visible-tabs="5"</code> — le fenêtrage ne s'active pas
+        (onglets ≤ max), donc pas de flèches, affichage normal centré.
+      </p>
+      <MalioTabList v-model="fewValue" :tabs="fewTabs" :max-visible-tabs="5">
+        <template #general><p class="p-4">Contenu Général</p></template>
+        <template #adresses><p class="p-4">Contenu Adresses</p></template>
+        <template #contacts><p class="p-4">Contenu Contacts</p></template>
+      </MalioTabList>
+    </div>
   </div>
 </template>
 
@@ -91,4 +104,11 @@ const simpleValue = ref('qualimat')
 const noIconValue = ref('tab1')
 const twoTabValue = ref('general')
 const manyValue = ref('infos')
+
+const fewTabs = [
+  { key: 'general', label: 'Général', icon: 'mdi:information-outline' },
+  { key: 'adresses', label: 'Adresses', icon: 'mdi:map-marker-outline' },
+  { key: 'contacts', label: 'Contacts', icon: 'mdi:account-box-outline' },
+]
+const fewValue = ref('general')
 </script>