Système de design Mantine.

Système de design Mantine : thème et limites des packages de Mantine

Un fournisseur, trois packages fonctionnels

L’exemple utilise core pour l’interface, form pour la validation et la liaison des champs, et dates pour le champ de calendrier. MantineProvider reçoit les surcharges de createTheme. Core CSS et dates CSS sont tous deux importés ; le chargement du seul composant React ne suffit pas à reproduire le calendrier stylisé.

Le thème choisit cyan avec primaryShade à 8 et defaultRadius à md. Button.extend définit les petits boutons comme valeur par défaut de l’application, tandis que TextInput.extend sélectionne des champs de taille moyenne. Il s’agit de paramètres délibérés présentés dans le code source, et non d’une affirmation selon laquelle tous les produits Mantine devraient les utiliser.

Consultez la spécification associée

Système de design Mantine : utiliser les indices de palette et les rôles de couleur résolus

Une palette ordonnée n’est pas une liste de nuances sans lien entre elles

Les couleurs Mantine sont des tableaux de nuances indexés. Cet exemple utilise cyan.0 pour un panneau récapitulatif discret, cyan.9 pour le texte d’accentuation et la nuance primaire configurée pour les actions pleines. La référence répertorie toute la gamme cyan utilisée par ce thème.

Le badge de confirmation du tableau utilise une variante cyan claire ; le statut de retrait utilise l’orange. Ces statuts restent accompagnés de texte. Un retrait modifie l’état du consentement, mais conserve la séance antérieure visible, afin qu’un changement de couleur n’efface pas silencieusement l’historique.

Consultez la spécification associée

Couleurs du thème ou valeurs CSS arbitraires

La propriété color du composant peut référencer une palette nommée ; appliquer séparément un arrière-plan hexadécimal brut contournerait certaines décisions liées aux variantes. Avec du CSS simple, privilégiez les variables générées pour les choix de thème récurrents. La correspondance avec les variables CSS de l’exemple explique quelles valeurs restent liées à l’échelle et à la couleur primaire.

Consultez la spécification associée

Système de design Mantine : appliquer les échelles de polices et de titres exportées

Reproduire la hiérarchie

Le tableau utilise le texte sm pour les noms et les libellés d’étude, et xs pour les identifiants et les dates. Title order={1} utilise l’échelle h1 ; le tiroir comporte un titre sémantique h2 rendu avec size="h3" afin d’obtenir un niveau visuel plus compact. Ces choix sont indépendants des libellés et du texte d’aide fournis par les composants de saisie.

La pile de polices système de Mantine ne nécessite aucun téléchargement de police à distance. Les valeurs de police mises à l’échelle incluent --mantine-scale ; les valeurs en pixels de la référence supposent une échelle de 1. Évitez de considérer ces équivalents en pixels comme invariables si l’application modifie son échelle.

Consultez la spécification associée

Système de design Mantine : lier useForm aux composants de saisie réels

La validation relève du modèle de formulaire

initialValues comprend un nom, une étude, une date pouvant être nulle et un booléen de consentement. validate renvoie une chaîne d’erreur ou null pour les champs du nom, de la date et du consentement. form.onSubmit exécute cette validation avant l’ajout de la ligne locale. Il n’est pas nécessaire de gérer séparément des libellés d’erreur peints manuellement.

TextInput et DatePickerInput reçoivent getInputProps pour le chemin de leur champ. Checkbox précise également type:"checkbox" afin que sa valeur checked soit correctement liée. Select utilise une liste d’études fixe et allowDeselect={false} ; le flux de travail n’accepte pas une étude vide.

Consultez la spécification associée

Valeur et format d’affichage de la date

Consultez la spécification associée

Système de design Mantine : gérer la densité des contrôles et le débordement à la frontière des composants

Conserver le tableau dans sa propre zone de défilement

Table.ScrollContainer utilise minWidth={580}, ce qui préserve quatre colonnes lisibles sur les écrans étroits. Le document reste contenu dans la fenêtre d’affichage ; seule la zone de données défile horizontalement si nécessaire. horizontalSpacing="lg" et verticalSpacing="md" utilisent l’espacement du thème plutôt qu’une marge intérieure indépendante pour chaque cellule.

