Modeles et panneaux de sortie

1) Quand quoi utiliser

Modal (dialogue backdrop) - pour les solutions critiques et les tâches courtes nécessitant une attention totale : confirmation de l'action, consentements juridiques, opérations dangereuses, formulaires courts ≤ 1-2 champs. Bloque l'arrière-plan.
Drawer/Sheet (panneau sortant) - pour l'extension contextuelle : détails de l'objet, modification des attributs, sélection dans la liste, navigation auxiliaire. L'arrière-plan est visible → le contexte est conservé.

• Si l'action a besoin de concentration et de confirmation → Modal.
• Quand vous devez enregistrer le contexte et donner un aperçu « parallèle » de votre → Drawer.

2) Structure et dimensions

Modal

Le titre (obligatoire) → le texte principal → la zone CTA (Primaire/Secondaire/Destructive).
Dimensions : S (480-560 px), M (640-720 px), L (≤ 840 px). Le mobile est plein écran.

Drawer / Sheet

Direction : bord droit (bureau, édition), bas (mobile, actions), parfois gauche (navigation).
Largeur : 360-480 (S), 480-640 (M), 640-800 (L). Sur le mobile : 90-100 % largeur/hauteur.

La hauteur du contenu est toujours limitée, à l'intérieur - scroll ; le titre/STA est fixe.

3) Copywriting et CTA

Titre = action/sens : « Confirmer le pari », « Choisir la méthode de paiement », « KYC requis ».
Le texte est bref, 1-2 phrases. Évitez les formules vagues.
CTA : Une première, près du Secondaire (« Annulation ») et, si nécessaire, Destructive.

Pour les actions à risque, ajoutez une explication en 1 ligne : "L'action est irréversible. Vous pouvez annuler dans les 10 secondes (si disponible)"

4) Comportement et états

Ouverture : réponse instantanée ≤ 100 ms, puis animation 120-180 ms.
Fermeture : plus rapide que l'ouverture (80-140 ms), nous retournons le focus au déclencheur.
Busy : 'aria-busy = « true » sur le conteneur, bouton avec verrouillage des répétitions.
Unsaved (sale forme) : Lors de la fermeture - dialogue-avertissement (« Il y a des modifications non enregistrées »).
Escape/clic sur l'arrière-plan : valide pour les dialogues non dangereux ; pour les critiques, il n'y a que des boutons explicites.

5) Disponibilité (A11y)

Conteneur : 'role =' bou 'et' aria-modal = 'true' (pour un vrai modelage).
L'en-tête est lié par « aria-labelledby » ; la description est « aria-describedby ».
Focus trap à l'intérieur ; l'accent principal est mis sur le titre ou le premier élément interactif.
Retourne le focus sur le déclencheur d'origine après la fermeture.
Pas d'arrière-plan : 'document. body {overflow : hidden ;} 'ou' inert 'sur le reste du DOM.
Support clavier : Les Tabs/Shift + Tabs sont cycliques ; L'Esc ferme (si ce n'est pas interdit).
Prenez en compte 'prefers-reduced-motion' : désactiver/simplifier les animations.

html
<div class="backdrop" data-open hidden></div>
<div class="dialog" role="dialog" aria-modal="true" aria-labelledby="d-title" aria-describedby="d-desc" hidden>
<h2 id =" d-title "> Confirm Bid </h2>
<p id =" d-desc "> Sum of 200 ₴ by factor 1. 85</p>
<div class="actions">
<button class =" btn btn--primary "> Confirm </button>
<button class =" btn btn--ghost "> Cancel </button>
</div>
</div>

6) Performance et architecture

Le rendu via le portail (couche au-dessus de l'application) → moins de problèmes avec l'indice z.
Monter le contenu paresseusement à la première ouverture, démonter après l'animation de fermeture (ou traduire offscreen).
N'animez que « bou/opacity » ; évitez les ombres blur chères avec de grandes tailles.
Bloquez le scroll d'arrière-plan (scroll-lock), gardez la position actuelle pour ne pas « sauter » après la fermeture.
Pour les grandes listes dans drawer - utilisez la virtualisation.

7) Modèles mobiles

