Komponenten

Datendarstellung

Tabellen, Listen, Statistiken und Abzeichen zur klaren Datendarstellung.

36 von 58

Das vollständige Suchverzeichnis wird geladen.

1917Avatar Lineup HoverDatendarstellungEine Reihe überlappender Avatar-Kreise, in denen man ihn über seine Nachbarn hebt, wenn man mit der Maus darüber fährt, und einen Namens-Tooltip anzeigt.

1918Avatar StackDatendarstellungEine Reihe überlappender kreisförmiger Avatare, die den Avatar unter dem Zeiger trennt und anhebt und darüber einen Namens-Tooltip anzeigt.

Chevron accordion list

1935Chevron accordion listDatendarstellungEin vertikaler Stapel von Fragenreihen, die jeweils erweitert werden, um eine Antwort preiszugeben, mit einem Chevron, das sich umdreht, wenn die Reihe geöffnet ist.

Count wheel badge

1946Count wheel badgeDatendarstellungEin vertikales Zahlenrad, das durch abgerundete Schritte zu einer Gesamtsumme rollt, mit einem Stern in der Mitte, der sich mit steigender Zahl füllt.

FAQ Accordion

1956FAQ AccordionDatendarstellungEine vertikale Liste mit Fragenüberschriften, bei der beim Öffnen eines Bereichs die Antwort angezeigt wird und der davor geöffnete Bereich geschlossen wird.

Git status file tree

1966Git status file treeDatendarstellungEin verschachtelter Ordner- und Dateibrowser, in dem jede geänderte Datei einen farbigen Git-Statusbuchstaben trägt und Ordner beim Öffnen die Symbolform wechseln.

Glide highlight explorer

1968Glide highlight explorerDatendarstellungEin Ordner- und Dateibaum, in dem beim Schweben oder Fokussieren eine einzelne leuchtende Hervorhebungsleiste von Zeile zu Zeile gleitet, anstatt dass jede Zeile einzeln aufleuchtet.

Guide steps accordion

1976Guide steps accordionDatendarstellungEin nummeriertes Akkordeon aus Führungsstufen, deren Paneele im zusammengeklappten Zustand montiert bleiben können, so dass ein laufender Timer im Inneren der Stufen beim Schließen und Wiederöffnen weiterzählt.

Masked Reveal Accordion

1997Masked Reveal AccordionDatendarstellungEin Akkordeon, dessen Felder beim Öffnen von einer sich bewegenden Maske mit harten Kanten freigelegt werden, sodass Antworten Zeile für Zeile angezeigt werden, anstatt als Block zu verschwinden.

Multi open panel stack

2001Multi open panel stackDatendarstellungEin Stapel von Bedienfeldabschnitten, die unabhängig voneinander erweitert werden können, mit geschlossener Kopie, die über die Browser-Suche auf der Seite weiterhin erreicht werden kann.

Before/After Code Diff

2113Before/After Code DiffDatendarstellungZwei Codefelder nebeneinander, mit Vorher- und Nachherbeschriftung, mit eingefärbten hinzugefügten und entfernten Linien und einem Hover-Fokus-Effekt.

Concentric goal rings

2128Concentric goal ringsDatendarstellungDrei ineinander verschachtelte Fortschrittsringe, die sich nacheinander zeichnen, neben einer Anzeige des aktuellen und Zielwerts jedes Ziels.

Conversation bubbles

2131Conversation bubblesDatendarstellungEin Nachrichtenthread aus Blasen in der Größe ihres Textes, gruppiert nach Absender und mit einer überlappenden Reaktionspille.

Counting metric

2133Counting metricDatendarstellungEine große Zahl, die sich beim ersten Betrachten sanft von einem Startwert bis zu ihrem Ziel bewegt, formatiert mit Tausendertrennzeichen und festen Dezimalstellen.

Counting readout

2134Counting readoutDatendarstellungEine metrische Zahl, die von einem Startwert bis zu ihrem Ziel auf einer Feder zählt, wenn sie zum ersten Mal angezeigt wird, mit festen Dezimalstellen und optionaler Nullauffüllung.

Detail list item

2140Detail list itemDatendarstellungEine Listenzeile, die ein führendes Symbol oder einen Avatar, einen Titel und eine Beschreibung sowie eine nachgestellte Aktion für Benachrichtigungslisten, Menüs oder Einstellungszeilen kombiniert.

Dotted World Map

2142Dotted World MapDatendarstellungEine Weltkarte, die vollständig aus kleinen Punkten besteht, mit einigen beschrifteten Orten, die wie ein Radarping nach außen pulsieren.

File attachment chip

2153File attachment chipDatendarstellungEine kompakte Karte für eine angehängte Datei mit einem Typsymbol oder einer Miniaturansicht, ihrem Namen und ihrer Größe sowie einem Upload-, Verarbeitungs-, Fehler- oder Fertigstatus.

Filterable record table

