Composants

Superpositions

Boîtes de dialogue, panneaux, popovers et palettes superposés à la page.

Créer à partir d’un guide Connectez votre agent Explorer les modèles de pages

36 sur 63

Chargement de l’index de recherche complet.

Command palette

1527Command paletteSuperpositionsUne superposition de recherche ouverte par un bouton ou Ctrl K qui filtre les commandes groupées, déplace une surbrillance avec les touches fléchées, exécute celle sélectionnée sur Entrée et rapporte le résultat.

Anchored detail popover

1910Anchored detail popoverSuperpositionsUn bouton de déclenchement qui ouvre un petit panneau ancré contenant un formulaire de paramètres intitulé, sortant du bord du déclencheur et se fermant sur Échap ou sur un clic extérieur.

Anchored info popover

1911Anchored info popoverSuperpositionsUn bouton de déclenchement qui ouvre un petit panneau d'informations flottant ancré sur l'un de ses bords, s'estompant et s'agrandissant à partir de ce bord et se fermant lors d'un clic extérieur ou d'un échappement.

Anchored popover card

1912Anchored popover cardSuperpositionsUn bouton de déclenchement qui ouvre une petite carte de paramètres ancrée sur elle-même, s'étendant à partir du bord à partir duquel elle pousse et se fermant sur un deuxième clic, Échap ou une pression à l'extérieur.

Anchored settings popover

1913Anchored settings popoverSuperpositionsUn bouton qui ouvre un petit panneau de paramètres ancré à côté, grandissant à partir du coin le plus proche de son déclencheur et retournant les côtés lorsque l'espace est épuisé.

Banner header dialog

1919Banner header dialogSuperpositionsUne fenêtre modale avec une bande de bannière colorée sur son bord supérieur, posée sur une copie grisée et entièrement inerte de la page située derrière elle.

Bounce warning dialog

1923Bounce warning dialogSuperpositionsUne boîte de dialogue de confirmation apparaît avec un dépassement élastique et un badge d'icône rebondissant, exigeant une réponse avant que la page ci-dessous ne redevienne utilisable.

Bulk action toolbar

1927Bulk action toolbarSuperpositionsUne barre d'outils flottante pour parcourir une file d'attente d'enregistrements un par un, avec des actions d'icônes qui révèlent leur étiquette au survol et un bouton principal qui confirme la destination.

Confirm action dialog

1942Confirm action dialogSuperpositionsUn modal centré qui interrompt la page pour obliger quelqu'un à confirmer ou à annuler explicitement une action sérieuse avant qu'elle ne se produise.

Consequence confirm dialog

1943Consequence confirm dialogSuperpositionsUne boîte de dialogue de confirmation qui s'incline depuis un bord choisi et bloque la page jusqu'à ce que le visiteur annule ou continue explicitement.

Custom shell lightbox

1948Custom shell lightboxSuperpositionsUne grille de galerie qui ouvre une visionneuse à fond perdu sans bordure, montrant comment un moteur d'ouverture, de fermeture et de mise au point peut porter une coque entièrement personnalisée.

Edge slide sheet

1953Edge slide sheetSuperpositionsUn panneau qui glisse depuis le bord de l'écran pour contenir du contenu supplémentaire comme un panier ou des filtres, sans quitter la page actuelle.

Flip Side Hint Tooltip

1960Flip Side Hint TooltipSuperpositionsUne bulle d'indice qui apparaît au survol ou au focus clavier et se retourne automatiquement dans n'importe quel côté la maintient entièrement visible près du bord de l'écran.

Instant Hint Tooltip

1983Instant Hint TooltipSuperpositionsUne petite étiquette qui s'estompe et s'agrandit à côté d'un élément en survol ou au clavier, donnant un indice rapide sans ajouter d'encombrement visible.

Centered modal frame

2119Centered modal frameSuperpositionsUn modal centré uni qui s'estompe et s'agrandit sur un fond grisé, avec un en-tête, un corps et un pied de page, pour les formulaires et les confirmations de tous les jours.

Checkable action menu

2121Checkable action menuSuperpositionsUn menu qui mélange des actions simples avec des rangées de cases à cocher et un ensemble à choix unique, en insérant chaque coche lorsqu'elle s'allume et en faisant glisser un point entre les choix.

Cursor-chasing tooltip

2137Cursor-chasing tooltipSuperpositionsUne bulle d'indice qui apparaît lors du survol ou de la mise au point et peut glisser pour suivre le pointeur lorsqu'il se déplace sur le déclencheur.

Edge aware popover