Les trois cartes récapitulatives utilisent SimpleGrid avec une colonne de base et trois colonnes à partir de sm. La marge intérieure de la page passe également de md à xl. Il s’agit d’objets de style adaptatifs, tandis que la largeur minimale du tableau est une décision explicite liée au contenu.

Consultez la spécification associée

Système de design Mantine : distinguer une inscription invalide d’un retrait du consentement

L’exemple comporte deux mutations distinctes

Le formulaire de planification ne peut pas ajouter de ligne tant que le nom, la date de séance et le consentement de l’exemple ne satisfont pas à la validation. Une fois l’ajout local effectué, le tiroir se ferme, un dossier est ajouté et les totaux du récapitulatif sont mis à jour. L’alerte précise qu’aucun dossier de recherche n’a été stocké.

Le retrait modifie uniquement le statut de la ligne sélectionnée et désactive l’action de cette ligne. La date reste visible dans l’historique, tandis que le décompte des séances planifiées exclut les lignes retirées. Il s’agit d’une règle de prévisualisation indiquée, et non d’une véritable règle de conservation des données de recherche.

• Formulaire invalide : afficher les erreurs au niveau des champs et laisser le tiroir ouvert.
• Saisie locale acceptée : ajouter la ligne une seule fois et réinitialiser le prochain brouillon.
• Retrait du consentement de l’exemple : conserver le dossier tout en désactivant tout nouveau retrait.

Système de design Mantine : faire fonctionner ensemble le tiroir et la sémantique des champs

Focus et libellés

Le tiroir reçoit un titre et utilise sa gestion native du focus. Le champ de saisie du nom possède l’attribut data-autofocus. Chaque contrôle de formulaire est associé à un libellé visible ; les messages de validation proviennent de la prop error qui lui est liée. Le nom accessible du bouton de retrait inclut le nom du participant, afin de distinguer plusieurs libellés visuellement identiques.

Dans cet exemple, fermer le tiroir annule le brouillon : l’ouverture de « Ajouter un participant » réinitialise le formulaire. Le calendrier est une fenêtre contextuelle native Mantine dans le tiroir. Testez son interaction au clavier avec le piège de focus environnant, plutôt que de supposer que deux composants accessibles individuellement fonctionnent toujours correctement ensemble.

Consultez la spécification associée

Système de design Mantine — Installer des packages aux versions compatibles et les deux feuilles de style

La configuration complète est fournie

Exécutez les commandes de terminal ci-dessous, remplacez App.jsx par la composition complète et montez-la à l’aide du main.jsx fourni. Les versions des quatre packages Mantine sont volontairement alignées. App.jsx contient le fournisseur et le thème ; aucun fichier de fournisseur caché n’est nécessaire.

Ne copiez pas un exemple de date d’une version majeure différente sans vérifier le type de sa valeur. Assurez-vous que la date initiale du formulaire et sa validation correspondent à la version réellement utilisée de DatePickerInput API. Cet exemple a été conçu pour les versions de packages indiquées, et non déduit d’un ancien tutoriel.

1. Installez core, hooks, form, dates et la dépendance dayjs de dates.
2. Importez core/styles.css et dates/styles.css une seule fois à la frontière de l’application.
3. Remplissez le formulaire, ajoutez un dossier daté, puis examinez le tableau et le résultat du retrait.

Système de design Mantine — Vérifier ensemble le calendrier, le formulaire et le tableau

À essayer

Envoyez le formulaire vide du tiroir pour afficher les erreurs concernant le nom, la date et le consentement. Saisissez un nom, sélectionnez un jour dans le calendrier et confirmez le consentement de démonstration avant d’envoyer à nouveau le formulaire. Le nouveau participant doit apparaître avec la date sélectionnée et un identifiant d’aperçu stable. Retirez ensuite le consentement de ce participant et observez la ligne ainsi que le récapitulatif.

Le modèle de données est volontairement réduit et limité à la mémoire. Il ne prévoit ni recrutement de participants à une étude, ni recueil du consentement, ni persistance côté serveur, ni conversion de fuseau horaire. L’intérêt concret de cet exemple réside dans l’intégration des packages natifs et le comportement visible des contrôles, et non dans la présence implicite d’un système de gestion de recherche.

Système de design Mantine — Exemples de composants

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>}