Composants

Affichage des données

Tableaux, listes, statistiques et badges qui présentent clairement les données.

Créer à partir d’un guide Connectez votre agent Explorer les modèles de pages

36 sur 61

Chargement de l’index de recherche complet.

1917Avatar Lineup HoverAffichage des donnéesUne rangée de cercles d'avatar qui se chevauchent où le survol de l'un d'entre eux le soulève au-dessus de ses voisins et révèle une info-bulle de nom.

1918Avatar StackAffichage des donnéesUne rangée d'avatars circulaires superposés qui sépare et soulève celui sous le pointeur, révélant une info-bulle de nom au-dessus.

Chevron accordion list

1935Chevron accordion listAffichage des donnéesUne pile verticale de lignes de questions qui s'agrandissent chacune pour révéler une réponse, avec un chevron qui se retourne lorsque sa ligne est ouverte.

Count wheel badge

1946Count wheel badgeAffichage des donnéesUne roue numérique verticale qui roule par étapes arrondies jusqu'à un total, avec une étoile centrale qui se remplit à mesure que le décompte augmente.

FAQ Accordion

1956FAQ AccordionAffichage des donnéesUne liste verticale d'en-têtes de questions dans laquelle l'ouverture d'un panneau fait apparaître sa réponse et ferme le panneau ouvert avant lui.

Git status file tree

1966Git status file treeAffichage des donnéesUn navigateur de dossiers et de fichiers imbriqués dans lequel chaque fichier modifié porte une lettre d'état git colorée et les dossiers changent de forme d'icône lorsqu'ils sont ouverts.

Glide highlight explorer

1968Glide highlight explorerAffichage des donnéesUne arborescence de dossiers et de fichiers dans laquelle une seule barre de surbrillance lumineuse glisse d'une ligne à l'autre lors du survol ou de la mise au point au lieu que chaque ligne s'éclaire seule.

Guide steps accordion

1976Guide steps accordionAffichage des donnéesUn accordéon numéroté de marches de guidage dont les panneaux peuvent rester montés lorsqu'ils sont repliés, de sorte qu'une minuterie en cours d'exécution à l'intérieur de l'une continue de compter pendant une fermeture et une réouverture.

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.

Multi open panel stack

2001Multi open panel stackAffichage des donnéesUne pile de sections de panneau qui peuvent être développées indépendamment, avec une copie fermée que le navigateur find-in-page peut toujours atteindre.

Before/After Code Diff

2113Before/After Code DiffAffichage des donnéesDeux panneaux de code côte à côte, étiquetés avant et après, avec des lignes ajoutées et supprimées teintées et un effet de mise au point en survol.

Concentric goal rings

2128Concentric goal ringsAffichage des donnéesTrois anneaux de progression imbriqués qui se dessinent en séquence à côté d'un affichage de la valeur actuelle et cible de chaque objectif.

Conversation bubbles

2131Conversation bubblesAffichage des donnéesDes bulles de conversation affichent vos messages avec des styles ajustables, un regroupement et des réactions contrôlées.

Counting metric

2133Counting metricAffichage des donnéesUn grand nombre qui passe d'une valeur de départ à sa valeur cible avec un léger ressort la première fois qu'il est vu, formaté avec des séparateurs de milliers et des décimales fixes.

Counting readout

2134Counting readoutAffichage des donnéesUn chiffre métrique qui compte depuis une valeur de départ jusqu'à sa cible sur un ressort la première fois qu'il est vu, avec des décimales fixes et un remplissage de zéros en option.

Detail list item

2140Detail list itemAffichage des donnéesLigne de liste combinant une icône ou un avatar de début, un titre et une description, ainsi qu'une action de fin, pour les listes de notifications, les menus ou les lignes de paramètres.

Dotted World Map

2142Dotted World MapAffichage des donnéesUne carte du monde entièrement composée de petits points, avec quelques emplacements étiquetés qui clignotent vers l'extérieur comme un ping radar.

File attachment chip

2153File attachment chipAffichage des donnéesCarte compacte pour un fichier joint affichant une icône de type ou une vignette, son nom et sa taille, ainsi qu'un état de téléchargement, de traitement, d'erreur ou terminé.

Filterable record table

2154Filterable record tableAffichage des donnéesFiltrez les clients, triez les colonnes et contrôlez la recherche depuis votre application.

