Komponenten zur Datenanzeige
Komponenten zum Anzeigen von Informationen: eine Datentabelle mit Sortierung, Auswahl und fixierten Spalten, Recharts-Diagramme, die dem Theme folgen, eine Baumansicht, Karten, Listeneinträge, Badges, Avatare, Tastenkappen und Zahlen, die zu ihrem neuen Wert rollen.
Auch dichte Fälle sind abgedeckt, mit fixierten Tabellenköpfen, angehefteten Spalten und Tastaturnavigation durch Diagrammpunkte.
- AvatarNutzerfotos mit Initialen als Fallback, Statusbadges und gestapelte Gruppen, die zu einer Zahl einklappen.
- BadgeStatuslabels mit farbigen Punkten, entfernbare Tags, die zugleiten, und Zähler, die zu ihrem neuen Wert rollen.
- CardEine Fläche zum Gruppieren von Inhalten, mit drei Varianten, randlosen Medien, konzentrischen Radien und Links über die ganze Karte.
- ChartRecharts-Diagramme mit Theme-Farben, einem Tooltip und einer Legende, die Labels aus einer Konfiguration lesen, und Tastaturnavigation mit sichtbarem Fokusring.
- Data tableEine Tabelle für echte Daten, mit Sortierung, Suche, Zeilenauswahl, fixierten Spalten, Sticky Header und Paginierung.
- ItemEine Zeile aus Medien, Text und Aktionen für Listen, Einstellungen und Auswahlen, mit gruppierter Fläche und einer Hover-Hervorhebung, die zwischen den Zeilen gleitet.
- KbdTastenkappen für Tastenkürzel, die auf jeder Plattform die richtigen Symbole zeigen, korrekt vorgelesen werden und sich wie echte Tasten eindrücken.
- Number flowAnimierte Zahlen, bei denen sich nur die geänderten Ziffern drehen, mit beliebigem Intl-Format und Locale.
- TableEine responsive Tabelle mit Flächenstil, umbrechenden oder kompakten Zellen, fixierten Kopfzeilen, angehefteten Spalten und Scroll-Hinweisen.
- TreeVerschachtelte, aufklappbare Zeilen für Dateien und Hierarchien, mit Einrückungslinien, Verbindungslinien, kaskadierenden Checkboxen, Typeahead und voller Tastaturunterstützung.
In Pro-Blöcken verbaut
Blöcke für KI-Produkte, die aus diesen Komponenten gebaut sind.
- Chat SidebarDie Seitenleiste einer Chat-App mit angehefteten Chats, Projekten und Verlauf. Deckt Umbenennen vor Ort, Löschen mit Rückgängig und noch antwortende Chats ab.
- Diff ReviewEine Prüfung der Dateiänderungen eines Agenten, bevor sie landen. Deckt Annehmen oder Ablehnen pro Änderung, Kommentare zurück an den Agenten und noch streamende Änderungen ab.
- ThinkingDie Denkansicht eines KI-Chats. Ein Live-Label folgt jedem Schritt, Suchen und Quellen klappen zu einer Spur zusammen und Zitate stehen neben der Antwort.
- ProfileDer Bereich Profil in den Einstellungen eines KI-Produkts. Deckt Fotozuschnitt, einen beim Tippen geprüften Benutzernamen und per Code bestätigte E-Mail-Änderungen ab.
- SettingsDie Einstellungsseite eines KI-Produkts. Deckt eine Speicherleiste, die nur bei Änderungen erscheint, Feldfehler und Ladezustände ab.
- TeamDie Teamseite in den Workspace-Einstellungen eines KI-Produkts. Deckt ausgehende Plätze, offene Einladungen und Eigentumsübertragung mit getippter Bestätigung ab.