2145Edge aware popoverSuperpositionsUn popover qui sort de sa gâchette et se retourne ou se déplace vers le côté opposé lorsque le côté que vous avez demandé dépasse le bord du cadre, restant collé pendant que les choses défilent.

Edge-slide panel

2146Edge-slide panelSuperpositionsUn panneau de paramètres qui s'appuie contre le bord de l'écran tandis que la page située derrière s'assombrit et se brouille.

Edge-tilt alert modal

2147Edge-tilt alert modalSuperpositionsUn mode d'avertissement pour les actions irréversibles qui monte et s'incline à partir du bord inférieur avec un dépassement élastique et se ferme uniquement via ses propres boutons.

Focus-Trapped Modal Kit

2156Focus-Trapped Modal KitSuperpositionsUne base modale simple dont l'intérêt réside dans le comportement discipliné du clavier : elle capte la mise au point à l'ouverture et la restitue précisément à la fermeture, enveloppée dans une entrée inclinable.

Grouped backdrop popover

2160Grouped backdrop popoverSuperpositionsUn déclencheur de popover qui s'ouvre près de son ancre avec un arrière-plan grisé en option, et ferme tout popover frère de son groupe dès son ouverture.

Grouped filter popover

2161Grouped filter popoverSuperpositionsUne rangée de petits boutons de filtre où l'ouverture du panneau d'un bouton ferme automatiquement tout autre panneau déjà ouvert dans la même rangée, chaque panneau s'agrandissant à partir du bord à partir duquel il a été déclenché.

Bottom sheet panel

2271Bottom sheet panelSuperpositionsUne feuille de style mobile qui s'élève à partir du bord inférieur à l'aide d'une poignée de saisie et peut être tirée vers le bas pour être rejetée.

Command Palette Search

2272Command Palette SearchSuperpositionsUne superposition invoquée par le clavier avec un champ de recherche en haut et une liste de commandes groupées et filtrées en direct en dessous, entièrement navigables au clavier et exécutées avec Entrée.

Account Dropdown Menu

2295Account Dropdown MenuSuperpositionsUn déclencheur d'avatar qui ouvre un menu de compte groupé avec des astuces de raccourci clavier, un sous-menu de thème et une ligne de déconnexion destructrice conçue à part du reste.

Account Menu Flyout

2296Account Menu FlyoutSuperpositionsUn bouton de résumé de profil qui s'ouvre sur un menu de compte composé de lignes étiquetées, avec une petite ligne indicatrice incurvée qui se redresse lorsque le menu est ouvert.

App folder expand

2300App folder expandSuperpositionsUne vignette de dossier de style écran d'accueil dont les petites icônes d'application se transforment en un panneau complet, chaque icône voyageant de sa miniature à son grand emplacement.

Blocking alert dialog

2306Blocking alert dialogSuperpositionsUn dialogue centré qui exige un choix explicite avant de se fermer, utilisé pour des actions irréversibles que le visiteur ne doit pas rejeter par accident.

Card to fullscreen modal

2311Card to fullscreen modalSuperpositionsUne carte de liste qui se transforme continuellement en un panneau de détails presque plein écran en utilisant sa propre image et son propre titre, puis se transforme à nouveau à la fermeture.

Confirm action modal

2324Confirm action modalSuperpositionsUne boîte de dialogue de confirmation centrée qui s'ouvre sur un fond sombre, demandant au visiteur de confirmer ou d'annuler une action destructrice.

Confirm Delete Modal

2325Confirm Delete ModalSuperpositionsUne boîte de dialogue de confirmation centrée qui apparaît en fondu sur un fond grisé, demande à l'utilisateur de confirmer une action destructrice et s'anime en cas d'annulation, de confirmation ou de clic extérieur.

Destructive confirm dialog

2334Destructive confirm dialogSuperpositionsUne boîte de dialogue de confirmation pour les actions destructrices qui ne se ferme que via ses propres boutons, refusant de se fermer lors d'un clic ou d'un échappement en arrière-plan.

Dismissible Dialog

2335Dismissible DialogSuperpositionsUne boîte de dialogue centrée à usage général qui s'ouvre sur un arrière-plan flou et peut être fermée avec désinvolture par son bouton de fermeture, l'arrière-plan ou Échap.

Drag Dismiss Bottom Drawer

2340Drag Dismiss Bottom DrawerSuperpositionsUn panneau qui glisse à partir d'un bord avec une petite poignée de déplacement, suit le glissement d'un doigt ou d'un pointeur avec une résistance élastique, et s'ouvre ou se ferme en fonction de la distance dans laquelle il est tiré.

Invoice detail sheet

2871Invoice detail sheetSuperpositionsConsultez les lignes d’une facture et consignez une vérification interne dans le document.

