Composants

tile

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

16 sur 16

1679Crossing ripple tileBoutonsUne tuile de badge carrée où deux points arrivent depuis des bords opposés, se gonflent en cercles qui se chevauchent qui inondent le visage et déroulent une légende en dessous.

1706Hex cell gridArrière-plansUn nid d'abeilles de cellules hexagonales coupées qui s'allument sous le pointeur et se refroidissent, laissant une traînée qui s'estompe.

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.

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.

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.

1797Press and hover scale tileAnimationUne tuile qui gonfle au survol et s'écrase à la pression, la presse battant toujours en survol et les deux étant résolus à partir d'un seul ressort afin que les gestes ne se battent jamais.

1897Tilt Parallax TileCartesUne vignette qui s'incline en 3D vers le pointeur sur des ressorts, soulève un calque de superposition au-dessus de sa face et traîne une petite légende qui s'incline avec la vitesse du curseur.

1936Chevron flip tileBoutonsUne tuile icône carrée dont le chevron s'articule à plat et s'ouvre dans l'autre sens, chaque moitié pivotant sur le joint où elles se rencontrent.

2413Reversing bars menu buttonBoutonsUne petite vignette de menu carrée dont les trois barres empilées échangent des largeurs en survol tandis que la vignette elle-même passe d'une couleur de remplissage à une autre.

2450Tilting Backer TileBoutonsUne tuile carrée translucide avec une plaque de couleur unie placée exactement derrière elle qui s'incline sous la face en survol.

2512Plus to cross tileBoutonsUne petite tuile carrée portant un signe plus qui tourne de quarante-cinq degrés en une croix serrée et gonfle d'une fraction en tournant.

2590Copy flick tileBoutonsUne tuile carrée contenant une pile de deux pages ; un appui long fait disparaître la première page, confirme la copie dans la légende, puis réinitialise la pile.

2607Glass tube element tileBoutonsUne tuile carrée sélectionnable encadrée comme une longueur de tube de verre éclairé, avec un symbole d'élément à l'intérieur qui s'éclaire au survol et se verrouille lorsqu'il est sélectionné.

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.

2634Pressed tile icon buttonBoutonsUne tuile d'icône moulée douce qui se dresse fièrement sur une surface pâle et, en survol, s'y enfonce en retournant sa paire d'ombres à l'envers.

2636Slab Lift Icon ButtonBoutonsUne tuile d'icône translucide qui s'élève d'une solide plaque de lumière en survol, puis retombe et avale la dalle lorsqu'elle est enfoncée.

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.

Chevron flip tile
Une tuile icône carrée dont le chevron s'articule à plat et s'ouvre dans l'autre sens, chaque moitié pivotant sur le joint où elles se rencontrent.
Copy flick tile
Une tuile carrée contenant une pile de deux pages ; un appui long fait disparaître la première page, confirme la copie dans la légende, puis réinitialise la pile.
Crossing ripple tile
Une tuile de badge carrée où deux points arrivent depuis des bords opposés, se gonflent en cercles qui se chevauchent qui inondent le visage et déroulent une légende en dessous.

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)