Bottom sheet pour des actions/confirmations rapides : gestes de balayage vers le bas pour fermer (avec seuil).
Sticky-CTA en bas ; bouton de fermeture - à gauche en haut.
Retraits Safe-area (zones notch/gesture).
Le clavier d'écran ne doit pas chevaucher le CTA ; layout - « soulever » le contenu ou un panneau fixe au-dessus du clavier.

8) Motion-design

Entrée : fade + léger décalage (modal : par Y, drawer : par axe d'apparition). 120-180 ms.
Sortie : plus court (80-140 ms), easing 'cubic-bezier (0. 2,0,0. 2,1)`.
Arrière-plan (backdrop) : opacité 0 → 0. 4–0. 6. Pas de pulsations et d'éblouissements infinis.
Pour 'prefers-reduced-motion' : pas de décalage, seulement fade.

9) Gestion de la fermeture

Fermeture immédiate uniquement en cas d'opérations sécurisées.
En cas d'erreur, nous restons dans le dialogue, montrons la raison et Retry.
Lors de l'exécution en arrière-plan - fermer la boîte de dialogue et afficher le toast « Nous exécutons dans le fond »..., plus la section « Historique ».

10) Scénarios types iGaming

10. 1 Confirmation de taux (Modal)

Contenu : événement, coefficient, montant, gains potentiels, durée de validité du coefficient.
Boutons : Confirmer, Annuler.
Modèle de retard> 3 s : texte « En attente de confirmation »... ; Si le coefficient change, c'est un update honnête.

10. 2 Cache (Modal/Sheet)

Affiche la somme en cours de cache et le minuteur de fenêtre.
Confirmation + possible Undo (si la réglementation le permet).

10. 3 Choix de la méthode de paiement (Drawer)

Liste des méthodes avec commissions/ETA ; Choix → mini-forme.
Enregistrement de la méthode par défaut ; retour sans perte des données saisies.

10. 4 KYC (Drawer → Modal)

Drawer pour télécharger des documents/conseils.
Modal lorsque vous essayez de fermer avec un téléchargement en cours : Avertissement de non enregistré.

10. 5 Limites du jeu responsable (Modal)

Radio « Jour/Semaine/Mois », champ de somme, ligne « Entrez en vigueur dans »....

11) Anti-modèles

Modeleurs imbriqués (modal sur modal). Utilisez une seule boîte de dialogue ou une séquence d'étapes.
Modelka pour regarder du contenu normalement (mieux drawer/page).
Croix cachée ou fermeture uniquement par « microzone ».
L'action risquée → l'autorisation de fermer « par fond ».
Forme longue dans le modalk (→ dans un écran/panneau séparé).
Aucun retour de focalisation sur le déclencheur.

12) Tokens de système de conception (exemple)

json
{
"dialog": {
"radius": 12,
"shadow": "var(--elev-4)",
"sizes": { "s": 520, "m": 680, "l": 840 },
"backdropOpacity": 0. 5,
"padding": "20 24",
"gap": 16
},
"drawer": {
"width": { "s": 360, "m": 480, "l": 640 },
"edge": "right",
"radius": 12,
"shadow": "var(--elev-4)"
},
"motion": {
"inMs": 160,
"outMs": 120,
"ease": "cubic-bezier(0. 2,0,0. 2,1)",
"reduce": true
},
"a11y": {
"useAriaModal": true,
"focusTrap": true,
"returnFocus": true
}
}

css
.backdrop[data-open]{position:fixed; inset:0; background:rgba(0,0,0,.5); backdrop-filter:saturate(80%); opacity:1; transition:opacity. 16s}
.dialog,[data-drawer]{position:fixed; background:var(--bg-elevated); border-radius:12px; box-shadow:var(--elev-4);}
.dialog{inset:auto; left:50%;top:50%;transform:translate(-50%,-50%); max-width:840px; width:min(100% - 32px, var(--dialog-w,680px));}
[data-drawer="right"]{top:0; right:0; height:100%;width:var(--drawer-w,480px); transform:translateX(0)}
.dialog[hidden],.backdrop[hidden]{display:none}

