UI-Primitives — Ein Feldführer
Wenn Sie schon einmal auf eine moderne App geschaut und gedacht haben „wie nennt man dieses Ding eigentlich?” — dann ist diese Seite für Sie.
Jede Benutzeroberfläche, die Sie verwenden, ist aus einer erstaunlich kleinen Menge wiederverwendbarer Bausteine aufgebaut, die als UI-Primitives bezeichnet werden. Sie haben Namen. Manchmal seltsame Namen. Aber sobald man die Metapher einmal verstanden hat, sieht man sie überall.
En Parlant~ verwendet Mantine, eine React-Komponentenbibliothek, die all diese Bausteine von Haus aus mitbringt. Hier ist Ihr Feldführer.
Die, die wie Möbelstücke klingen
Abschnitt betitelt „Die, die wie Möbelstücke klingen“Ein Toast ist eine kleine Benachrichtigung, die vom Bildschirmrand hereinspringt, ein paar Sekunden verweilt und dann wieder verschwindet. Wie eine Scheibe Brot, die aus dem Toaster springt — nur dass die Schwerkraft umgekehrt wirkt und sie irgendwann wieder hineingleitet.
In En Parlant~ erscheinen Toasts in der unteren rechten Ecke (über Mantine’s @mantine/notifications) für Dinge wie:
- „Datenbank erfolgreich geladen” — pop
- „TTS-Stimme nicht konfiguriert” — pop
- „Verbindung zu Lichess fehlgeschlagen” — pop, und man ist ein wenig traurig
Man hat nie darum gebeten. Sie tauchen einfach auf, überbringen ihre Nachricht und verschwinden wieder. Sie sind die Brieftauben der UI-Welt.
Eine Card ist ein rechteckiger Container mit Rahmen oder Schatten, der zusammengehörige Inhalte gruppiert. Stellen Sie sich eine Karteikarte auf einem Schreibtisch vor — sie hat eine klare Kante, enthält eine Sache, und man kann sie hochnehmen und verschieben.
In En Parlant~ finden Sie Cards für:
- Partievorschauen im Datenbankbrowser (
GameCard) — Spielernamen, Ergebnis, Datum - Stellungseditor (
EditingCard) — die Karte, die man umdreht, wenn man eine benutzerdefinierte Stellung aufbaut - Datenbankeinträge auf der Datenbankseite — jede Datenbank bekommt ihre eigene Card in einem Raster
Cards haben einen nahen Verwandten namens Paper, der im Grunde eine Card ist, die auf die Kunsthochschule gegangen ist. Gleiche Idee — ein Container mit Rahmen oder Schatten — aber mit weniger semantischer Bedeutung. Paper sagt einfach: „Ich bin eine Oberfläche.” Es erscheint als Hintergrund hinter Analysepanels und Datenbankanzeigen.
Drawer / Sheet
Abschnitt betitelt „Drawer / Sheet“Wird derzeit nicht in En Parlant~ verwendet, aber gut zu wissen: Ein Drawer ist ein Panel, das vom Bildschirmrand hereinschiebt, wie eine Schreibtischschublade. (Das war’s. Das ist die ganze Metapher. UI-Designer waren an diesem Tag sehr wörtlich unterwegs.)
Die, die einem den Weg versperren
Abschnitt betitelt „Die, die einem den Weg versperren“Ein Modal ist ein Popup-Dialog, der Ihre Aufmerksamkeit verlangt. Es graut den Hintergrund aus und zwingt Sie, sich damit zu befassen, bevor Sie irgendetwas anderes tun können. Es ist das Kleinkind unter den UI-Mustern — „SCHAU MICH JETZT SOFORT AN.”
En Parlant~ verwendet Modals für Momente, die wirklich Ihre Aufmerksamkeit erfordern:
- „Sind Sie sicher, dass Sie alle Daten löschen möchten?” (
ClearDataModal) — mit Checkboxen, damit Sie wählen können, welche Daten ausgelöscht werden sollen - „Ein Update ist verfügbar” (
UpdateModal) — mit Fortschrittsbalken während des Downloads - „Eine Partie importieren” (
ImportModal) — PGN einfügen, FEN eingeben oder einen Link ablegen - „Neues Repertoire erstellen” (
CreateRepertoireModal) — benennen, konfigurieren, los - „Über En Parlant~” (
About) — Versionsinformationen, Credits, der übliche Blick hinter die Kulissen
Modals sagen: „Das ist ein Gespräch. Wir führen es jetzt.”
Ein Dialog ist der höfliche Cousin des Modals. In Mantine sind sie im Wesentlichen die gleiche Komponente, aber in der UI-Design-Theorie ist ein Dialog kleiner und fokussierter — eine einzelne Frage und Antwort. „Änderungen speichern?” Ja / Nein. Fertig.
En Parlant~ verwendet ConfirmModal für diese schnellen Ja-oder-Nein-Momente, etwa wenn bestätigt werden soll, dass nicht gespeicherte Änderungen verworfen werden.
Die, die kommen und gehen
Abschnitt betitelt „Die, die kommen und gehen“Tooltip
Abschnitt betitelt „Tooltip“Ein Tooltip ist ein winziges Label, das erscheint, wenn man mit der Maus über etwas fährt. Es ist der hilfsbereite Fremde, der einem die Antwort zuflüstert, wenn man verwirrt dreinschaut.
Tooltips sind in En Parlant~ überall. Fahren Sie mit der Maus über nahezu jeden Icon-Button und Sie bekommen einen:
- Maus über den ↻-Button → „Neu laden”
- Maus über einen abgeschnittenen Dateipfad → der vollständige Pfad erscheint
- Maus über ein Annotationssymbol → was dieses Symbol bedeutet
- Maus über einen Zug im Analysepanel → eine Miniatur-Brettvorschau erscheint
Tooltips sind das Original des „keine Anleitung nötig”.
Popover
Abschnitt betitelt „Popover“Ein Popover ist ein Tooltip, der promoviert hat. Statt nur ein Textlabel anzuzeigen, kann es alles enthalten — Buttons, Bilder, sogar ein kleines Schachbrett.
In En Parlant~ rendert ein Popover beim Überfahren eines Zuges in der Engine-Analyse eine Vorschau des Bretts in dieser Stellung. Es ist ein Tooltip, aber mit visuellen Hilfsmitteln.
Ein Menu ist eine Liste von Aktionen, die erscheint, wenn man auf etwas klickt (oder rechtsklickt). Das kennen Sie seit den Anfängen der Informatik — Datei, Bearbeiten, Ansicht. Sie kennen das Prinzip.
En Parlant~ hat zwei Varianten:
- Menüleisten-Menüs — die klassische Datei / Bearbeiten / Ansicht-Menüleiste, gebaut mit Mantine’s
Menu-Komponente. Tastenkürzel auf der rechten Seite. Ein Designmuster so alt, dass es schon in Rente ist. - Kontextmenüs — Rechtsklick auf einen Zug im Partiebaum und Sie erhalten Optionen wie Variante befördern, Ab hier löschen und Linie kopieren. Diese verwenden die
mantine-contextmenu-Bibliothek für extra Feinschliff.
Menüs haben ihr eigenes Unter-Vokabular: Menu.Target (das, worauf man klickt), Menu.Dropdown (die Liste, die erscheint), Menu.Item (jede Option) und Menu.Divider (die dünne Linie, die sagt „jetzt kommt ein anderer Abschnitt”).
Die, die den Raum organisieren
Abschnitt betitelt „Die, die den Raum organisieren“Stack & Group
Abschnitt betitelt „Stack & Group“Diese sind das Traumpaar des Layouts.
- Stack ordnet Dinge vertikal an — eins auf dem anderen. Wie Bücher stapeln.
- Group ordnet Dinge horizontal an — nebeneinander. Wie Schachfiguren auf einem Regal aufreihen.
Sie kommen in buchstäblich über 100 Dateien jeweils vor. Sie sind die häufigsten Komponenten in der gesamten App. Jedes Mal, wenn Dinge ordentlich angeordnet sind, ist ein Stack oder eine Group dafür verantwortlich.
Flex ist das Schweizer Taschenmesser von Stack und Group. Wenn Dinge umbrechen, sich strecken, schrumpfen, umkehren oder anderweitig aus der Reihe tanzen müssen, springt Flex mit voller Kontrolle über das CSS-Flexbox-Modell ein.
Wird in der Zugliste des Analysepanels verwendet — diese Zugsequenzen, die wie Text umbrechen und fließen? Das ist Flex, das die Schwerstarbeit leistet.
Eine Box ist ein <div> mit Zylinderhut. Sie tut von sich aus nichts — sie ist einfach ein generischer Container. Aber sie akzeptiert Mantine’s Styling-Props, was sie zu einem unglaublich praktischen Wrapper macht für „Ich brauche ein Ding um dieses andere Ding herum.”
Box erscheint in über 150 Dateien. Sie ist das Panzertape der Komponentenbibliothek.
Tut genau das, was der Name sagt. Platziert etwas in der Mitte. Horizontal. Vertikal. Beides. Fertig.
Taucht in Leerzuständen auf — wenn keine Konten verknüpft sind, keine Datenbanken geladen, noch keine Daten vorhanden. Ein großes Icon, eine Nachricht, und Center sorgt dafür, dass alles perfekt positioniert ist. Niemand mag einen dezentrierten Leerzustand.
SimpleGrid
Abschnitt betitelt „SimpleGrid“Ein Grid, das einfach ist. Man sagt ihm, wie viele Spalten, und es ordnet die Cards in einem sauberen Raster an, das sich beim Ändern der Fenstergröße neu anordnet. Die Datenbankseite verwendet es, um Datenbank-Cards in einem responsiven Raster anzuordnen.
ScrollArea
Abschnitt betitelt „ScrollArea“Ein Container, der scrollt, wenn sein Inhalt überläuft. Man würde denken, das gäbe es gratis — und das stimmt gewissermaßen, mit CSS overflow: auto — aber ScrollArea fügt gestylte Scrollbalken, Schwung-Scrolling und Überlauf-Erkennung hinzu. Es umhüllt das Partiebaum-Panel, Analyselinien und überall dort, wo Inhalt höher als sein Container werden könnte.
AppShell
Abschnitt betitelt „AppShell“Die AppShell ist das Masterlayout — das Skelett der gesamten Anwendung. Sie definiert, wo der Header hinkommt, wo die Seitenleiste hinkommt und wo der Hauptinhalt lebt. Alles andere wird darin verschachtelt.
Man verwendet sie nur einmal. Sie ist das Fundament des Hauses.
Ein Portal ist ein magisches Wurmloch. Es rendert eine Komponente außerhalb ihrer normalen Position im DOM-Baum und platziert sie woanders — normalerweise am Wurzelknoten des Dokuments. So vermeiden Popovers und Brettvorschauen, dass sie von übergeordneten Containern mit overflow: hidden abgeschnitten werden.
Man sieht ein Portal nie. Man sieht nur seine Auswirkungen. Es ist die Bühnentechnik unter den UI-Komponenten.
Die, mit denen man interagiert
Abschnitt betitelt „Die, mit denen man interagiert“Ein klickbares Rechteck mit Text. Das kennen Sie. In Mantine gibt es Buttons in verschiedenen Varianten:
- filled — Vollfarbe, hohe Betonung. „Klick mich, ich bin wichtig.”
- outline — nur ein Rahmen. „Ich bin eine Option, aber kein Druck.”
- subtle — kaum sichtbar. „Ich bin da, falls du mich brauchst.”
- default — ein neutraler Mittelweg.
En Parlant~ verwendet all diese in über 150 Dateien. Das häufigste Muster: eine Group von Buttons am unteren Rand eines Modals — „Abbrechen” (subtle) und „Bestätigen” (filled). Klassiker.
ActionIcon
Abschnitt betitelt „ActionIcon“Ein ActionIcon ist ein Button, der sein Textlabel aufgegeben und sich vollständig dem Icon-Lebensstil verschrieben hat. Es ist kompakt, quadratisch und verlässt sich auf sein Icon (plus einen Tooltip), um seinen Zweck zu kommunizieren.
Toolbar-Buttons, Panel-Steuerungen, Schließen-Buttons — alles ActionIcons. Sie sind die platzsparendste Art, eine Aktion anzubieten.
Ein Switch ist ein Umschalter, der wie ein kleiner Lichtschalter aussieht. Nach links kippen, nach rechts kippen. An. Aus.
In den Einstellungen steuern Switches binäre Entscheidungen:
- Sound an/aus
- TTS-Erzählung aktiviert/deaktiviert
- Dunkler Modus / Heller Modus
Die physische Metapher ist so gut, dass sogar Ihre Großeltern sie verstehen.
Ein Slider ist eine Schiene mit einem Griff, den man hin und her zieht, um einen Wert auszuwählen. Wie ein Lautstärkeregler, der plattgedrückt wurde.
En Parlant~ verwendet Slider für:
- Schriftgröße — ziehen zum Anpassen
- Lautstärke — ziehen zum Anpassen (natürlich)
- CPU-Kerne — wie viele Kerne soll die Engine verwenden?
- Hash-Speicher — wie viel RAM für die Hash-Tabelle der Engine?
Es gibt auch einen RangeSlider mit zwei Griffen zur Auswahl eines Bereichs — verwendet zum Filtern von Partien nach Elo-Wertung (z. B. 2000–2200) und Zeiträumen.
SegmentedControl
Abschnitt betitelt „SegmentedControl“Eine Reihe von Buttons, von denen genau einer gleichzeitig ausgewählt ist. Es ist wie ein Autoradio-Senderspeicher — drückt man einen, springen die anderen heraus.
Wird verwendet zum Umschalten zwischen:
- Centipawn-Bewertung vs. Gewinn/Remis/Verlust-Prozentsätzen im Analysediagramm
- Verschiedenen Zugnotationsformaten
- Anzahl der Engine-Linien
Checkbox & Select
Abschnitt betitelt „Checkbox & Select“Die kennen Sie. Checkboxen für „wähle alles Zutreffende aus”, Select-Dropdowns für „wähle eins aus dieser Liste.” Sie tauchen in Einstellungen, Filtern und Formularen in der gesamten App auf. Das Modal zum Daten löschen hat ein besonders befriedigendes Set von Checkboxen, mit denen man seine eigene Zerstörung wählen kann.
Autocomplete
Abschnitt betitelt „Autocomplete“Ein Texteingabefeld, das während des Tippens Vervollständigungen vorschlägt. Die Spielersuche im Datenbankbrowser verwendet dies — beginnen Sie einen Namen zu tippen und passende Spieler erscheinen darunter.
FileInput & DateInput
Abschnitt betitelt „FileInput & DateInput“FileInput öffnet beim Klicken einen Dateiauswahldialog — verwendet im Import-Modal zum Laden von PGN-Dateien. DateInput öffnet einen Kalender zur Datumsauswahl — verwendet zum Filtern von Partien nach Datum. Es gibt auch MonthPickerInput und YearPickerInput für weniger Präzision (Lichess-Datenbankfilterung nach Monat, Masters-Datenbankfilterung nach Jahr).
Die, die Fortschritt anzeigen
Abschnitt betitelt „Die, die Fortschritt anzeigen“Progress Bar
Abschnitt betitelt „Progress Bar“Ein horizontaler Balken, der sich von links nach rechts füllt, um zu zeigen, wie weit etwas fortgeschritten ist. Wird bei App-Updates (Download-Fortschritt) und — kreativer — zur Anzeige von Gewinn/Remis/Verlust-Wahrscheinlichkeiten im Analysepanel verwendet. Drei farbige Abschnitte (weiß, grau, schwarz) füllen den Balken proportional. Es ist ein winziges Balkendiagramm, das sich als Fortschrittsanzeige tarnt.
Ein Loader ist eine Drehanimation, die sagt: „Ich arbeite daran, gib mir eine Sekunde.” Erscheint, während Datenbanken geladen werden, Spielerstatistiken abgerufen werden oder irgendetwas Asynchrones passiert.
Skeleton
Abschnitt betitelt „Skeleton“Ein Skeleton ist ein grauer Platzhalter, der die Form von Inhalten nachahmt, die noch nicht geladen sind. Statt eines leeren Bildschirms oder eines Spinners sehen Sie Geisterumrisse dessen, wo Cards und Text sein werden. Es ist der Bauplan eines Ladezustands — „die richtigen Möbel sind unterwegs.”
Die Datenbankseite verwendet Skeletons, während das Card-Raster lädt. Wesentlich eleganter als ein Spinner allein.
LoadingOverlay
Abschnitt betitelt „LoadingOverlay“Eine halbtransparente Decke, die über eine Komponente geworfen wird, während sie lädt. Das Analysediagramm verwendet dies — man kann das Diagramm hinter dem Overlay noch sehen, aber es ist abgedunkelt und ein Spinner dreht sich obendrauf. „Ich bin noch da, aktualisiere nur gerade.”
Die, die Dinge beschriften
Abschnitt betitelt „Die, die Dinge beschriften“Ein Badge ist ein kleines farbiges Label — wie ein Namensschild auf einer Konferenz. In En Parlant~ verwendet die SpeedBadge-Komponente Badges zur Anzeige von Zeitkontrollen mit Farbkodierung:
- 🩷 Pink — UltraBullet
- 🔴 Rot — Bullet
- 🟠 Orange — Blitz
- 🟢 Grün — Rapid
- 🔵 Blau — Classical
- 🟣 Lila — Correspondence
Jeder Badge ist winzig, farbenfroh und kommuniziert das Spieltempo auf einen Blick.
Kurz für Keyboard. Zeigt eine Tastaturtaste mit dem charakteristischen erhabenen Tasten-Styling an. Wird in den Tastenkürzel-Einstellungen verwendet, um Dinge wie Ctrl + Z darzustellen. Es ist eine CSS-Nachbildung einer echten physischen Taste auf Ihrer Tastatur. Wunderbar skeuomorph.
Die, die trennen und zusammenfalten
Abschnitt betitelt „Die, die trennen und zusammenfalten“Divider
Abschnitt betitelt „Divider“Eine horizontale Linie, die Abschnitte trennt. Das ist alles. Es ist eine Linie. Aber eine gestylte Linie, und sie kann optional ein Textlabel in der Mitte haben — wie der „— ODER —“-Trenner im Import-Modal, der „PGN einfügen” von „FEN eingeben” trennt.
Über dreißig Dateien verwenden Divider. Wie sich herausstellt, muss man vieles voneinander trennen.
Collapse
Abschnitt betitelt „Collapse“Ein Collapse ist ein Bereich, der sich mit einer sanften Animation ein- und ausklappt. Klicken zum Anzeigen, Klicken zum Verbergen. Die Datenbankfilter-Optionen verwenden dies — man braucht nicht immer alle Filter zu sehen, also verstecken sie sich hinter einem Collapse, bis man sie haben möchte.
Die Ausgefallenen
Abschnitt betitelt „Die Ausgefallenen“RichTextEditor
Abschnitt betitelt „RichTextEditor“Ein vollwertiger WYSIWYG-Texteditor (What-You-See-Is-What-You-Get), gebaut auf TipTap. Fett, kursiv, Listen, alles dabei. Wird zum Verfassen von Partieannotationen verwendet — jene Kommentarnotizen, die man hinzufügt, um zu erklären, warum ein Zug brillant oder schrecklich war.
Dies ist das eine Primitive, das eher ein zusammengesetzter Organismus als eine einzelne Zelle ist. Unter der Haube ist es TipTap + ProseMirror + Mantine-Styling. Aber aus Nutzersicht ist es einfach ein Textfeld, in dem Formatierung funktioniert.
AreaChart
Abschnitt betitelt „AreaChart“Aus @mantine/charts (das Recharts umhüllt) betreibt das AreaChart den Bewertungsgraphen — diese Wellenform, die am unteren Rand des Analysepanels entlangläuft. Weiße Fläche über der Mittellinie bedeutet, Weiß steht besser; schwarze darunter bedeutet, Schwarz steht besser.
Man kann auf jeden Punkt im Diagramm klicken, um zu diesem Zug zu springen. Interaktive Datenvisualisierung trifft Schachanalyse. Es hat sogar benutzerdefinierte Tooltips und Referenzlinien, die die Partiephasen markieren (Eröffnung → Mittelspiel → Endspiel).
DataTable
Abschnitt betitelt „DataTable“Über die mantine-datatable-Bibliothek — eine vollausgestattete Datentabelle mit Sortierung, Paginierung, Zeilenauswahl und Filterung. Betreibt die Partieliste, Spielerliste und Turnierliste des Datenbankbrowsers. Es ist eine Tabellenkalkulation, die weiß, dass sie in einer Schach-App ist.
Die Unsichtbaren
Abschnitt betitelt „Die Unsichtbaren“Manche Primitives rendern selbst nichts Sichtbares, sorgen aber dafür, dass alles andere funktioniert:
- MantineProvider — umhüllt die gesamte App und stellt das Theme bereit (Farben, Dark Mode, Komponentenstandards)
- Portal — teleportiert gerenderte Inhalte an einen anderen Teil des DOM
- useHotkeys — ein Hook (keine Komponente), der Tastenkürzel verdrahtet
- useForm — verwaltet Formularstatus, Validierung und Fehlerbehandlung
- useDebouncedValue — wartet, bis Sie aufhören zu tippen, bevor eine Suche ausgelöst wird. Der höfliche Hook.
Das vollständige Inventar
Abschnitt betitelt „Das vollständige Inventar“Zur Referenz hier jede Primitive-Familie, die in En Parlant~ verwendet wird, gruppiert nach ihrer Funktion:
| Kategorie | Primitives |
|---|---|
| Layout | AppShell, Box, Center, Flex, Group, Stack, SimpleGrid, ScrollArea, Portal |
| Oberflächen | Card, Paper |
| Overlays | Modal, Tooltip, Popover, Menu, ContextMenu, LoadingOverlay |
| Benachrichtigungen | Toast (via @mantine/notifications) |
| Buttons | Button, ActionIcon, CloseButton, ThemeIcon |
| Eingaben | TextInput, Textarea, NumberInput, Select, Autocomplete, Checkbox, Switch, Slider, RangeSlider, SegmentedControl, FileInput, DateInput, MonthPickerInput, YearPickerInput |
| Datenanzeige | Table, DataTable, Badge, Code, Kbd, Rating, Image |
| Typografie | Text, Title, Anchor |
| Fortschritt | Progress, Loader, Skeleton |
| Struktur | Divider, Collapse |
| Rich Content | RichTextEditor (TipTap), AreaChart (Recharts) |
| Theming | MantineProvider, createTheme, useColorScheme |
| Hooks | useForm, useHotkeys, useToggle, useDebouncedValue, useClickOutside, useElementSize |
Alles bezogen aus Mantine v8 und seinen Ökosystem-Paketen: @mantine/core, @mantine/notifications, @mantine/dates, @mantine/charts, @mantine/form, @mantine/tiptap, mantine-datatable und mantine-contextmenu.
Jetzt wissen Sie Bescheid
Abschnitt betitelt „Jetzt wissen Sie Bescheid“Wenn Sie das nächste Mal eine kleine Nachricht aus der Bildschirmecke heraufgleiten sehen — das ist ein Toast. Das Rechteck um eine Partievorschau — das ist eine Card. Die grauen Umrisse, die vor dem Laden der Inhalte flackern — das sind Skeletons.
Sobald man die Namen kennt, sieht man sie überall. In jeder App. Auf jeder Website. Die gleichen paar Dutzend Primitives, auf tausend verschiedene Arten neu angeordnet.
Es ist Lego, bis ganz nach unten.