Composants

sweep

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

36 sur 40

Chargement de l’index de recherche complet.

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.

Shortcut chip button

1651Shortcut chip buttonBoutonsUn petit bouton à puce qui annonce un raccourci clavier, incline son glyphe en survol et efface une fine bande de lumière sur lui-même.

Diagonal Glare Sweep

1682Diagonal Glare SweepAnimationUn emballage qui fait glisser une étroite bande de lumière en diagonale sur tout ce qu'il contient lorsque le focus du pointeur ou du clavier arrive.

Light beam slats

1715Light beam slatsArrière-plansDe longues lattes diagonales glissent les unes sur les autres dans l'obscurité, chacune captant une bande de lumière lorsqu'elle se croise afin que le panneau respire comme un store éclairé.

Light sweep button

1717Light sweep buttonBoutonsUn bouton aux contours discrets dont les lettres et la bordure sont éclairées par une barre de lumière diagonale qui balaie, repose une seconde et balaie à nouveau.

Pointer angle sweep

1732Pointer angle sweepArrière-plansUn panneau éclairé par un balayage conique dont l'origine se trouve sous le pointeur et dont le bord brillant pointe vers lui, passant à une lente rotation au ralenti lorsque le pointeur s'en va.

Scanning wire grid

1744Scanning wire gridArrière-plansUne fine grille métallique en perspective s'incline avec le pointeur tandis qu'une bande lumineuse la traverse en boucle, éclairant chaque ligne qu'elle traverse.

Twin Sweep Tile

1756Twin Sweep TileBoutonsUne tuile au contour carré qui s'incline lorsqu'elle se soulève, parcourt deux bandes lumineuses inclinées sur elle-même dans des directions opposées et échange son glyphe contre une légende.

Sweep invert button

1837Sweep invert buttonBoutonsUn bouton bleu marine profond dont le remplissage brillant s'étend du bord droit et fait passer l'étiquette au ton sombre d'une simple pression.

Edge Faded Plot Grid

1853Edge Faded Plot GridGraphiquesUne toile de fond d'intrigue composée de règles en pointillés qui s'estompent sur les bords, avec une ligne de base en surbrillance et une bande lumineuse qui les parcourt.

Light sweep button

1869Light sweep buttonBoutonsUn bouton de contour éclairé dont le bord brillant envoie une étroite bande de lumière le balayant en survol.

Sheen sweep card

1886Sheen sweep cardCartesUne carte avec une bande de lumière garée sur un coin qui traverse le visage en survol et glisse vers l'arrière au moment où le pointeur part.

Fill sweep loading text

1959Fill sweep loading textMessages d’étatUne étiquette de chargement dont le contour pâle se trouve sous une copie entièrement colorée qui s'étend depuis la gauche, atteint toute la largeur et ressort, se répétant aussi longtemps que quelque chose se charge.

Flowing gradient headline

1962Flowing gradient headlineEffets de texteUn titre dont les lettres sont remplies par un dégradé bicolore mobile, de sorte qu'une bande lumineuse dérive sans fin à travers les mots, avec une douce floraison facultative derrière.

Gradient sweep heading

1971Gradient sweep headingEffets de texteUn grand titre dont le remplissage est une bande de dégradé mobile qui s'étend continuellement d'un bord à l'autre, donnant au texte un éclat brillant et toujours changeant.

Sweeping status text

2060Sweeping status textEffets de texteUn grand mot de statut qui échange sur un rythme régulier tandis qu'une bande lumineuse parcourt sans fin les formes des lettres.

Light sweep effect

2180Light sweep effectBoutonsUne bande de lumière diagonale qui traverse un bouton une fois, déclenchée par un survol, une pression ou une minuterie répétitive.

Signal sweep bands

2229Signal sweep bandsArrière-plansUne bannière de bandes lumineuses déformées par les interférences avec un balayage lumineux les traversant et les canaux de couleur légèrement frangés.

Left Edge Fill Button

2378Left Edge Fill ButtonBoutonsUne dalle arrondie et douce où un panneau coloré pousse à partir du bord gauche pour remplir toute la forme au survol, retournant l'étiquette au fur et à mesure de son passage.

2477Icon sweep delete buttonBoutonsUn bouton destructeur dont la vignette d'icône plus sombre s'étend du bord droit sur la face en survol, recouvrant l'étiquette pendant que le couvercle de la poubelle s'ouvre.

