MALIO-DEV/malio-layer-ui
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: rendre le footer du Drawer hors zone scrollable (épinglé en bas)

Browse Source 
Le slot #footer était rendu à l'intérieur du body overflow-y-auto, ce qui
faisait courir la scrollbar sur toute la hauteur, derrière le footer. Il est
désormais frère du body (comme MalioModal) : seul le body défile et le footer
reste fixé en bas. Tests, story, pages playground et doc alignés.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Autin
2026-05-27 14:50:55 +02:00
parent 951acd448e
commit 280b650e49
7 changed files with 32 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files
COMPONENTS.md
+6 -8
View File
@@ -813,14 +813,14 @@ Panneau latéral (drawer) qui s'ouvre depuis la droite ou la gauche avec backdro
| `overlayClass` | `string` | `''` | Classes CSS backdrop (twMerge) |
| `headerClass` | `string` | `''` | Classes CSS barre header (twMerge) |
| `bodyClass` | `string` | `''` | Classes CSS zone scrollable (twMerge) |
| `footerClass` | `string` | `''` | Classes CSS wrapper du footer (aucune position imposée) |
| `footerClass` | `string` | `''` | Classes CSS du footer fixe (twMerge) |
**Events :** `update:modelValue(value: boolean)`, `close()`
**Slots :**
- `header` — en-tête (titre, etc.). S'il est absent et que `showClose` est `true`, seule la croix est affichée.
- `default` — contenu (zone scrollable).
- `footer` — rendu dans la zone scrollable, sans positionnement imposé : le consommateur choisit (`sticky bottom-0`, `fixed`, ou rien).
- `header` — en-tête (titre, etc.), fixe en haut. S'il est absent et que `showClose` est `true`, seule la croix est affichée.
- `default` — contenu (zone scrollable : seul le body défile).
- `footer` — actions (boutons). Rendu en bas du panneau, fixe, hors de la zone scrollable. N'apparaît que si le slot est fourni.
```vue
<MalioDrawer v-model="isOpen">
@@ -836,14 +836,12 @@ Panneau latéral (drawer) qui s'ouvre depuis la droite ou la gauche avec backdro
<p>Drawer large depuis la gauche</p>
</MalioDrawer>
<!-- Footer collé en bas (le consommateur applique le positionnement) -->
<!-- Footer d'actions (fixe en bas, hors zone scrollable) -->
<MalioDrawer v-model="isOpen">
<template #header><h2>Formulaire</h2></template>
<MalioInputText label="Nom" />
<template #footer>
<div class="sticky bottom-0 bg-white py-4">
<MalioButton label="Enregistrer" button-class="w-full" @click="isOpen = false" />
</div>
<MalioButton label="Enregistrer" button-class="w-full" @click="isOpen = false" />
</template>
</MalioDrawer>