13) Prélèvements de comportement

js const openBtn = document. getElementById('open');
const dlg = document. querySelector('.dialog');
let prevFocus;

function openDialog() {
prevFocus = document. activeElement;
dlg. hidden = false; document. body. style. overflow = 'hidden';
const focusable = dlg. querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
(focusable[0]        dlg). focus();
function onKey(e){
if(e. key==='Escape') return closeDialog();
if(e. key!=='Tab') return;
const first = focusable[0], last = focusable[focusable. length-1];
if(e. shiftKey && document. activeElement===first){ e. preventDefault(); last. focus(); }
else if(!e.shiftKey && document. activeElement===last){ e. preventDefault(); first. focus(); }
}
dlg. addEventListener('keydown', onKey);
dlg. dataset. off = ()=> dlg. removeEventListener('keydown', onKey);
}
function closeDialog() {
dlg. dataset. off && dlg. dataset. off();
dlg. hidden = true; document. body. style. overflow = '';
prevFocus && prevFocus. focus();
}

js let startY=0, delta=0;
const sheet = document. querySelector('.sheet');
sheet. addEventListener('touchstart', e => startY = e. touches[0].clientY);
sheet. addEventListener('touchmove', e => {
delta = Math. max(0, e. touches[0].clientY - startY);
sheet. style. transform = `translateY(${delta}px)`;
});
sheet. addEventListener('touchend', () => {
if (delta > 120) sheet. classList. remove('open'); else sheet. style. transform = '';
delta = 0;
});

14) Métriques et expériences

Taux d'ouverture/Taux d'achèvement par modalité : combien ont ouvert et terminé l'action.
Time-to-Decision : de l'ouverture au clic par Primary.
Taux de dismiss et raisons (fermeture par Esc/fond vs « Annuler »).
Error/Retry Rate dans les scripts busy.
A/B : modal vs drawer, texte CTA, ordre des champs, « confirmation » vs « undo ».

15) Liste de vérification QA

Disponibilité

• 'role = « bou »,' aria-modal = 'true', correct 'aria-labelledby/-describedby'.
• Focus trap fonctionne ; le focus revient au déclencheur.
• le CES ferme (le cas échéant) ; L'onglet est cyclique.
• Contraste ≥ AA ; il n'y a pas que la couleur qui transmet le sens.

Comportement

• TTFF ≤ 100 ms ; animations à 120-180 ms/out 80-140 ms.
• Scroll-lock d'arrière-plan sans « sauter » la page.
• Unsaved-guard dans la forme sale.
• État busy, Retry correct/erreurs.

Interface

• Titre clair et une première LTC.
• Croix/bouton Fermer sont disponibles.
• Les dimensions sont adaptatives ; sur le mobile, un sheet avec un geste.

Performance

• Les portails/z-index sont corrects ; sans « illumination ».
• Initialisation paresseuse ; Uniquement les formes/opacity sont animées.

16) Documentation dans le système de conception

Composants : 'Modal', 'Drawer/Sheet', 'ConfirmBou', 'UnsavedGuard'.
Tokens : dimensions, indentations, ombres, animations, backdrop, focus-ring.
Hydes : « Quand modal vs drawer », modèles de copywriting, actions risquées (confirm/undo), scroll-lock et portals, reduce-motion.
Do/Don't-gallery : nested modals (don't), formes longues en modalk (don't), sheet pour étendre le contexte (do).

Résumé succinct

Modelka - pour des solutions sous toute l'attention, drawer - pour étendre le contexte sans casser le flux. Gardez la structure simple, CTA - sans ambiguïté, et les interactions - prévisible et accessible. Respectez la performance, bloquez l'arrière-plan et retournez le focus. Dans les scénarios iGaming, cela affecte directement la confiance : les confirmations de taux, le cache, le choix de la méthode de paiement et KYC doivent être honnêtes, rapides et sécurisés.