tristan
f09f8a91ac
| Numéro du ticket | Titre du ticket | |------------------|-----------------| | | | ## Description de la PR ## Modification du .env ## Check list - [ ] Pas de régression - [ ] TU/TI/TF rédigée - [ ] TU/TI/TF OK - [ ] CHANGELOG modifié Reviewed-on: #21 Co-authored-by: tristan <tristan@yuno.malio.fr> Co-committed-by: tristan <tristan@yuno.malio.fr>
50 lines
2.1 KiB
Vue
50 lines
2.1 KiB
Vue
<script setup lang="ts">
|
|
import { ref } from 'vue'
|
|
|
|
const drawerDefault = ref(false)
|
|
const drawerNoClose = ref(false)
|
|
const drawerCustomWidth = ref(false)
|
|
const drawerWithForm = ref(false)
|
|
</script>
|
|
|
|
<template>
|
|
<div class="grid grid-cols-1 items-start gap-6 md:grid-cols-2">
|
|
<div class="rounded-lg border p-6">
|
|
<h2 class="mb-6 text-xl font-bold">Drawer simple</h2>
|
|
<MalioButton label="Ouvrir le drawer" @click="drawerDefault = true" />
|
|
<MalioDrawer v-model="drawerDefault" title="Titre du drawer">
|
|
<p class="text-m-text">Contenu du drawer. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
|
|
</MalioDrawer>
|
|
</div>
|
|
|
|
<div class="rounded-lg border p-6">
|
|
<h2 class="mb-6 text-xl font-bold">Sans bouton fermer</h2>
|
|
<MalioButton label="Ouvrir le drawer" variant="secondary" @click="drawerNoClose = true" />
|
|
<MalioDrawer v-model="drawerNoClose" title="Sans croix" :show-close="false">
|
|
<p class="text-m-text">Ce drawer n'a pas de bouton fermer. Cliquez sur le backdrop pour fermer.</p>
|
|
</MalioDrawer>
|
|
</div>
|
|
|
|
<div class="rounded-lg border p-6">
|
|
<h2 class="mb-6 text-xl font-bold">Largeur personnalisée</h2>
|
|
<MalioButton label="Ouvrir le drawer large" variant="tertiary" @click="drawerCustomWidth = true" />
|
|
<MalioDrawer v-model="drawerCustomWidth" title="Drawer large" drawer-class="max-w-2xl">
|
|
<p class="text-m-text">Ce drawer utilise une largeur personnalisée via drawerClass.</p>
|
|
</MalioDrawer>
|
|
</div>
|
|
|
|
<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="Prénom" />
|
|
<MalioInputText label="Email" />
|
|
<MalioButton label="Enregistrer" button-class="w-full" @click="drawerWithForm = false" />
|
|
</div>
|
|
</MalioDrawer>
|
|
</div>
|
|
</div>
|
|
</template>
|