Eine Referenz für Mantine 9 mit nativer Teilnehmertabelle und Terminierungs-Drawer. Untersuche die tatsächlichen Themenskalen, verbinde useForm mit TextInput, Select, Checkbox und DatePickerInput und teste die Validierung, bevor du einen lokalen Eintrag hinzufügst.
Öffnen Sie die Sidebar, lösen Sie eine Feldvalidierung aus, wählen Sie eine Studie und ein Datum aus, fügen Sie lokal eine teilnehmende Person hinzu und widerrufen Sie eine Beispiel-Einwilligung.
Nativer Kern, Formular- und Datums-Pakete von Mantine 9.6.3 mit React 19. Helles Erscheinungsbild erzwungen und Cyan-Theme; nur lokaler Zustand. · Implementierungsreferenz
02
Mantine-Designsystem – Designreferenz
Ausgewählte DEFAULT_THEME-Werte, überprüft anhand von @mantine/core 9.6.3. Die numerischen Pixel-Entsprechungen setzen einen 16-px-Root-Wert und theme.scale=1 voraus; skalierte Tokens werden über --mantine-scale aufgelöst. Die primäre Cyan-Farbe, Farbton 8, und der Radius md sind explizite Anwendungsüberschreibungen.
Mantine-Designsystem: Theme- und Paketgrenzen von Mantine
Ein Provider, drei Funktionspakete
Das Beispiel verwendet core für die Oberfläche, form für Validierung und Bindings sowie dates für die Kalendereingabe. MantineProvider erhält Überschreibungen über createTheme. Core CSS und dates CSS werden beide importiert; das Laden allein der React-Komponente reicht nicht aus, um den formatierten Kalender nachzubilden.
Im Theme werden Cyan mit primaryShade 8 und defaultRadius md ausgewählt. Button.extend legt kleine Buttons als Anwendungsstandard fest, während TextInput.extend Steuerelemente mittlerer Größe auswählt. Dies sind bewusst gewählte, im Quellcode gezeigte Einstellungen – keine Behauptung, dass jedes Mantine-Produkt sie verwenden sollte.
Mantine-Designsystem: Palettenindizes und aufgelöste Farbrollen verwenden
Eine geordnete Palette ist keine Sammlung unzusammenhängender Farbfelder
Mantine-Farben sind als Arrays mit indizierten Farbtönen angeordnet. Dieses Beispiel verwendet cyan.0 für ein zurückhaltendes Zusammenfassungspanel, cyan.9 für Akzenttext und den konfigurierten primären Farbton für gefüllte Aktionen. Die Referenz führt die gesamte Cyan-Abstufung dieses Themes auf.
Das bestätigte Badge in der Tabelle verwendet eine helle Cyan-Variante; für „Widerrufen“ wird Orange verwendet. Beide Statusangaben bleiben zusätzlich als Text sichtbar. Durch einen Widerruf ändert sich der Einwilligungsstatus, die vorherige Sitzung bleibt jedoch sichtbar. So wird verhindert, dass eine Farbänderung den Verlauf unbemerkt löscht.
Die color-Prop einer Komponente kann auf eine benannte Palette verweisen; ein separat gestalteter Hintergrund mit einem rohen Hexadezimalwert würde einige Variantenentscheidungen umgehen. Wenn Sie einfaches CSS verwenden, bevorzugen Sie für wiederkehrende Theme-Entscheidungen die generierten Variablen. Die Zuordnung zwischen CSS und Variablen im Beispiel erläutert, welche Werte weiterhin mit der Skalierung und der Primärfarbe verknüpft sind.
Mantine-Designsystem: Exportierte Schriftart und Überschriften-Skalierung anwenden
Die Hierarchie nachbilden
Die Tabelle verwendet sm für Namen und Studienbezeichnungen sowie xs für Kennungen und Datumsangaben. Title order={1} verwendet die h1-Skalierung; der Drawer hat eine semantische h2-Überschrift, die mit size="h3" dargestellt wird, damit sie visuell kompakter wirkt. Diese Entscheidungen sind unabhängig von den Beschriftungen und Hilfetexten, die von Eingabekomponenten bereitgestellt werden.
Der Schriftarten-Stack der Plattform von Mantine erfordert keinen Download von Schriftarten aus dem Internet. Skalierte Schriftwerte enthalten --mantine-scale; die Pixelwerte der Referenz setzen einen Skalierungsfaktor von 1 voraus. Behandle diese Pixel-Entsprechungen nicht als unveränderlich, wenn die Anwendung einen anderen Skalierungsfaktor verwendet.
Mantine-Designsystem: useForm an echte Eingabekomponenten binden
Die Validierung gehört zum Formularmodell
initialValues enthält einen Namen, eine Studie, ein Datumsfeld mit null als möglichem Wert und eine boolesche Einwilligungsangabe. validate gibt für die Felder Name, Datum und Einwilligung eine Fehlermeldung oder null zurück. form.onSubmit führt diese Validierung aus, bevor der lokale Datensatz angehängt wird. Eine separate Sammlung manuell dargestellter Fehlermeldungen ist nicht erforderlich.
TextInput und DatePickerInput erhalten getInputProps für ihren Feldpfad. Checkbox gibt zusätzlich type:"checkbox" an, damit der Wert korrekt an das Kontrollkästchen gebunden wird. Select verwendet eine feste Studienliste und allowDeselect={false}; der Ablauf akzeptiert keine leere Studienauswahl.
Mantine-Designsystem: Dichte und Überlauf von Steuerelementen an der Komponentengrenze steuern
Die Tabelle in einem eigenen Scrollbereich halten
Table.ScrollContainer verwendet minWidth={580} und erhält so auf schmalen Bildschirmen vier gut lesbare Spalten. Das Dokument bleibt innerhalb des Viewports; bei Bedarf wird nur der Datenbereich horizontal scrollbar. horizontalSpacing="lg" und verticalSpacing="md" verwenden den Abstand des Themes statt individueller Zellinnenabstände.
Die drei Zusammenfassungskarten verwenden SimpleGrid mit einer Spalte als Basis und drei Spalten ab sm. Auch der Seitenabstand wechselt von md zu xl. Dies sind responsive Stilobjekte, während die Mindestbreite der Tabelle eine explizite Inhaltsentscheidung ist.
Mantine-Designsystem: Ungültige Anmeldung und Widerruf der Einwilligung unterscheiden
Das Beispiel umfasst zwei verschiedene Änderungen
Das Planungsformular kann erst dann einen Datensatz hinzufügen, wenn Name, Sitzungstermin und die beispielhafte Einwilligung die Validierung bestehen. Nach erfolgreichem Hinzufügen im Arbeitsspeicher wird der Drawer geschlossen, ein Datensatz angehängt und die Zusammenfassungszahlen werden aktualisiert. Der Hinweis besagt, dass kein Forschungsdatensatz gespeichert wurde.
Mit Widerruf wird nur der Status des ausgewählten Datensatzes geändert und die Aktion für diesen Datensatz deaktiviert. Das Datum bleibt als Verlauf sichtbar, während widerrufene Datensätze nicht in der Anzahl der geplanten Sitzungen berücksichtigt werden. Dies ist eine ausdrücklich angegebene Richtlinie für die Vorschau, keine echte Regel zur Aufbewahrung von Forschungsdaten.
Ungültiges Formular: Fehler direkt an den Eingabefeldern anzeigen und Drawer geöffnet lassen.
Akzeptierter lokaler Eintrag: Datensatz einmalig anhängen und den nächsten Entwurf zurücksetzen.
Widerrufene beispielhafte Einwilligung: Datensatz beibehalten und einen weiteren Widerruf deaktivieren.
Mantine-Designsystem: Drawer und Eingabesemantik zusammenwirken lassen
Fokus und Beschriftungen
Der Drawer erhält einen Titel und verwendet seine native Fokusverwaltung. Für das Namensfeld ist data-autofocus gesetzt. Jedes Formularelement hat eine sichtbare Beschriftung; Validierungsmeldungen stammen aus der gebundenen error-Prop. Der zugängliche Name der Widerruf-Schaltfläche enthält den Namen der teilnehmenden Person, sodass mehrere identisch aussehende Beschriftungen unterscheidbar bleiben.
Wird der Drawer geschlossen, wird der Entwurf in diesem Beispiel verworfen: Beim Öffnen von „Teilnehmende Person hinzufügen“ wird das Formular zurückgesetzt. Der Kalender ist ein natives Mantine-Popup im Drawer. Teste die Tastaturbedienung gemeinsam mit der umgebenden Fokusfalle, statt anzunehmen, dass sich zwei einzeln barrierefreie Komponenten immer problemlos zusammenfügen.
Mantine-Designsystem: Versionskompatible Pakete und beide Stylesheets installieren
Die vollständige Einrichtung ist enthalten
Führe die folgenden Terminalbefehle aus, ersetze App.jsx durch die vollständige Komposition und binde sie mit der bereitgestellten main.jsx ein. Die vier Paketversionen von Mantine sind bewusst aufeinander abgestimmt. App.jsx enthält Provider und Theme, daher ist keine versteckte Provider-Datei erforderlich.
Übernimm kein Datumsbeispiel aus einer anderen Hauptversion, ohne den Typ des Werts zu prüfen. Achte darauf, dass das Anfangsdatum und die Validierung des Formulars mit der tatsächlich verwendeten DatePickerInput-Version von API übereinstimmen. Dieses Beispiel wurde mit den angegebenen Paketversionen erstellt und nicht aus einem älteren Tutorial abgeleitet.
Installiere core, hooks, form, dates und die Abhängigkeit dayjs von dates.
Importiere core/styles.css und dates/styles.css einmalig an der Anwendungsgrenze.
Führe das Formular aus, füge einen datierten Datensatz hinzu und prüfe anschließend die Tabelle und das Ergebnis des Widerrufs.
Mantine-Designsystem: Kalender, Formular und Tabelle als Einheit überprüfen
Was du ausprobieren kannst
Sende den leeren Drawer ab, um Fehler für Name, Datum und Einwilligung anzuzeigen. Gib einen Namen ein, wähle einen Tag im Kalender aus und bestätige die beispielhafte Einwilligung, bevor du das Formular erneut absendest. Die neue teilnehmende Person sollte mit dem ausgewählten Datum und einer stabilen Vorschau-ID erscheinen. Widerrufe anschließend die Einwilligung dieser Person und beobachte die Änderung sowohl im Datensatz als auch in der Zusammenfassung.
Das Datenmodell ist bewusst klein und speichert Daten nur im Arbeitsspeicher. Es gibt keine Rekrutierung für Studien, Erfassung von Einwilligungen, dauerhafte Speicherung auf einem Server oder Zeitzonenumrechnung. Der konkrete Mehrwert dieses Beispiels liegt in der Integration nativer Pakete und dem sichtbaren Verhalten der Steuerelemente, nicht in einem impliziten Backend für die Studienverwaltung.
Mantine-Designsystem: Komponentenbeispiele
App.jsx — Provider, Theme, Tabelle und Planungs-Drawer
Vollständiges natives Mantine-Beispiel. Enthält Theme-Überschreibungen, useForm-Validierung, DatePickerInput, Tabellenaktualisierungen und die Änderung des Einwilligungsstatus.
jsx
import React, {useState} from 'react';
import {MantineProvider, createTheme, Box, Group, Stack, Title, Text, Button, Paper, Badge, Table, Drawer, TextInput, Select, Checkbox, Alert, SimpleGrid} from '@mantine/core';
import {useForm} from '@mantine/form';
import {DatePickerInput} from '@mantine/dates';
import '@mantine/core/styles.css';
import '@mantine/dates/styles.css';
const theme=createTheme({primaryColor:'cyan',primaryShade:8,defaultRadius:'md',components:{Button:Button.extend({defaultProps:{size:'sm'}}),TextInput:TextInput.extend({defaultProps:{size:'md'}})}});
function Tracker(){
const[opened,setOpened]=useState(false),[notice,setNotice]=useState(''),[rows,setRows]=useState([{name:'Alex Morgan',study:'Navigation study',date:'2026-10-14',status:'Confirmed'},{name:'Sam Rivera',study:'Editor study',date:'2026-10-16',status:'Confirmed'}]);
const form=useForm({initialValues:{name:'',study:'Navigation study',date:null,consent:false},validate:{name:v=>v.trim().length<2?'Enter a name with at least two characters.':null,date:v=>!v?'Choose a session date.':null,consent:v=>!v?'Confirm consent before scheduling this example.':null}});
const submit=values=>{setRows([...rows,{name:values.name.trim(),study:values.study,date:values.date,status:'Confirmed'}]);setOpened(false);setNotice('Participant added in this browser only. No research record was stored.');form.reset();};
return <Box p={{base:'md',sm:'xl'}} bg='gray.0'><Box maw={1040} mx='auto'>
<Group justify='space-between' align='flex-start' mb='xl'><Box><Text c='cyan.9' fw={700} size='xs' tt='uppercase' mb='xs'>Mantine · Research operations</Text><Title order={1}>Participant sessions</Title><Text c='dimmed' mt='xs'>Consent and scheduling stay visible in the same working view.</Text></Box><Button onClick={()=>{form.reset();setOpened(true)}}>Add participant</Button></Group>
<SimpleGrid cols={{base:1,sm:3}} mb='xl'><Paper withBorder p='lg'><Text size='sm' c='dimmed'>In this preview</Text><Text fz={32} fw={700}>{rows.length}</Text><Text size='sm'>Participant records</Text></Paper><Paper withBorder p='lg'><Text size='sm' c='dimmed'>Scheduled</Text><Text fz={32} fw={700}>{rows.filter(r=>r.status==='Confirmed').length}</Text><Text size='sm'>With confirmed example consent</Text></Paper><Paper withBorder p='lg' bg='cyan.0'><Text size='sm' c='cyan.9' fw={600}>Working theme</Text><Text mt='xs' size='sm'>cyan.8 action · radius md<br/>spacing lg · body md</Text></Paper></SimpleGrid>
{notice&&<Alert title='Local change' color='cyan' mb='md' withCloseButton onClose={()=>setNotice('')}>{notice}</Alert>}
<Paper withBorder radius='md'><Table.ScrollContainer minWidth={580}><Table verticalSpacing='md' horizontalSpacing='lg' highlightOnHover><Table.Thead><Table.Tr><Table.Th>Participant</Table.Th><Table.Th>Study / session</Table.Th><Table.Th>Consent</Table.Th><Table.Th>Action</Table.Th></Table.Tr></Table.Thead><Table.Tbody>{rows.map((r,i)=><Table.Tr key={i}><Table.Td><Text fw={600} size='sm'>{r.name}</Text><Text size='xs' c='dimmed'>P-{String(i+1).padStart(3,'0')}</Text></Table.Td><Table.Td><Text size='sm'>{r.study}</Text><Text size='xs' c='dimmed'>{r.date}</Text></Table.Td><Table.Td><Badge variant='light' color={r.status==='Confirmed'?'cyan':'orange'}>{r.status}</Badge></Table.Td><Table.Td><Button variant='subtle' color='gray' disabled={r.status==='Withdrawn'} aria-label={'Withdraw consent for '+r.name} onClick={()=>{setRows(rows.map((x,j)=>j===i?{...x,status:'Withdrawn'}:x));setNotice('Consent withdrawn in the preview. The prior session remains visible as history.')}}>Withdraw</Button></Table.Td></Table.Tr>)}</Table.Tbody></Table></Table.ScrollContainer></Paper>
<Text size='xs' c='dimmed' mt='lg'>Native Mantine 9.6.3: Table, Drawer, useForm, DatePickerInput, and input error styles. All records are memory-only examples.</Text>
<Drawer opened={opened} onClose={()=>setOpened(false)} position='right' size='md' title={<Title order={2} size='h3'>Schedule a participant</Title>}><form onSubmit={form.onSubmit(submit)} noValidate><Stack gap='lg'><Text size='sm' c='dimmed'>All fields below belong to this one study enrollment. Closing discards the draft.</Text><TextInput label='Participant name' placeholder='Jules Davis' data-autofocus {...form.getInputProps('name')}/><Select label='Study' data={['Navigation study','Editor study']} allowDeselect={false} {...form.getInputProps('study')}/><DatePickerInput label='Session date' placeholder='Choose a date' valueFormat='DD MMM YYYY' defaultDate='2026-10-01' {...form.getInputProps('date')}/><Checkbox label='Consent is confirmed for this example study' {...form.getInputProps('consent',{type:'checkbox'})}/><Button type='submit'>Add to preview</Button><Text size='xs' c='dimmed'>This checkbox demonstrates validation; it is not a research consent collection process.</Text></Stack></form></Drawer>
</Box></Box>;
}
export default function App(){return <MantineProvider theme={theme} forceColorScheme='light'><Tracker/></MantineProvider>}
Das Kontrollkästchen für die Einwilligung ist eine Validierungsbedingung im Beispiel, kein echter Ablauf zur Einwilligungserfassung.
04
Mantine-Designsystem: Einrichtung für den KI-Agenten
Ausgangspunkt für die Implementierung
Verwende eine Node-Version, die von der ausgewählten Vite-Vorlage unterstützt wird. Der Quellcode enthält Provider, Theme und Stylesheet-Importe; für den gezeigten Ablauf sind weder Backend noch benutzerdefinierter CSS erforderlich.
text
# Terminal
npm create vite@latest participant-demo -- --template react
cd participant-demo
npm install
npm install @mantine/[email protected] @mantine/[email protected] @mantine/[email protected] @mantine/[email protected] dayjs
# Save the complete example as src/App.jsx.
# Replace src/main.jsx with:
import React from 'react';
import {createRoot} from 'react-dom/client';
import App from './App';
createRoot(document.getElementById('root')).render(<App/>);
# Terminal
npm run dev
Ein Prompt für dein Projekt
Agenten-Prompt
Verwende die bereitgestellte Komposition Mantine 9.6.3 und halte die Versionen von core/form/dates aufeinander abgestimmt. Bewahre den Provider, beide CSS-Imports, die getInputProps-Bindings, den Datumstyp des Werts und die Scrollgrenze der Tabelle. Ersetze lokale Änderungen an der Anmeldung erst dann durch den echten Dienst, wenn Richtlinien für Einwilligung und Speicherung festgelegt sind. Unterscheide den Widerruf von der Löschung und sorge dafür, dass Eingabefehler lesbar bleiben und der Fokus im Drawer erhalten bleibt.
05
Quellen und Umfang des Mantine-Designsystems
Originalbeispiel für OpenDesign mit Mantine 9.6.3. Standardwerte des Themes sind von den Anwendungsüberschreibungen für Cyan und Formen abgegrenzt. Die native Vorschau zeigt ausschließlich lokale Datensätze und Validierung. Einwilligungen werden nicht eingeholt und Forschungsdaten nicht gespeichert.
