Composants

popover

Explorez les aperçus interactifs, trouvez les bons composants et intégrez les composants ouverts à votre projet avec leur code source.

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

17 sur 17

1762Anchored site previewCartesUn aperçu en survol dont le côté, l'alignement et le décalage peuvent être composés, avec une flèche pointante qui suit l'ancre et se retourne avec elle lorsqu'il n'y a pas de place.

1768Cursor drift link previewCartesUn panneau d'aperçu du lien qui se penche vers l'endroit où le pointeur se trouve sur le lien, le traînant sur un ressort souple.

1779Hover preview popoverCartesUne petite carte détaillée qui s'ouvre à côté d'un lien après un court survol et reste ouverte suffisamment longtemps pour y déplacer le pointeur.

1785Link thumbnail peekCartesUn lien en ligne qui déploie une petite vignette fictive de sa destination au-dessus du mot pendant que le pointeur repose dessus.

1800Profile hover cardCartesLe survol ou la focalisation d'une petite puce d'avatar ouvre un panneau de profil avec un nom, un pseudo, une biographie et le nombre de followers.

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.

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.

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.

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é.

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.

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.

2207Pop scale panelSuperpositionsUn popover qui s'ouvre de moitié, pointe une petite flèche vers son déclencheur, assombrit la page derrière lui et se ferme sur Échap ou sur un clic extérieur.

2305Birthdate popover pickerChamps de saisieUn bouton étiqueté qui ouvre un calendrier flottant avec des listes déroulantes de mois et d'année pour atteindre rapidement une année de naissance, se fermant dès qu'un jour est choisi.

2332Date and Time Duo PickerChamps de saisieDeux champs étiquetés côte à côte, un bouton de date compact qui ouvre une fenêtre contextuelle de calendrier et un champ d'heure simple, pour définir une date et une heure en deux étapes indépendantes.

2389Natural Language Date FieldChamps de saisieUn champ de texte qui lit des expressions telles que « dans 2 jours » ou « vendredi prochain » comme une date réelle, avec une fenêtre contextuelle de calendrier et une phrase d'aperçu en direct ci-dessous.

2443Stay range popover pickerChamps de saisieUn bouton de déclenchement qui affiche deux dates reliées par un trait d'union et ouvre un calendrier à plage flottante pour choisir un jour de début et de fin, pour une sélection de séjour de style hôtelier.

2834Link Thumbnail PeekCartesUn lien en ligne qui affiche une petite vignette de sa destination au-dessus du texte pendant que le pointeur repose dessus.

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.

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.
Anchored info popover
Un 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
Un 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.

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)