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

docs : maj page playground du MalioDrawer (side, footer, dismissable)

Browse Source
This commit is contained in:
Autin
2026-05-21 16:46:42 +02:00
parent 527766ab4c
commit 87499eb3a8
1 changed files with 42 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

67
.playground/pages/composant/drawer/drawer.vue
View File

@@ -1,48 +1,65 @@
<script setup lang="ts"> <script setup lang="ts">
import { ref } from 'vue' import { ref } from 'vue'
const drawerDefault = ref(false) const drawerRight = ref(false)
const drawerNoClose = ref(false) const drawerLeft = ref(false)
const drawerCustomWidth = ref(false) const drawerForm = ref(false)
const drawerWithForm = ref(false) const drawerNoDismiss = ref(false)
</script> </script>
<template> <template>
<div class="grid grid-cols-1 items-start gap-6 md:grid-cols-2"> <div class="grid grid-cols-1 items-start gap-6 md:grid-cols-2">
<div class="rounded-lg border p-6"> <div class="rounded-lg border p-6">
<h2 class="mb-6 text-xl font-bold">Drawer simple</h2> <h2 class="mb-6 text-xl font-bold">Drawer droite (défaut)</h2>
<MalioButton label="Ouvrir le drawer" @click="drawerDefault = true" /> <MalioButton label="Ouvrir à droite" @click="drawerRight = true" />
<MalioDrawer v-model="drawerDefault" title="Titre du drawer"> <MalioDrawer v-model="drawerRight">
<p class="text-m-text">Contenu du drawer. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> <template #header>
<h2 class="text-[24px] font-bold text-black">Détails</h2>
</template>
<p class="text-m-text">Contenu du drawer. Échap, clic backdrop et croix le ferment.</p>
</MalioDrawer> </MalioDrawer>
</div> </div>
<div class="rounded-lg border p-6"> <div class="rounded-lg border p-6">
<h2 class="mb-6 text-xl font-bold">Sans bouton fermer</h2> <h2 class="mb-6 text-xl font-bold">Drawer gauche</h2>
<MalioButton label="Ouvrir le drawer" variant="secondary" @click="drawerNoClose = true" /> <MalioButton label="Ouvrir à gauche" variant="secondary" @click="drawerLeft = true" />
<MalioDrawer v-model="drawerNoClose" title="Sans croix" :show-close="false"> <MalioDrawer v-model="drawerLeft" side="left">
<p class="text-m-text">Ce drawer n'a pas de bouton fermer. Cliquez sur le backdrop pour fermer.</p> <template #header>
<h2 class="text-[24px] font-bold text-black">Navigation</h2>
</template>
<p class="text-m-text">Ce drawer glisse depuis la gauche.</p>
</MalioDrawer> </MalioDrawer>
</div> </div>
<div class="rounded-lg border p-6"> <div class="rounded-lg border p-6">
<h2 class="mb-6 text-xl font-bold">Largeur personnalisée</h2> <h2 class="mb-6 text-xl font-bold">Avec footer collant</h2>
<MalioButton label="Ouvrir le drawer large" variant="tertiary" @click="drawerCustomWidth = true" /> <MalioButton label="Ouvrir le formulaire" variant="tertiary" @click="drawerForm = true" />
<MalioDrawer v-model="drawerCustomWidth" title="Drawer large" drawer-class="max-w-2xl"> <MalioDrawer v-model="drawerForm" drawer-class="max-w-lg">
<p class="text-m-text">Ce drawer utilise une largeur personnalisée via drawerClass.</p> <template #header>
</MalioDrawer> <h2 class="text-[24px] font-bold text-black">Nouveau contact</h2>
</div> </template>
<div class="flex flex-col gap-4 py-2">
<div class="rounded-lg border p-6">
<h2 class="mb-6 text-xl font-bold">Avec formulaire</h2>
<MalioButton label="Ouvrir le formulaire" variant="danger" @click="drawerWithForm = true" />
<MalioDrawer v-model="drawerWithForm" title="Formulaire">
<div class="flex flex-col gap-4">
<MalioInputText label="Nom" /> <MalioInputText label="Nom" />
<MalioInputText label="Prénom" /> <MalioInputText label="Prénom" />
<MalioInputText label="Email" /> <MalioInputText label="Email" />
<MalioButton label="Enregistrer" button-class="w-full" @click="drawerWithForm = false" />
</div> </div>
<template #footer>
<div class="sticky bottom-0 flex gap-3 bg-white py-4">
<MalioButton label="Annuler" variant="secondary" button-class="flex-1" @click="drawerForm = false" />
<MalioButton label="Enregistrer" button-class="flex-1" @click="drawerForm = false" />
</div>
</template>
</MalioDrawer>
</div>
<div class="rounded-lg border p-6">
<h2 class="mb-6 text-xl font-bold">Non dismissable (croix uniquement)</h2>
<MalioButton label="Ouvrir" variant="danger" @click="drawerNoDismiss = true" />
<MalioDrawer v-model="drawerNoDismiss" :dismissable="false" :close-on-escape="false">
<template #header>
<h2 class="text-[24px] font-bold text-black">Action requise</h2>
</template>
<p class="text-m-text">Ni le backdrop ni Échap ne ferment ce drawer. Utilisez la croix.</p>
</MalioDrawer> </MalioDrawer>
</div> </div>
</div> </div>