Comparer ces composants

Choisissez selon le comportement et la mise en page, puis vérifiez les frameworks disponibles et les conditions d’accès sur la page de chaque composant.

Account Dropdown Menu
Un déclencheur d'avatar qui ouvre un menu de compte groupé avec des astuces de raccourci clavier, un sous-menu de thème et une ligne de déconnexion destructrice conçue à part du reste.
Account Menu Flyout
Un bouton de résumé de profil qui s'ouvre sur un menu de compte composé de lignes étiquetées, avec une petite ligne indicatrice incurvée qui se redresse lorsque le menu est ouvert.
Anchored detail popover
Un bouton de déclenchement qui ouvre un petit panneau ancré contenant un formulaire de paramètres intitulé, sortant du bord du déclencheur et se fermant sur Échap ou sur un clic extérieur.

Conseils de design

Ouvrir l’index complet

Étiquettes

3d (16)accessible (4)accordion (9)action (3)actions (6)activity (5)add (7)admin (12)agent (12)alert (8)align (3)ambient (39)analytics (13)anchored (3)animated (82)animation (4)annotation (3)app shell (3)arc (4)arcs (3)area (12)area chart (4)arrow (32)audio (3)aurora (4)auth (11)authentication (12)auto height (4)autocomplete (4)avatar (10)avatars (3)axis (5)backdrop (18)backer (3)background (54)badge (21)band (6)banner (9)bar (16)bar chart (3)bars (6)beam (6)beams (5)bevel (12)bezel (3)billing (10)bin (3)blend (4)blob (4)blobs (3)bloom (10)blur (15)booking (9)bookmark (3)border (16)bounce (6)brackets (3)breadcrumb (4)breathing (3)broadcast (3)burst (7)busy (5)button (397)button group (5)buttons (4)calendar (32)call to action (11)callout (3)canvas (89)capsule (12)caption (8)card (35)cards (7)caret (5)carousel (11)cascade (3)category (3)cells (4)chain (3)characters (4)chart (59)chat (4)check (3)checkbox (13)checklist (7)checkmark (5)chevron (10)chip (22)chips (4)circle (9)circular (5)click (7)clip (9)clipboard (3)close (4)cloud (3)cluster (3)code (6)collapse (11)collapsible (6)collision (3)column (4)columns (3)combobox (4)command palette (3)commercial (10)compact (8)comparison (8)composer (4)concentric (4)confetti (4)confirm (24)confirmation (7)console (5)contact (3)context menu (4)controlled-state (18)copy (4)corner (6)corners (7)count (7)count-up (3)counter (18)crossfade (5)crosshair (6)cta (28)cue (4)cursor (26)curtain (7)curve (4)customer (13)cycle (6)dark (15)dark mode (4)dashboard (9)dashed (5)data (13)date picker (16)date range (13)deck (3)delay (5)delete (8)depth (32)destructive (9)destructive-action (4)device mockup (3)diagonal (13)diagram (3)dial (5)dialog (17)digits (5)direction (5)disc (5)disclosure (8)dismiss (6)displacement (3)distortion (5)divider (4)dock (4)donut (7)dots (15)download (10)drag (21)draw (3)drawer (10)drift (17)dropdown (18)dropdown menu (3)duration (3)easing (4)echo (3)edge (7)edge light (3)editor (3)elastic (8)elevation (6)ellipsis (3)email (3)emboss (4)emphasis (3)empty state (3)entrance (14)error state (3)events (3)exit (3)expand (23)explorer (3)fade (9)falling (3)falloff (4)fan (6)faq (4)feed (3)feedback (12)field (6)fill (46)film (3)filter (13)finance (10)flat (6)flat shadow (3)flight (3)flip (10)floating panel (4)flood (14)flow (5)fluid (3)flyout (3)focus (19)focus ring (5)focus trap (6)folder (5)follow (11)form (47)form-control (12)formatting (3)frame (19)gallery (15)game (3)gap (4)gauge (5)gesture (6)ghost (7)glare (3)glitch (9)glow (39)glyph (7)gradient (38)grain (10)gravity (3)grid (35)group (8)guide (3)hairline (8)halftone (4)halo (15)hamburger (4)hard shadow (6)heading (8)headline (19)hero (11)hexagon (3)highlight (22)hinge (4)hint (12)hold (6)horizon (3)horizontal (4)hover (251)hover card (10)hover reveal (3)icon (121)icon-button (23)icons (4)identity (3)indeterminate (4)indicator (9)inertia (4)initials (3)ink (4)inline (5)input (20)input group (3)inset (11)interactive (50)invert (26)italic (3)key (11)keyboard (20)keyboard navigation (6)keycap (10)knob (4)kpi (5)label (14)label reveal (3)label swap (9)labels (7)lag (4)lattice (4)launch (3)layered (9)layers (3)layout (18)ledge (6)legend (9)lens (4)letters (10)lift (19)light (22)lightbox (4)like (4)line (11)line chart (4)lines (8)link (11)link preview (7)liquid (7)list (13)live (3)loader (9)loading (27)log (3)login (10)loop (42)magnet (5)magnetic (3)magnify (3)map (4)marker (3)markers (6)marquee (8)mask (9)matrix (4)media (4)menu (23)merge (3)mesh (5)message (4)metal (10)meter (5)metric (10)metrics (5)minimal (10)modal (19)monospace (12)monthly (12)morph (14)motion (3)motion tuning (3)moulded (6)multi-select (4)nav (3)navbar (3)navigation (21)nested (7)neutral (4)night (4)noise (16)notification (3)notifications (4)nudge (4)number (11)odometer (5)offset (7)on-off (4)onboarding (3)one time code (5)options (5)orb (4)orbit (13)otp (3)outline (63)outlined (4)overflow (7)overlay (24)overshoot (3)page (18)palette (3)panel (31)panels (6)paper plane (4)paragraph (3)parallax (15)particles (18)paste (3)path (4)pattern (9)percentage (4)perimeter (3)perspective (20)photo (5)physics (5)picker (3)pie (7)pill (83)pill switch (4)pin (3)pinned (3)pixel (3)placeholder (4)plane (5)plate (9)play (4)playful (7)pointer (65)polar (8)pop (4)popover (17)post card (3)power (3)press (77)pressed (6)pricing (3)primitive (4)print (4)product (6)profile (8)progress (27)proportion (4)providers (4)pulse (17)queue (3)quiet (5)radar (9)radial (8)radio (4)radio group (8)raised (3)ramp (5)ranking (3)rays (4)readout (4)record (4)registration (3)relay (3)relief (6)remove (3)reorder (3)resize (4)restore (3)retro (4)retry (3)reveal (80)ribbon (6)rim (8)ring (25)rings (10)ripple (18)rise (3)roll (6)rotate (21)rotating text (4)rotation (6)round (5)rounded (3)row (11)rows (4)save (5)scale (20)scan (5)scatter (4)scheduler (3)scramble (5)screen (3)screenshot frame (3)scroll (38)scrub (5)search (8)section (4)sections (4)segmented (7)segmented control (12)select (5)selection (5)send (23)sequence (8)series (7)settings (21)shadow (28)shape (3)share (25)shared element (4)sheen (14)sheet (4)shell (3)shimmer (8)shine (5)shortcut (4)shuffle (3)shutter (5)sidebar (7)sign in (11)signal (8)signup (9)silhouette (3)sizes (4)skew (9)slab (6)slide (20)slider (10)sliding highlight (7)sliding indicator (3)snap (4)social (6)soft (6)space (5)spark (3)sparkline (3)spin (15)spinner (9)split (9)split-flap (3)split text (3)spotlight (7)spring (63)square (5)squash (4)stack (17)stacked (7)stagger (40)staircase (3)star (3)stars (6)stat (5)state (11)static (3)status (21)stepper (3)steps (3)sticker (4)sticky (4)streaks (3)strikethrough (3)stripes (5)stroke (6)submenu (9)submit (7)subtle (3)success (3)surface (5)svg (102)swap (12)sweep (40)swell (4)swipe (5)swirl (3)switch (16)tabs (22)tactile (26)tap (4)target (3)task (3)team (5)terminal (3)text (40)text button (3)text-effect (3)text field (4)text transition (3)textarea (4)texture (11)theme (3)theme toggle (4)thumbnail (4)ticker (5)tile (16)tiles (12)tilt (26)time (3)time range (3)time series (3)timeline (3)timer (3)timing (5)tint (5)toggle (65)toggle group (10)toolbar (25)tooltip (37)total (3)touch (3)trace (4)tracking (6)trail (20)transition (6)translucent (9)travel (6)tray (3)tree (3)trend (10)trigger (4)tunnel (4)twinkle (4)typewriter (9)typing (8)typography (18)underline (10)upload (5)uppercase (14)validation (5)value (3)values (4)variants (4)velocity (3)verification (8)video (4)viewport (6)voice (3)warp (6)wash (5)wave (13)waveform (3)waves (7)window (3)wipe (23)wireframe (3)wireless (3)wobble (6)word swap (3)words (3)workflow (18)workspace (36)wrapper (3)zoom (4)