Tiroir

Couche flottante glissant depuis le bord de l'écran, adaptée aux actions secondaires telles que le détail ou le filtrage. Quatre directions, taille et comportement du masque paramétrables.

Tiroir

<template>
  <div class="demo-col">
    <div class="demo-row" style="gap: 12px; flex-wrap: wrap">
      <LhButton type="primary" @click="open('right')">right à droite</LhButton>
      <LhButton @click="open('left')">left à gauche</LhButton>
      <LhButton @click="open('top')">top en haut</LhButton>
      <LhButton @click="open('bottom')">bottom en bas</LhButton>
      <LhButton @click="openNoMask">Le masque ne ferme pas</LhButton>
    </div>
    <LhDrawer v-model="visible" :title="title" :direction="direction" :size="size">
      <p style="margin: 0 0 8px">direction contrôle le sens, size contrôle la dimension (nombre en px ou chaîne en pourcentage).</p>
      <p class="demo-note">Les boutons du bas peuvent déclencher des combinaisons lockScroll / closeOnEsc, etc.</p>
      <template #footer>
        <LhButton @click="visible = false">Annuler</LhButton>
        <LhButton type="primary" @click="visible = false">Enregistrer</LhButton>
      </template>
    </LhDrawer>
    <LhDrawer
      v-model="noMask"
      title="Le clic sur le masque ne ferme pas"
      direction="right"
      size="30%"
      :mask-closable="false"
      :show-close="true"
      :lock-scroll="true"
      :close-on-esc="false"
    >
      <p style="margin: 0">maskClosable=false et closeOnEsc=false : seule la fermeture par bouton ou par l'icône de fermeture est possible.</p>
      <template #footer>
        <LhButton type="primary" @click="noMask = false">Fermer</LhButton>
      </template>
    </LhDrawer>
  </div>
</template>

<script>
export default {
  data: () => ({
    visible: false,
    noMask: false,
    title: 'Tiroir droit',
    direction: 'right',
    size: '360px',
  }),
  methods: {
    open(dir) {
      this.direction = dir
      this.title = `Tiroir ${dir}`
      this.size = dir === 'top' || dir === 'bottom' ? '30%' : '360px'
      this.visible = true
    },
    openNoMask() {
      this.noMask = true
    },
  },
}
</script>

Props

Prop	Description	Type	Valeur par défaut
v-model	Affichage ou non (prop modelValue contrôlé)	boolean	false
title	Titre	string	—
direction	Direction	'right' \| 'left' \| 'top' \| 'bottom'	'right'
size	Dimension : un nombre correspond à des px, une chaîne peut être un pourcentage	string \| number	—
maskClosable	Fermeture par clic sur le masque ou non	boolean	true
showClose	Afficher le bouton de fermeture ou non	boolean	true
teleportTarget	Cible de montage de la couche flottante (sélecteur ou élément, body par défaut ; pas de Teleport en 2.7, déplacement de l'hôte)	string \| HTMLElement	—
lockScroll	Verrouiller le défilement de la page ou non	boolean	true
closeOnEsc	Réagir à la fermeture par Esc ou non	boolean	true
themeVars	Variables de thème au niveau du composant, remplaçant la configuration de ConfigProvider	Record<string, string>	—
bgPattern	Motif de fond au niveau du composant, remplaçant la configuration de ConfigProvider	string	—
sx	Raccourci de mise en page sx (agit sur le panneau)	—	—

Slots

Slot	Description
header	Zone de titre (titre prop par défaut)
default	Corps du tiroir
footer	Zone de boutons du bas