Générateur de tiroir glissant (Drawer) — HTML/CSS/JS

Réglages Vue en direct

Presets Rapide

Preset bouton

Preset tiroir

Preset complet

Choisis un preset pour remplir les réglages, puis ajuste à ta sauce.

Bouton Trigger

Position verticale

Position horizontale

Décalage vertical (px)

Décalage horizontal (px)

Largeur (px)

Hauteur (px)

Forme

Ombre

Couleur fond

Couleur texte

Texte

Icône (emoji ou texte)

Taille texte (px)

Épaisseur bordure (px)

Couleur bordure

Opacité bordure

Astuce : mets le texte vide si tu veux un bouton “icône seule”.

Tiroir (Drawer) Panel

Type d'ouverture

Couleur fond

Largeur (px) (gauche/droite)

Arrondi (px)

Ombre

Overlay (fond sombre)

Opacité overlay

Animation

Durée animation (ms)

Blur backdrop (px)

Couleur texte

Titre du drawer

Contenu (texte multi-ligne)

Bouton fermer

Fermer en cliquant overlay

Le type d’ouverture (gauche/droite/haut/bas) pilote la taille (largeur ou hauteur).

Options Export

Nom du fichier export

Classe CSS (préfixe)

Le préfixe évite les conflits CSS (ex : pe-drawer, pe-btn).

Prévisualisation & Code Live + Générateur

Clique sur le bouton pour ouvrir/fermer le tiroir (comme ton futur composant).

💻 Code généré (HTML + CSS + JS) 0 ko

Copie-colle ou télécharge directement.

Copié ✅