Una guida di riferimento per Mantine 9, basata su una tabella nativa dei partecipanti e un drawer per la pianificazione. Esamina le scale effettive del tema, collega useForm a TextInput, Select, Checkbox e DatePickerInput e prova la convalida prima di aggiungere un record locale.
Core, form e dates nativi di Mantine 9.6.3 con React 19. Aspetto chiaro forzato e tema ciano; solo stato locale. · Riferimento per l’implementazione
02
Riferimento di progettazione del sistema di progettazione sistema di design Mantine
Valori selezionati di DEFAULT_THEME verificati con @mantine/core 9.6.3. Gli equivalenti numerici in pixel presuppongono una radice da 16px e theme.scale=1; i token scalati si risolvono tramite --mantine-scale. Il colore primario ciano, la tonalità 8 e il raggio md sono override espliciti dell'applicazione.
Sistema di progettazione sistema di design Mantine: tema e confini dei pacchetti
Un provider, tre pacchetti funzionali
L'esempio usa core per l'interfaccia, form per la convalida e i binding, e dates per l'input del calendario. MantineProvider riceve gli override di createTheme. Vengono importati sia core CSS sia dates CSS; caricare solo il componente React non basta a riprodurre lo stile del calendario.
Il tema seleziona il ciano con primaryShade 8 e defaultRadius md. Button.extend imposta i pulsanti piccoli come predefiniti dell'applicazione, mentre TextInput.extend seleziona i controlli medi. Sono impostazioni intenzionali mostrate nel codice sorgente, non un'affermazione secondo cui ogni prodotto Mantine dovrebbe usarle.
Sistema di progettazione sistema di design Mantine: usare gli indici della tavolozza e i ruoli cromatici risolti
Una tavolozza ordinata non è un insieme di campioni di colore senza relazione
I colori Mantine sono array di tonalità indicizzati. Questo esempio usa cyan.0 per un pannello riepilogativo discreto, cyan.9 per il testo d'accento e la tonalità primaria configurata per le azioni con riempimento pieno. Il riferimento elenca l'intera scala del ciano usata da questo tema.
Il badge di conferma nella tabella usa una variante ciano chiara; quello di revoca usa l'arancione. Gli stati sono comunque indicati con testo. La revoca modifica lo stato del consenso ma lascia visibile la sessione precedente, evitando che un cambiamento di colore elimini la cronologia senza segnalarlo.
La proprietà color del componente può fare riferimento a una tavolozza con nome; applicare separatamente uno sfondo esadecimale grezzo può aggirare alcune decisioni sulle varianti. Quando usi CSS semplice, preferisci le variabili generate per le scelte ricorrenti del tema. La mappatura delle variabili CSS dell'esempio spiega quali valori restano collegati alla scala e al colore primario.
Sistema di progettazione sistema di design Mantine: applicare le scale di caratteri e titoli esportate
Riprodurre la gerarchia
La tabella usa il testo sm per i nomi e le etichette degli studi, e xs per gli identificatori e le date. Title order={1} usa la scala h1; il drawer ha un’intestazione semantica h2, visualizzata con size="h3" per un aspetto più compatto. Queste scelte sono indipendenti dalle etichette e dal testo di supporto forniti dai componenti di input.
Lo stack di font della piattaforma di Mantine non richiede il download di font remoti. I valori dei font ridimensionati includono --mantine-scale; i valori in pixel di riferimento presuppongono una scala pari a 1. Se l’applicazione modifica la scala, non considerare invariati i valori equivalenti in pixel.
Sistema di progettazione sistema di design Mantine: associa useForm ai componenti di input reali
La validazione appartiene al modello del modulo
initialValues include un nome, uno studio, una data nullable e il consenso booleano. validate restituisce una stringa di errore o null per i campi nome, data e consenso. form.onSubmit esegue la validazione prima di aggiungere la riga in locale. Non serve creare separatamente etichette di errore con stile applicato manualmente.
TextInput e DatePickerInput ricevono getInputProps per il percorso del rispettivo campo. Checkbox specifica inoltre type:"checkbox" per associare correttamente il valore checked. Select usa un elenco fisso di studi e allowDeselect={false}; il flusso non ammette uno studio vuoto.
Sistema di progettazione sistema di design Mantine: densità dei controlli e overflow al confine del componente
Mantieni la tabella nella propria area di scorrimento
Table.ScrollContainer usa minWidth={580}, mantenendo leggibili quattro colonne sugli schermi stretti. Il documento resta entro i limiti della viewport; quando necessario, solo l’area dei dati scorre in orizzontale. horizontalSpacing="lg" e verticalSpacing="md" usano la spaziatura del tema, anziché un padding indipendente per ogni cella.
Le tre schede riepilogative usano SimpleGrid con una colonna di base e tre colonne a partire da sm. Anche il margine interno della pagina passa da md a xl. Si tratta di oggetti di stile responsive, mentre la larghezza minima della tabella è una scelta esplicita relativa ai contenuti.
Sistema di progettazione sistema di design Mantine: distingui l’iscrizione non valida dalla revoca del consenso
L’esempio prevede due modifiche diverse
Il modulo di pianificazione non può aggiungere una riga finché nome, data della sessione e consenso di esempio non superano la validazione. Una volta completata l’aggiunta in locale, il drawer si chiude, viene aggiunto un record e si aggiornano i conteggi riepilogativi. L’avviso specifica che non è stato salvato alcun dato di ricerca.
Revoca modifica solo lo stato della riga selezionata e disattiva l’azione per quella riga. La data resta visibile come cronologia, mentre il conteggio delle sessioni pianificate esclude le righe con consenso revocato. È una regola dichiarata per l’anteprima, non una norma reale di conservazione dei dati di ricerca.
Modulo non valido: mostra gli errori accanto agli input e lascia aperto il drawer.
Inserimento locale accettato: aggiungi la riga una sola volta e reimposta il modulo per la bozza successiva.
Revoca del consenso di esempio: conserva il record e disattiva un’ulteriore revoca.
Sistema di progettazione sistema di design Mantine: fai interagire drawer e semantica degli input
Focus ed etichette
Il drawer riceve un titolo e usa la propria gestione nativa del focus. L’input del nome ha data-autofocus. Ogni controllo del modulo ha un’etichetta visibile; i messaggi di validazione provengono dalla proprietà error associata. Il nome accessibile del pulsante di revoca include il nome del partecipante, così le varie etichette visive identiche restano distinguibili.
In questo esempio, chiudere il drawer annulla la bozza: quando si apre Aggiungi partecipante, il modulo viene reimpostato. Il calendario è un popup nativo di Mantine all’interno del drawer. Verifica la navigazione da tastiera insieme al focus trap circostante, senza presumere che due componenti accessibili singolarmente si integrino sempre correttamente.
Sistema di progettazione sistema di design Mantine: installa pacchetti compatibili per versione ed entrambi i fogli di stile
La configurazione completa è inclusa
Esegui i comandi del terminale qui sotto, sostituisci App.jsx con la composizione completa e avviala con il main.jsx fornito. Le quattro versioni dei pacchetti Mantine sono volutamente allineate. App.jsx contiene il provider e il tema, quindi non serve alcun file provider nascosto.
Non copiare un esempio di date da una versione principale diversa senza verificarne il tipo di valore. Assicurati che la data iniziale del modulo e la relativa validazione siano coerenti con il DatePickerInput API effettivamente usato. Questo esempio è stato realizzato con le versioni dei pacchetti specificate, non dedotto da un tutorial precedente.
Installa core, hooks, form, dates e la dipendenza dayjs di dates.
Importa core/styles.css e dates/styles.css una sola volta, nel punto di ingresso dell’applicazione.
Prova il modulo, aggiungi un record con data, poi controlla la tabella e il risultato della revoca.
Sistema di progettazione sistema di design Mantine: verifica calendario, modulo e tabella come un’unica unità
Cosa provare
Invia il drawer vuoto per visualizzare gli errori relativi a nome, data e consenso. Inserisci un nome, seleziona un giorno nel calendario e conferma il consenso di esempio prima di inviare di nuovo. Il nuovo partecipante dovrebbe comparire con la data selezionata e un ID di anteprima stabile. Revoca quindi il consenso del partecipante e osserva le modifiche alla riga e al riepilogo.
Il modello dei dati è volutamente essenziale e risiede solo in memoria. Non prevede il reclutamento di partecipanti allo studio, la raccolta del consenso, la persistenza sul server o la conversione del fuso orario. Il valore concreto di questo esempio consiste nell’integrazione nativa del pacchetto e nel comportamento visibile dei controlli, non in un backend di gestione della ricerca sottinteso.
Sistema di progettazione sistema di design Mantine: esempi di componenti
App.jsx — provider, tema, tabella e drawer di pianificazione
Esempio nativo completo di Mantine. Include le personalizzazioni del tema, la validazione useForm, DatePickerInput, gli aggiornamenti della tabella e la modifica dello stato del consenso.
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>}
La casella di controllo del consenso è una condizione di validazione d’esempio, non un vero flusso di raccolta del consenso.
04
Sistema di progettazione sistema di design Mantine: configurazione dell’agente IA
Punto di partenza per l’implementazione
Usa una versione di Node supportata dal template Vite scelto. Il sorgente include provider, tema e importazioni dei fogli di stile; per il flusso mostrato non servono backend o CSS personalizzati.
testo
# 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
Un prompt per il tuo progetto
Prompt per l’agente
Usa la composizione Mantine 9.6.3 fornita e mantieni allineate le versioni di core/form/dates. Conserva il provider, entrambe le importazioni CSS, le associazioni getInputProps, il tipo del valore data e il confine di scorrimento della tabella. Sostituisci le modifiche locali alle iscrizioni con il servizio reale solo dopo aver definito le regole per il consenso e la persistenza. Distingui la revoca dall’eliminazione e mantieni chiari gli errori degli input e la gestione del focus nel drawer.
05
Sistema di progettazione sistema di design Mantine: fonti e ambito
Esempio originale di OpenDesign con Mantine 9.6.3. I valori predefiniti del tema sono distinti dalle personalizzazioni dell’applicazione relative al ciano e alle forme. L’anteprima nativa mostra solo record e validazione locali, senza raccogliere il consenso né salvare dati di ricerca.