Panning gradient button

2483Panning gradient buttonBoutonsUne clé en forme de dôme dont le dégradé diagonal surdimensionné traverse le visage au survol, balayant une bande plus claire d'un coin à l'autre.

Sweeping band button

2487Sweeping band buttonBoutonsUn bouton rempli contenant une bande de couleur deux fois sa propre largeur, qui glisse bout à bout au survol pour que le remplissage donne l'impression qu'il se déplace.

Download Sweep Progress

2491Download Sweep ProgressBoutonsUn bouton de téléchargement où le panneau d'icônes se développe sur l'étiquette au survol, puis exécute un véritable remplissage de progression et s'installe sur un état terminé après le clic.

Refresh sweep spin

2499Refresh sweep spinBoutonsUn bouton d'actualisation dont le panneau d'icônes plus sombre balaie le visage en survol pendant que la flèche fait exactement un tour, puis continue de tourner pendant une course chargée avant de se reposer.

Rotating sky explore button

2532Rotating sky explore buttonBoutonsUn bouton dont le remplissage est un énorme disque balayé garé en dessous ; le vol stationnaire fait tourner le disque dans le cadre comme un ciel nocturne tournant tandis que de minuscules étoiles dérivent à des hauteurs décalées.

Opposing rule text button

2537Opposing rule text buttonBoutonsUn bouton de texte en majuscules sans bordure encadré par deux règles qui balayent depuis les extrémités opposées lors du survol ou de la mise au point et reculent comme elles sont venues.

Scanline sweep button

2571Scanline sweep buttonBoutonsUn bouton sombre de style console qui laisse tomber une fine barre lumineuse sur sa face en survol tandis que le bord épais de sa bordure migre de bas en haut.

Twin Bubble Rise

2621Twin Bubble RiseBoutonsDeux ellipses surdimensionnées s'élèvent au-dessous d'un mince bouton au survol ou à la mise au point, une faible en tête et l'accent suivant, de sorte que le remplissage arrive sous la forme d'une courbe roulante.

Diagonal orb fill button

2626Diagonal orb fill buttonBoutonsUn cercle surdimensionné glisse d'un coin à l'autre sur un bouton décrit, le remplissant sur la diagonale et s'assombrit dès que vous appuyez sur.

Relay fill button

2652Relay fill buttonBoutonsUn bouton demi-arrondi qui se remplit au survol grâce à un relais de deux barres de course qui grimpent jusqu'à toute la hauteur avant que l'étiquette ne change de couleur.

Diagonal wedge button

2676Diagonal wedge buttonBoutonsUn bouton carré rempli d'un coin triangulaire qui s'étend le long de la diagonale jusqu'à couvrir tout le visage.

Destructive sweep button

2696Destructive sweep buttonBoutonsUne action de suppression dont les nuances allant du rose au pourpre balayent de bout en bout en survol, inclinant le couvercle de la poubelle, avec une prise facultative pour confirmer la ligne le long du bord inférieur.

Shimmer sweep button

2725Shimmer sweep buttonBoutonsUn bouton translucide teinté avec un bord capillaire qui envoie une bande de lumière inclinée balayant son visage en survol.

Press down sweep button

2776Press down sweep buttonBoutonsUn bouton solide dont le remplissage s'éclaire plus clairement d'un côté en survol et tombe à plat contre la page pendant qu'il est maintenu.

Flowing gradient text

2814Flowing gradient textEffets de texteUn dégradé multicolore balaie en continu le remplissage d'un titre, éventuellement encadré par une bordure de dégradé assortie.

Sweeping shine text

2822Sweeping shine textEffets de texteTexte rempli d'un dégradé atténué et d'une bande diagonale lumineuse qui se déplace d'avant en arrière comme un reflet de lumière et peut se figer en survol.

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.

Day night sweep toggle
Un 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.
Destructive sweep button
Une action de suppression dont les nuances allant du rose au pourpre balayent de bout en bout en survol, inclinant le couvercle de la poubelle, avec une prise facultative pour confirmer la ligne le long du bord inférieur.
Diagonal Glare Sweep
Un emballage qui fait glisser une étroite bande de lumière en diagonale sur tout ce qu'il contient lorsque le focus du pointeur ou du clavier arrive.

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)