Composants

layout

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

18 sur 18

1532Masonry flowMise en pageUn mur de maçonnerie qui regroupe des carreaux de différentes hauteurs dans des colonnes, soulève chacun d'entre eux lorsqu'il défile et réinstalle la grille entière lorsque le nombre de colonnes change.

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.

1568Layout dashboard iconIcônesQuatre tuiles de tableau de bord réparties en deux colonnes inégales, chacune respirant à tour de rôle de sorte que la grille ondule du coin supérieur gauche au coin inférieur droit.

1576Panel iconIcônesUn cadre de fenêtre dont le bord du panneau ancré glisse tandis qu'un chevron indique la direction dans laquelle le panneau se dirige.

1805Slotted panel cardCartesUne surface composable avec des fentes d'en-tête, d'action, de corps et de pied de page qui conservent leur espacement quel que soit le nombre utilisé.

1814Swap timing modesAnimationTrois badges échangent la même paire d'icônes côte à côte selon trois règles de sortie différentes, de sorte que les suppressions superposées, séquentielles et out-of-flow peuvent être comparées en un coup d'œil.

1987Labeled field blockFormulairesUn wrapper de champ de formulaire qui associe une étiquette, un contrôle, un indice et un message d'erreur, basculant entre les dispositions empilées et side-by-side à mesure que le conteneur se rétrécit.

2012Pin to top listAffichage des donnéesUne liste à deux groupes dans laquelle cliquer sur un bouton d’épinglage déplace en douceur un élément entre une section épinglée et une section non épinglée.

2052Spring Push CollapsibleAffichage des donnéesUne ligne de paramètres qui ouvre un panneau de détails et pousse les lignes situées en dessous vers le bas sur un ressort partagé au lieu d'un saut en hauteur.

2214Resizing hint tooltipSuperpositionsUne étiquette de survol dont la bulle se redimensionne automatiquement lorsque son texte est plus long ou plus court, au lieu de passer d'une taille à l'autre.

2342Drag split panelsMise en pagePanneaux divisés par de fines poignées déplaçables qui redimensionnent les volets adjacents en temps réel, disposés en rangée ou empilés.

2351Expanding panel galleryMise en pageUne rangée de panneaux de couverture où le survol, le clic ou la touche fléchée sur l'un d'entre eux l'étend sur toute la largeur tandis que le reste se compresse en éclats.

2357Focus scroll listMise en pageUne file d'attente déroulante dont les lignes apparaissent en taille réelle et en opacité lorsqu'elles atteignent le centre de la vue, avec survol et sélection au clavier.

2381Locked ratio frameMise en pageUn conteneur qui maintient son contenu verrouillé selon un rapport width-to-height choisi, quelle que soit sa largeur.

2401Pinned Card Stack ScrollMise en pageUne séquence verticale de cartes qui s'épinglent en place et rétrécissent légèrement à mesure que la carte suivante défile pour s'empiler dessus.

2424Settling photo masonryMise en pageUne grille de maçonnerie de tuiles photo à hauteur variable qui volent depuis l'écran et s'installent dans leurs colonnes remplies, devenant floues à mesure qu'elles atterrissent.

2771Layout toggle switchChamps de saisieUn commutateur dont le bouton traverse la piste en animant un changement de disposition réel plutôt qu'une translation, de sorte que le lancer reste exact quelle que soit la largeur de la piste.

2781Spring layout toggleChamps de saisieUn interrupteur dont le bouton est aligné sur une extrémité de la piste uniquement par disposition et oscille entre les deux positions mesurées chaque fois que l'état bascule.

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.

Drag split panels
Panneaux divisés par de fines poignées déplaçables qui redimensionnent les volets adjacents en temps réel, disposés en rangée ou empilés.
Expanding panel gallery
Une rangée de panneaux de couverture où le survol, le clic ou la touche fléchée sur l'un d'entre eux l'étend sur toute la largeur tandis que le reste se compresse en éclats.
Focus scroll list
Une file d'attente déroulante dont les lignes apparaissent en taille réelle et en opacité lorsqu'elles atteignent le centre de la vue, avec survol et sélection au clavier.

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)