Una referencia de Mantine 9 basada en una tabla nativa de participantes y un panel lateral de planificación. Inspecciona las escalas reales del tema, conecta useForm con TextInput, Select, Checkbox y DatePickerInput, y prueba la validación antes de añadir un registro local.
Guía de OpenDesign9 capítulos32 entradas de referenciaGuía de aplicación original
01
Vista previa de la interfaz del sistema de diseño de Mantine
Abre el panel lateral, activa la validación de campos, selecciona un estudio y una fecha, añade un participante local y retira el consentimiento de ejemplo.
Núcleo, formularios y paquetes de fechas de Mantine 9.6.3 nativos con React 19. Apariencia clara forzada y tema cian; solo estado local. · Referencia de implementación
02
Referencia de diseño del sistema de diseño de Mantine
Valores seleccionados de DEFAULT_THEME verificados con @mantine/core 9.6.3. Los equivalentes numéricos en píxeles presuponen una raíz de 16px y theme.scale=1; los tokens escalados se resuelven mediante --mantine-scale. El color primario cian, el tono 8 y el radio md son ajustes explícitos de la aplicación.
Sistema de diseño de Mantine: tema y límites de los paquetes
Un proveedor y tres paquetes de funciones
El ejemplo usa core para la interfaz, form para la validación y los enlaces, y dates para el campo de calendario. MantineProvider recibe las sobrescrituras de createTheme. Se importan tanto Core CSS como dates CSS; cargar solo el componente de React no basta para reproducir el calendario con estilo aplicado.
El tema selecciona cian con primaryShade 8 y defaultRadius md. Button.extend establece los botones pequeños como valor predeterminado de la aplicación, mientras que TextInput.extend selecciona controles medianos. Son ajustes deliberados que se muestran en el código, no una afirmación de que todos los productos de Mantine deban usarlos.
Sistema de diseño de Mantine: usa índices de paleta y roles de color resueltos
Una paleta ordenada no es una lista de muestras de color inconexas
Los colores de Mantine son matrices de tonos indexadas. Esta muestra usa cyan.0 para un panel de resumen discreto, cyan.9 para texto de acento y el tono primario configurado para las acciones con relleno. La referencia enumera toda la escala de cian utilizada por este tema.
La insignia de confirmado de la tabla usa una variante de cian claro; la de retirado, naranja. Ambos estados conservan su texto. La retirada cambia el estado del consentimiento, pero mantiene visible la sesión anterior, para evitar que un cambio de color elimine el historial sin avisar.
Colores del tema frente a valores arbitrarios de CSS
La propiedad color del componente puede hacer referencia a una paleta con nombre; aplicar por separado un fondo hexadecimal sin procesar omitiría algunas decisiones de variante. Al usar CSS sin más, prefiere las variables generadas para las decisiones de tema recurrentes. La correspondencia entre las variables de CSS y los valores del ejemplo explica cuáles siguen vinculados a la escala y al color principal.
Sistema de diseño de Mantine: aplica las escalas de fuentes y encabezados exportadas
Reproduce la jerarquía
La tabla usa texto sm para los nombres y las etiquetas de estudio, y xs para los identificadores y las fechas. Title order={1} usa la escala h1; el cajón tiene un encabezado semántico h2 que se muestra con size="h3" para que su nivel visual sea más compacto. Estas decisiones son independientes de las etiquetas y el texto de ayuda que proporcionan los componentes de entrada.
La pila de fuentes del sistema de Mantine no requiere descargar fuentes remotas. Los valores de fuente escalados incluyen --mantine-scale; los valores en píxeles de referencia presuponen una escala de 1. No trates esos equivalentes en píxeles como invariantes si la aplicación cambia la escala.
Sistema de diseño de Mantine: vincula useForm a componentes de entrada reales
La validación corresponde al modelo del formulario
initialValues incluye un nombre, un estudio, una fecha que admite null y un consentimiento booleano. validate devuelve una cadena de error o null para los campos de nombre, fecha y consentimiento. form.onSubmit ejecuta esa validación antes de añadir la fila local. No hace falta recopilar por separado etiquetas de error dibujadas manualmente.
TextInput y DatePickerInput reciben getInputProps para la ruta de su campo. Checkbox también especifica type:"checkbox" para que el valor checked se vincule correctamente. Select usa una lista fija de estudios y allowDeselect={false}; el flujo no admite que el estudio quede vacío.
Sistema de diseño de Mantine: controla la densidad y el desbordamiento en los límites del componente
Mantén la tabla dentro de su propia región desplazable
Table.ScrollContainer usa minWidth={580} para conservar cuatro columnas legibles en pantallas estrechas. El documento permanece dentro de la ventana gráfica; solo la región de datos se desplaza horizontalmente cuando hace falta. horizontalSpacing="lg" y verticalSpacing="md" usan el espaciado del tema en lugar de un relleno de celda independiente.
Las tres tarjetas de resumen usan SimpleGrid con una columna en el punto de ruptura base y tres a partir de sm. El margen interior de la página también cambia de md a xl. Son objetos de estilo adaptables; el ancho mínimo de la tabla es una decisión explícita sobre el contenido.
Sistema de diseño de Mantine: diferencia la inscripción no válida de la retirada del consentimiento
El ejemplo contempla dos cambios distintos
El formulario de programación no puede añadir una fila hasta que el nombre, la fecha de la sesión y el consentimiento de ejemplo cumplan la validación. Si se añade correctamente, el cajón se cierra, se agrega un registro y se actualizan los recuentos del resumen. La alerta indica que no se almacenó ningún registro de investigación.
Retirar el consentimiento solo cambia el estado de la fila seleccionada y desactiva la acción de esa fila. La fecha sigue visible como historial, mientras que el recuento de sesiones programadas excluye las filas con el consentimiento retirado. Esta es una política declarada para la vista previa, no una norma real de conservación de datos de investigación.
Formulario no válido: muestra errores junto a los campos y mantén abierto el cajón.
Entrada local aceptada: añade la fila una sola vez y restablece el siguiente borrador.
Consentimiento de ejemplo retirado: conserva el registro y desactiva la posibilidad de volver a retirarlo.
Sistema de diseño de Mantine: combina el cajón con la semántica de los campos de entrada
Foco y etiquetas
El cajón recibe un título y usa la gestión de foco nativa. El campo de nombre tiene data-autofocus. Todos los controles del formulario muestran una etiqueta visible; los mensajes de validación proceden de la propiedad de error vinculada. El nombre accesible del botón para retirar el consentimiento incluye el nombre del participante, de modo que se puedan distinguir varios botones con la misma etiqueta visual.
En este ejemplo, cerrar el cajón cancela el borrador: al abrir Add participant, se restablece el formulario. El calendario es una ventana emergente nativa de Mantine dentro del cajón. Prueba su interacción con el teclado junto con la trampa de foco que lo rodea; no des por sentado que dos componentes accesibles por separado siempre funcionan bien al combinarse.
Sistema de diseño de Mantine: instala paquetes con versiones compatibles y ambas hojas de estilos
Se proporciona la configuración completa
Usa los comandos de terminal que aparecen a continuación, sustituye App.jsx por la composición completa y móntala con el main.jsx proporcionado. Las cuatro versiones de los paquetes de Mantine están alineadas deliberadamente. App.jsx contiene el proveedor y el tema, así que no se necesita ningún archivo oculto del proveedor.
No copies un ejemplo de fecha de otra versión principal sin comprobar antes el tipo de valor. Asegúrate de que la fecha inicial del formulario y la validación coincidan con el API real de DatePickerInput. Este ejemplo se creó con las versiones de paquete especificadas; no se dedujo de un tutorial anterior.
Instala core, hooks, form y dates, además de la dependencia dayjs de dates.
Importa core/styles.css y dates/styles.css una sola vez, en el límite de la aplicación.
Prueba el formulario, añade un registro con fecha y, luego, revisa la tabla y el resultado de retirar el consentimiento.
Sistema de diseño de Mantine: verifica el calendario, el formulario y la tabla como una sola unidad
Qué probar
Envía el cajón vacío para mostrar los errores de nombre, fecha y consentimiento. Escribe un nombre, selecciona un día en el calendario y confirma el consentimiento de ejemplo antes de volver a enviar el formulario. El nuevo participante debería aparecer con la fecha seleccionada y un ID de vista previa estable. Después, retira el consentimiento de ese participante y observa los cambios en la fila y el resumen.
El modelo de datos es deliberadamente pequeño y solo existe en memoria. No hay captación de participantes para estudios, recopilación de consentimientos, persistencia en el servidor ni conversión de zonas horarias. El valor concreto de este ejemplo está en la integración nativa de paquetes y el comportamiento visible de los controles, no en un supuesto backend para gestionar investigaciones.
Ejemplos de componentes del sistema de diseño de Mantine
App.jsx — proveedor, tema, tabla y cajón de programación
Ejemplo nativo completo de Mantine. Incluye las personalizaciones del tema, la validación de useForm, DatePickerInput, las actualizaciones de la tabla y el cambio del estado del consentimiento.
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 casilla de consentimiento es una condición de validación de ejemplo, no un flujo real de recopilación del consentimiento.
04
Configuración del agente del sistema de diseño Mantine
Punto de partida para la implementación
Usa una versión de Node compatible con la plantilla de Vite seleccionada. El código fuente incluye las importaciones del proveedor, el tema y la hoja de estilos; el flujo mostrado no requiere un backend ni un CSS personalizado.
Texto
# 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
Una instrucción para tu proyecto
Instrucción para el agente
Usa la composición Mantine 9.6.3 proporcionada y mantén alineadas las versiones de core/form/dates. Conserva el proveedor, ambas importaciones de CSS, los enlaces getInputProps, el tipo del valor de fecha y el límite de desplazamiento de la tabla. Sustituye los cambios locales de inscripción por el servicio real solo después de definir las políticas de consentimiento y persistencia. Mantén la retirada del consentimiento diferenciada de la eliminación y conserva los errores de entrada legibles y el foco del panel lateral.
05
Fuentes y alcance del sistema de diseño Mantine
Ejemplo original de OpenDesign con Mantine 9.6.3. Los valores predeterminados del tema se distinguen de las personalizaciones de la aplicación en cian y formas. La vista previa nativa muestra únicamente registros locales y validación; no recopila consentimientos ni guarda datos de investigación.
