Composants

drag

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

21 sur 21

Sheet drawer

1540Sheet drawerSuperpositionsUn panneau coulissant qui surgit d'un bord sur un fond sombre, maintient le focus à l'intérieur et se ferme sur Échap, sur le bouton de fermeture ou en tirant sur son en-tête.

Split panes

1542Split panesMise en pageDeux volets divisés par une poignée qui les redimensionne par glisser-déplacer ou par flèche, conserve une taille minimale des deux côtés et se referme sur double-clic.

Coiled Spring Drag

1675Coiled Spring DragAnimationUne tuile déplaçable attachée à son point d'origine par une bobine tirée qui s'étire et s'amincit lorsque vous tirez, puis ramène la tuile lorsque vous la lâchez.

Drag tile track

1771Drag tile trackAnimationUne tuile que vous pouvez lancer autour d'une piste délimitée qui s'incline dans la traînée, résiste au-delà des bords et s'arrête avec élan.

Swipe photo stack

1838Swipe photo stackCartesUne pile de cartes photo où celle du haut peut être lancée à gauche ou à droite, l'envoyant vers l'arrière au fur et à mesure que la pile avance.

Scaling dot carousel

2027Scaling dot carouselNavigationUn carrousel de diapositives dont la carte active est à pleine échelle tandis que ses voisines rétrécissent légèrement, associée à des indicateurs de points qui s'élargissent en pilules étiquetées.

Scrub Number Input

2030Scrub Number InputFormulairesUn champ numérique avec des boutons d'incrémentation et de décrémentation ainsi qu'une étiquette déplaçable qui fait monter ou descendre la valeur lorsque vous la faites glisser latéralement.

Peelable sticker

2203Peelable stickerAnimationUn autocollant en vinyle que vous pouvez faire glisser autour de sa zone, dont le bord se soulève de la surface en survol et se décolle davantage lorsque vous le tenez.

Rubber sheet panel

2218Rubber sheet panelAnimationUn panneau qui se comporte comme du caoutchouc étiré : le pointeur l'attrape, les points voisins traînent et le lâchent le ramène avec une oscillation.

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.

Curved Scroll Wall

2330Curved Scroll WallMise en pageUn mur de photos à défilement horizontal rendu sur un plan légèrement incurvé et courbé qui continue de défiler à l'infini dans les deux sens.

Drag reorder checklist

2341Drag reorder checklistAffichage des donnéesUne liste de contrôle dont les lignes peuvent être glissées dans un nouvel ordre, avec les éléments cochés dessinant une coche animée et un barré.

Receding stack carousel

2411Receding stack carouselMise en pageUn carrousel où les cartes s'éloignent derrière la carte ciblée, s'assombrissant et se floutant à mesure qu'elles s'éloignent.

Spring drag carousel

2439Spring drag carouselMise en pageUn carrousel de cartes déplaçables qui s'aligne sur la carte la plus proche avec la physique du ressort et peut être lu automatiquement en boucle.

Swipe action row

2445Swipe action rowSuperpositionsUne ligne de liste de style message qui révèle des boutons d'action colorés derrière elle lorsque vous la faites glisser latéralement.

Swipe away card deck

2446Swipe away card deckMise en pageUn jeu de cartes photo en éventail sur lequel vous pouvez faire glisser ou appuyer pour envoyer celle du haut vers l'arrière, une à la fois.

Interactive spin globe

2738Interactive spin globeMédiasUn globe en toile ombragée qui tourne lentement, allume des marqueurs lumineux sur des emplacements dispersés et peut être saisi et tourné à la main.

Before/After reveal handle

2758Before/After reveal handleChamps de saisieUn séparateur déplaçable sur deux scènes empilées qui révèle l'une à gauche et l'autre à droite, déplacé par le pointeur, un clic pour sauter et les touches fléchées.

Exposure dial slider

2766Exposure dial sliderChamps de saisieUn aperçu de la photo avec une lecture d'exposition circulaire dans son coin au-dessus d'une règle de graduations déplaçable qui définit la valeur d'exposition en EV.

Vertical brightness slider

2788Vertical brightness sliderChamps de saisieUn grand curseur de pilule qui se remplit de lumière depuis le bas lorsque vous le faites glisser, résiste à chaque extrémité et rebondit lorsqu'il est relâché.

Elastic tug slider

2795Elastic tug sliderChamps de saisieUn curseur qui s'étire comme un élastique lorsqu'on le traîne au-delà de ses extrémités, reprenant la piste avec un rebond une fois relâché.

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.

Before/After reveal handle
Un séparateur déplaçable sur deux scènes empilées qui révèle l'une à gauche et l'autre à droite, déplacé par le pointeur, un clic pour sauter et les touches fléchées.
Bottom sheet panel
Une 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.
Coiled Spring Drag
Une tuile déplaçable attachée à son point d'origine par une bobine tirée qui s'étire et s'amincit lorsque vous tirez, puis ramène la tuile lorsque vous la lâchez.

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)