Composants

slide

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

20 sur 20

Directional Slide In

1684Directional Slide InAnimationUne révélation qui pousse le contenu depuis l'un des quatre côtés d'une distance définie et permet à un ressort d'absorber l'arrivée.

Sliding panel button

1832Sliding panel buttonBoutonsUn bouton bordé dont la deuxième étiquette s'insère sur un panneau coloré à partir du bord droit, recouvrant complètement la première étiquette.

Scroll entrance wrapper

1880Scroll entrance wrapperDéfilementUn wrapper qui maintient ses enfants garés hors position jusqu'à ce qu'ils défilent, puis joue une arrivée facilitée et ne la répète jamais.

Tilting Rocket Button

1899Tilting Rocket ButtonBoutonsUn bouton de lancement sombre dont le glyphe de fusée incliné se redresse et glisse vers l'avant tandis que l'étiquette suit derrière.

Slide out tabs button

2040Slide out tabs buttonBoutonsUn bouton de téléchargement avec deux onglets de légende sombres empilés derrière lui qui glissent vers le haut et le bas en survol et se tirent à mi-chemin lorsqu'il est maintenu enfoncé.

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.

Stacked swap cart button

2241Stacked swap cart buttonBoutonsDeux boutons pleine largeur empilés dans une fenêtre à un bouton, donc pointer sur la fenêtre fait glisser la paire vers le haut et échange l'action de navigation contre l'action d'achat.

Hover duplicate text nav

2365Hover duplicate text navNavigationUne liste de navigation verticale fait glisser chaque étiquette vers le haut et vers le haut en survol, tandis qu'une étiquette en double glisse par le bas pour prendre sa place.

Hover slide nav labels

2366Hover slide nav labelsNavigationUne liste de navigation verticale dans laquelle le survol ou la mise au point d'une étiquette fait glisser une copie en double vers le haut tandis que l'original glisse, de sorte que l'étiquette semble s'actualiser.

Link Preview Card

2380Link Preview CardSuperpositionsUne carte d'aperçu riche qui s'estompe et glisse quel que soit le côté sur lequel elle s'ouvre lorsque vous survolez un nom lié, avec un bref délai pour éviter le scintillement.

Rising arrow link button

2416Rising arrow link buttonBoutonsUn bouton Lire la suite où l'étiquette glisse latéralement pour ouvrir un espace et une flèche y grimpe depuis le dessous du bord inférieur coupé.

2476Icon reveal chipBoutonsUne petite puce décrite qui inonde de son accent au survol tandis que l'étiquette glisse vers la gauche et qu'un glyphe caché apparaît en fondu depuis la droite.

Slide under download button

2513Slide under download buttonBoutonsUn bouton étiqueté qui fait glisser un plateau d'action lumineux hors de sa plaque en survol ou en mise au point, avec une flèche de téléchargement qui bouge à l'intérieur du plateau.

Label swap slide button

2523Label swap slide buttonBoutonsUne pilule bordée qui échange tout son contenu en survol : la rangée de repos glisse vers le haut et vers l'extérieur tandis qu'une deuxième rangée avec sa propre icône et sa propre couleur glisse par le bas.

Sliding fill send pill

2564Sliding fill send pillBoutonsUne pilule aux contours larges avec un disque solide à une extrémité ; des diapositives flottantes qui remplissent toute la pilule et retournent l'étiquette au fur et à mesure qu'elle passe.

2580Overshoot icon buttonBoutonsUne pilule pâle avec un grand glyphe illustré garé à son extrémité gauche qui tire vers l'extérieur au-delà du bord et revient en vol stationnaire ou en mise au point.

Lozenge swipe highlight

2599Lozenge swipe highlightBoutonsUne étiquette monospace nue avec un losange coloré garé à sa droite qui glisse et s'étire pour devenir un point culminant complet au survol.

Slide away destructive

2619Slide away destructiveBoutonsUn bouton destructeur dont l'étiquette glisse vers la gauche pour ne laisser qu'une croix, puis se transforme en un visage de réussite avec une coche pendant un instant lorsqu'on appuie dessus.

Sliding send button

2704Sliding send buttonBoutonsUn bouton d'envoi plat qui glisse directement au survol tandis que l'espace entre son étiquette et sa flèche s'ouvre, recule de quelques pixels sous pression et se stabilise en partant.

Glide swap button

2715Glide swap buttonBoutonsUn bouton de largeur fixe qui fait glisser son étiquette du bord droit tandis que le glyphe glisse vers le centre, le tout reposant sur un rebord de couleur dure sur lequel le bouton tombe lorsqu'on appuie 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.

Directional Slide In
Une révélation qui pousse le contenu depuis l'un des quatre côtés d'une distance définie et permet à un ressort d'absorber l'arrivée.
Edge-slide panel
Un 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.
Glide swap button
Un bouton de largeur fixe qui fait glisser son étiquette du bord droit tandis que le glyphe glisse vers le centre, le tout reposant sur un rebord de couleur dure sur lequel le bouton tombe lorsqu'on appuie dessus.

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)