2154Filterable record tableDatendarstellungEine Datensatztabelle mit einem Live-Textfilter, farbigen Statuspillen und einer rechtsbündigen Währungsspalte, die beim Sortieren lesbar bleibt.

2172Initials fallback avatarDatendarstellungEin einzelner Avatar, der ein Foto zeigt, wenn ihm eines gegeben wird, ansonsten zwei Initialen auf einer sanft getönten Form zentriert.

Labeled hairline divider

2178Labeled hairline dividerDatendarstellungEine dünne Linie, die zwei Abschnitte trennt und optional unterbrochen wird, um eine kleine zentrierte Beschriftung zwischen zwei kurzen Linien anzuzeigen.

Nested File Browser

2197Nested File BrowserDatendarstellungEin zugänglicher Dateibaum, in dem mehrere Ordner in unterschiedlichen Tiefen gleichzeitig geöffnet bleiben können, verbunden durch verbindende Hilfslinien.

Nested file tree

2198Nested file treeDatendarstellungEin Verzeichnisbaum, dessen Ordner mit animierter Höhe, gezeichneten Einrückungshilfen und jeweils einer ausgewählten Datei erweitert und reduziert werden.

Animated metric counter

2299Animated metric counterDatendarstellungEine große, bloße Zahl, die in dem Moment, in dem sie ins Bild gescrollt wird, von einem Startwert zu ihrem Ziel hochspringt und leicht über das Ziel hinausschießt, bevor sie sich stabilisiert, mit Tausendertrennzeichen und einem optionalen Suffix.

Auto-Scroll Message List

2302Auto-Scroll Message ListDatendarstellungEin scrollbares Chat-Panel, das an die neueste Nachricht angeheftet bleibt, es sei denn, der Leser scrollt nach oben, woraufhin eine schwebende Schaltfläche „Zur neuesten Nachricht springen“ erscheint.

Billing Ledger Table

2304Billing Ledger TableDatendarstellungEine Rechnungsbuchtabelle mit einer Überschrift darüber und einem Fußzeilenband, das die Betragsspalte summiert.

Card Style Invoice Table

2310Card Style Invoice TableDatendarstellungEine Rechnungstabelle, die als eine erhöhte Karte gerendert wird, wobei die erste und letzte Zeile abgerundet sind, um der Kartenform zu entsprechen.

Chat message thread

2315Chat message threadDatendarstellungEin kurzes Chat-Transkript aus abgerundeten Sprechblasen, eingehende Nachrichten links mit einem Avatar und Namen, rechts ausgehende Nachrichten in der Akzentfarbe.

Content Divider Rule

2326Content Divider RuleDatendarstellungEine dünne Strukturlinie, die gestapelte Abschnitte oder kurze Inline-Beschriftungen trennt, ohne die Aufmerksamkeit auf sich zu ziehen.

Counting number readout

2328Counting number readoutDatendarstellungEin großer Wert, der auf einer langsamer werdenden Kurve bis zu seinem Wert hochzählt und den Text direkt in jedem Frame schreibt, sodass das Layout nie ins Wanken gerät.

Drag reorder checklist

2341Drag reorder checklistDatendarstellungEine Checkliste, deren Zeilen in eine neue Reihenfolge gezogen werden können, wobei markierte Elemente ein animiertes Häkchen und eine Durchstreichung darstellen.

Endless Feed Loader

2347Endless Feed LoaderDatendarstellungEine Liste im Nachrichtenstil, die immer wieder neue Schlagzeilen hinzufügt, während unten ein kleiner Spinner ins Bild scrollt.

Hairline section divider

2363Hairline section dividerDatendarstellungEine schlanke Regel, die eine Überschrift und eine Beschreibung abschließt und dann eine Reihe einfacher Beschriftungen darunter in separate Segmente aufteilt.

Height Morph Accordion

2364Height Morph AccordionDatendarstellungEine Fragenliste, deren Antworttafeln mithilfe einer Feder auf ihre natürliche Höhe wachsen und schrumpfen und dabei die Reihen darunter verschieben.

2369Initials avatar clusterDatendarstellungEine Reihe runder Initialen-Token, die eine Gruppe von Personen zusammenfassen und in einer gedämpften Überlaufzählung für den Rest enden.

Shortcut Key Chip

2374Shortcut Key ChipDatendarstellungKleine Pillen-Tokens für einzelne Tasten, die inline gruppiert werden, um eine Tastenkombination zu bilden.

Gesamtes Verzeichnis öffnen

Schlagwörter

3d (16)accessible (4)accordion (9)action (3)actions (6)activity (5)add (7)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)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 (6)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 (3)columns (3)combobox (4)command palette (3)compact (8)comparison (8)composer (4)concentric (4)confetti (4)confirm (24)confirmation (7)console (5)contact (3)context menu (4)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)cycle (6)dark (15)dark mode (4)dashboard (9)dashed (5)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 (12)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 (8)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)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)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 (3)registration (3)relay (3)relief (6)remove (3)reorder (3)resize (4)restore (3)retro (4)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 (11)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)wrapper (3)zoom (4)