Composants

wipe

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

23 sur 23

Arrow wipe call to action

1629Arrow wipe call to actionBoutonsUn appel à l'action dont la plaque plus sombre s'efface depuis la gauche lors du survol tandis qu'une flèche repliée glisse vers l'extérieur pour rencontrer l'étiquette et abaisse un pixel lorsque vous cliquez dessus.

Day night sweep toggle

1631Day night sweep toggleBoutonsUn bouton icône qui fait alterner un panneau de paramètres entre clair, sombre et automatique, en le repeignant avec un bord coupé dur qui balaie au lieu d'un fondu.

Wipe fill button

1664Wipe fill buttonBoutonsUn bouton de pilule dont le disque de la taille d'une pièce de monnaie s'agrandit pour couvrir toute la forme en survol, effaçant le remplissage d'accent sous une étiquette qui ne bouge jamais.

Rising Fill Badge

1741Rising Fill BadgeBoutonsUne tuile carrée dont le badge rond rétrécit et grimpe tandis qu'un grand cercle s'efface vers le haut depuis le bas et qu'une légende s'élève dans l'espace qu'elle laisse.

Circular wipe switcher

1765Circular wipe switcherAnimationUn sélecteur de couleurs où le nouveau thème inonde toute la surface sous la forme d'un cercle s'étendant à partir du point exact sur lequel vous avez appuyé, tandis que l'anneau de sélection glisse entre les échantillons.

Left Wipe Button

1839Left Wipe ButtonBoutonsUn bouton solide sur un rebord dur dont la teinte plus brillante s'efface à partir du bord gauche lors d'un balayage lent et délibéré en survol.

Skewed wipe button

1887Skewed wipe buttonBoutonsUn bouton masqué par un panneau sombre incliné qui glisse vers la droite au survol, révélant la couleur en dessous.

Marker highlight

1995Marker highlightEffets de texteUne phrase avec une bande de marqueur qui s'efface derrière elle de gauche à droite lorsque la ligne apparaît pour la première fois, laissant les mots posés sur un bloc de couleur.

Masked Reveal Accordion

1997Masked Reveal AccordionAffichage des donnéesUn accordéon dont les panneaux sont découverts par un masque mobile aux bords durs lorsqu'ils s'ouvrent, de sorte que les réponses apparaissent ligne par ligne au lieu de s'effacer en bloc.

Curtain line loader

2138Curtain line loaderMessages d’étatUn rideau de chargement qui se retire derrière une ligne de déplacement lumineuse, coupant le contenu fini au lieu de le faire apparaître en fondu.

2157Four edge wipe icon buttonBoutonsUn bouton icône carré dont le glyphe rétrécit tandis que quatre panneaux inclinés glissent depuis chaque bord et inondent la tuile d'une couleur d'accent.

Left wipe button

2266Left wipe buttonBoutonsUn bouton posé sur un rebord dur dont la teinte plus brillante apparaît depuis le bord gauche en survol, comme un remplissage de jauge.

Underline Wipe Link

2459Underline Wipe LinkBoutonsUn lien texte en majuscule dont la règle s'efface depuis la gauche en survol et se rétracte vers la droite en congé, avec une longue flèche qui glisse vers la maison.

Skewed wipe reveal button

2531Skewed wipe reveal buttonBoutonsUne pilule cachée sous un panneau sombre incliné ; le survol fait glisser le panneau du bord droit pour découvrir le remplissage clair tandis que l'étiquette devient sombre.

Comb wipe invert button

2542Comb wipe invert buttonBoutonsDeux peignes rayés imbriqués glissent par le haut et par le bas pour recouvrir une pilule noire, inversant l'étiquette au fur et à mesure de leur passage.

Pass through wipe button

2558Pass through wipe buttonBoutonsUn bouton rempli dont le panneau lumineux s'efface depuis un bord en survol et sort par le bord opposé lorsque vous partez, de sorte qu'il continue de voyager.

Edge wipe invert

2597Edge wipe invertBoutonsUn bouton avec contour dont le remplissage uni s'efface à partir d'un bord et inverse l'étiquette lorsqu'elle passe en dessous.

Color relay sign-in

2603Color relay sign-inBoutonsUne pilule de connexion dont la marque à quatre segments transmet ses couleurs une à une aux flots circulaires qui balayent le bouton en relais.

2610Icon tile flood buttonBoutonsUn bouton avec une vignette d'icône d'accent solide sur son bord gauche ; le survol donne cet accent sur le corps pâle et retourne l'encre de l'étiquette en blanc.

Skewed blade invert

2618Skewed blade invertBoutonsUn bouton arrondi et sombre qui s'inverse comme une lame d'accent inclinée s'ouvre vers l'extérieur depuis son centre lors du survol ou de la mise au point du clavier.

Arrow wipe button

2683Arrow wipe buttonBoutonsUn bouton de pilule dont la plaque d'accent, découpée en pointe de flèche, balaye depuis la gauche en survol et inverse l'étiquette lettre par lettre lorsque sa pointe se croise.

Skewed wipe swap button

2703Skewed wipe swap buttonBoutonsUn bouton qui change son étiquette en survol ou en mise au point tandis qu'un panneau d'accent cisaillé s'efface sur son visage.

Shape wipe theme toggle

2780Shape wipe theme toggleChamps de saisieUn bouton icône soleil et lune qui change le thème du panneau avec un balayage de forme qui s'étend à partir du bouton, permute les couleurs en pleine couverture, puis se rétrécit.

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.

Arrow wipe button
Un bouton de pilule dont la plaque d'accent, découpée en pointe de flèche, balaye depuis la gauche en survol et inverse l'étiquette lettre par lettre lorsque sa pointe se croise.
Arrow wipe call to action
Un appel à l'action dont la plaque plus sombre s'efface depuis la gauche lors du survol tandis qu'une flèche repliée glisse vers l'extérieur pour rencontrer l'étiquette et abaisse un pixel lorsque vous cliquez dessus.
Circular wipe switcher
Un sélecteur de couleurs où le nouveau thème inonde toute la surface sous la forme d'un cercle s'étendant à partir du point exact sur lequel vous avez appuyé, tandis que l'anneau de sélection glisse entre les échantillons.

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)