2172Initials fallback avatarAffichage des donnéesUn seul avatar qui montre une photo lorsqu'on lui en donne une, sinon centre deux lettres d'initiales sur une forme légèrement teintée.

Labeled hairline divider

2178Labeled hairline dividerAffichage des donnéesUne fine règle qui sépare deux sections, éventuellement brisée pour afficher une petite légende centrée entre deux lignes courtes.

Nested File Browser

2197Nested File BrowserAffichage des donnéesUne arborescence de fichiers accessible dans laquelle plusieurs dossiers de différentes profondeurs peuvent rester ouverts en même temps, reliés par des lignes de guidage de connexion.

Animated metric counter

2299Animated metric counterAffichage des donnéesUn grand chiffre nu qui jaillit d'une valeur de départ jusqu'à sa valeur cible au moment où il défile, dépassant légèrement avant de se stabiliser, avec des milliers de séparateurs et un suffixe facultatif.

Auto-Scroll Message List

2302Auto-Scroll Message ListAffichage des donnéesUn panneau de discussion déroulant qui reste épinglé sur le message le plus récent à moins que le lecteur ne fasse défiler vers le haut, auquel cas un bouton flottant jump-to-latest apparaît.

Billing Ledger Table

2304Billing Ledger TableAffichage des donnéesFiltrez les statuts des factures, triez les montants et recalculez le total visible.

Card Style Invoice Table

2310Card Style Invoice TableAffichage des donnéesUn tableau de factures présenté sous la forme d'une seule carte surélevée, avec ses première et dernière rangées arrondies pour correspondre à la forme de la carte.

Chat message thread

2315Chat message threadAffichage des donnéesUn fil de discussion alimenté par vos données garde visibles l’expéditeur et l’heure de chaque message.

Content Divider Rule

2326Content Divider RuleAffichage des donnéesUne fine règle structurelle qui sépare les sections empilées ou les courtes étiquettes en ligne sans attirer l'attention sur elle-même.

Counting number readout

2328Counting number readoutAffichage des donnéesUne grande statistique qui compte jusqu'à sa valeur sur une courbe de décélération, écrivant le texte directement à chaque image afin que la mise en page ne tremble jamais.

Drag reorder checklist

2341Drag reorder checklistAffichage des donnéesUne liste de contrôle dont les lignes peuvent être glissées dans un nouvel ordre, avec les éléments cochés dessinant une coche animée et un barré.

Endless Feed Loader

2347Endless Feed LoaderAffichage des donnéesUne liste de style actualité qui continue d’ajouter de nouveaux lots de titres tandis qu’une petite icône en bas défile.

Hairline section divider

2363Hairline section dividerAffichage des donnéesUne fine règle qui ferme un titre et une description, puis divise une rangée d'étiquettes simples en dessous en segments distincts.

Height Morph Accordion

2364Height Morph AccordionAffichage des donnéesUne liste de questions dont les panneaux de réponses grandissent et rétrécissent jusqu'à leur hauteur naturelle grâce à un ressort, poussant les rangées en dessous d'eux.

2369Initials avatar clusterAffichage des donnéesUne rangée de jetons d'initiales rondes qui résume un groupe de personnes, se terminant par un décompte de débordement en sourdine pour le reste.

Shortcut Key Chip

2374Shortcut Key ChipAffichage des donnéesPetits jetons de pilule pour les touches individuelles qui se regroupent en ligne pour épeler un raccourci clavier.

Credit balance ledger

2856Credit balance ledgerAffichage des donnéesConsultez les crédits du compte et appliquez un montant admissible à une facture en actualisant le solde.

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.

Animated metric counter
Un grand chiffre nu qui jaillit d'une valeur de départ jusqu'à sa valeur cible au moment où il défile, dépassant légèrement avant de se stabiliser, avec des milliers de séparateurs et un suffixe facultatif.
Auto-Scroll Message List
Un panneau de discussion déroulant qui reste épinglé sur le message le plus récent à moins que le lecteur ne fasse défiler vers le haut, auquel cas un bouton flottant jump-to-latest apparaît.
Avatar Lineup Hover
Une rangée de cercles d'avatar qui se chevauchent où le survol de l'un d'entre eux le soulève au-dessus de ses voisins et révèle une info-bulle de nom.

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)