Mantine Tasarım Sistemi.

Mantine Tasarım Sistemi Mantine Tema ve Paket Sınırları

Tek sağlayıcı, üç özellik paketi

Örnekte arayüz için core, doğrulama ve bağlamalar için form, takvim girişi içinse dates kullanılır. MantineProvider, createTheme geçersiz kılmalarını alır. Hem core CSS hem de dates CSS içe aktarılır; biçimlendirilmiş takvimi yeniden oluşturmak için yalnızca React bileşenini yüklemek yeterli değildir.

Tema, primaryShade 8 ile cyan'ı ve defaultRadius md'yi seçer. Button.extend, küçük düğmeleri uygulama varsayılanı yaparken TextInput.extend, orta boy kontrolleri seçer. Bunlar kaynak kodda gösterilen bilinçli ayarlardır; her Mantine ürününün bu ayarları kullanması gerektiği iddia edilmez.

Destekleyici belirtimi okuyun

Mantine Tasarım Sisteminde Palet İndekslerini ve Çözümlenmiş Renk Rollerini Kullanma

Sıralı bir palet, birbiriyle ilgisiz renk örneklerinden oluşan bir liste değildir

Mantine renkleri, indekslenmiş ton dizileridir. Bu örnekte sakin bir özet paneli için cyan.0, vurgu metni için cyan.9 ve dolgulu eylemler için yapılandırılmış birincil ton kullanılır. Referansta bu temada kullanılan cyan renk dizisinin tamamı listelenir.

Tablodaki onaylandı rozeti açık camgöbeği çeşidini, geri çekildi rozeti ise turuncu çeşidini kullanır. Bu durumlar metinle de belirtilir. Onayın geri çekilmesi onay durumunu değiştirir ancak önceki oturumu görünür bırakır; böylece renk değişikliği geçmişi sessizce silmez.

Destekleyici belirtimi okuyun

Tema renkleri ve gelişigüzel CSS değerleri

Bileşenin color özelliği adlandırılmış bir palete başvurabilir; ham onaltılık arka plan rengini ayrıca biçimlendirmek bazı varyant kararlarını devre dışı bırakır. Düz CSS kullanırken, tekrarlanan tema kararlarında oluşturulan değişkenleri tercih edin. Örnekteki CSS değişken eşlemesi, hangi değerlerin ölçeğe ve birincil renge bağlı kaldığını açıklar.

Destekleyici belirtimi okuyun

Mantine Tasarım Sisteminde Dışa Aktarılan Yazı Tipini ve Başlık Ölçeklerini Uygulama

Hiyerarşiyi yeniden oluşturun

Tabloda adlar ve çalışma etiketleri için sm, tanımlayıcılar ve tarihler için xs metin boyutu kullanılır. Title order={1}, h1 ölçeğini kullanır; çekmecedeki h2 anlamsal başlığı, görsel düzeyi daha kompakt olsun diye size="h3" ile gösterilir. Bu kararlar, input bileşenlerinin sağladığı etiket ve yardımcı metinden bağımsızdır.

Mantine platform yazı tipi yığını, uzaktan yazı tipi indirmeyi gerektirmez. Ölçeklenmiş yazı tipi değerleri --mantine-scale değişkenini içerir; referanstaki piksel değerleri ölçeğin 1 olduğunu varsayar. Uygulama ölçeğini değiştirirseniz bu piksel karşılıklarını sabit değerler olarak değerlendirmeyin.

Destekleyici belirtimi okuyun

Mantine Tasarım Sistemi Bind useForm to Real Input Components

Doğrulama form modeline aittir

initialValues; ad, çalışma, boş değer alabilen tarih ve boolean onam alanlarını içerir. validate, ad, tarih ve onam alanları için bir hata dizesi veya null döndürür. form.onSubmit, yerel satır eklenmeden önce bu doğrulamayı çalıştırır. Elle biçimlendirilmiş hata etiketlerinden oluşan ayrı bir koleksiyona gerek yoktur.

TextInput ve DatePickerInput bileşenleri, alan yolları için getInputProps alır. Checkbox bileşeninde de işaretli değerin doğru bağlanması için type:"checkbox" belirtilir. Select sabit bir çalışma listesi kullanır ve allowDeselect={false} ayarlanır; bu akışta çalışma alanı boş bırakılamaz.

Destekleyici belirtimi okuyun

Tarih değeri ve görüntüleme biçimi

Destekleyici belirtimi okuyun

Mantine Tasarım Sistemi Denetim Yoğunluğu ve Taşma Bileşen Sınırında

Tabloyu kendi kaydırma alanında tutun

Table.ScrollContainer, dar ekranlarda dört okunabilir sütunu korumak için minWidth={580} kullanır. Belgenin kendisi görünüm alanına sığmaya devam eder; gerektiğinde yalnızca veri alanı yatay kaydırılır. horizontalSpacing="lg" ve verticalSpacing="md", hücreler için bağımsız dolgu değerleri yerine tema aralıklarını kullanır.

Üç özet kartı, başlangıçta tek sütun ve sm boyutundan itibaren üç sütun içeren SimpleGrid kullanır. Sayfa iç boşluğu da md boyutundan xl boyutuna geçer. Bunlar duyarlı stil nesneleridir; tablonun minimum genişliği ise içeriğe ilişkin açık bir tercihtir.

Destekleyici belirtimi okuyun

Mantine Tasarım Sistemi Geçersiz Kaydı Onamın Geri Çekilmesinden Ayırın

Örnekte iki farklı değişiklik işlemi vardır

Planlama formu; ad, oturum tarihi ve örnek onam doğrulamadan geçmeden satır ekleyemez. Yerel ekleme başarılı olduğunda çekmece kapanır, bir kayıt eklenir ve özet sayıları güncellenir. Uyarı, herhangi bir araştırma kaydının saklanmadığını belirtir.

Onamı geri çekme işlemi yalnızca seçili satırın durumunu değiştirir ve o satırdaki işlemi devre dışı bırakır. Tarih geçmiş kaydı olarak görünür kalırken planlanan kayıt sayısı, onamı geri çekilenleri içermez. Bu, gerçek bir araştırma verisi saklama kuralı değil, önizleme için belirlenmiş bir politikadır.

• Geçersiz form: alan düzeyindeki hataları gösterin ve çekmeceyi açık tutun.
• Kabul edilen yerel kayıt: satırı bir kez ekleyin ve sonraki taslağı sıfırlayın.
• Örnek onamı geri çekildi: kaydı koruyun ve yeniden geri çekme işlemini devre dışı bırakın.

Mantine Tasarım Sistemi Çekmece ve Girdi Anlamlarını Birlikte Çalıştırın

Odak ve etiketler

Çekmece bir başlık alır ve yerel odak yönetimini kullanır. Ad alanında data-autofocus bulunur. Her form denetiminin görünür bir etiketi vardır; doğrulama iletileri, bağlanan error prop değerinden gelir. Geri çekme düğmesinin erişilebilir adı katılımcıyı da içerir; böylece görünüşte aynı olan birden fazla etiket birbirinden ayırt edilebilir.

Bu örnekte çekmeceyi kapatmak taslağı iptal eder: Katılımcı ekle düğmesine her basıldığında form sıfırlanır. Takvim, çekmecenin içindeki yerel bir Mantine açılır penceresidir. İki ayrı erişilebilir bileşenin birlikte de sorunsuz çalışacağını varsaymak yerine, klavye etkileşimini çevresindeki odak tuzağıyla birlikte sınayın.

Destekleyici belirtimi okuyun

Mantine Tasarım Sistemi Sürümleri Uyumlu Paketleri ve Her İki Stil Dosyasını Yükleyin

Eksiksiz kurulum sağlanmıştır

Aşağıdaki terminal komutlarını kullanın, App.jsx dosyasını tam bileşimle değiştirin ve sağlanan main.jsx ile uygulamayı bağlayın. Dört Mantine paketinin sürümleri bilerek eşleştirilmiştir. App.jsx sağlayıcıyı ve temayı içerir; gizli bir sağlayıcı dosyasına gerek yoktur.

Değer türünü denetlemeden farklı bir ana sürüme ait tarih örneğini kopyalamayın. Formun başlangıç tarihini ve doğrulamasını gerçek DatePickerInput API ile tutarlı hâle getirin. Bu örnek, eski bir öğreticiden çıkarım yapmak yerine belirtilen paket sürümleriyle oluşturulmuştur.

1. core, hooks, form, dates ve dates bağımlılığı olan dayjs paketlerini yükleyin.
2. core/styles.css ve dates/styles.css dosyalarını uygulama sınırında bir kez içe aktarın.
3. Formu çalıştırın, tarihli bir kayıt ekleyin ve ardından tabloyu ve geri çekme sonucunu inceleyin.

Mantine Tasarım Sistemi Takvimi, Formu ve Tabloyu Tek Bir Birim Olarak Doğrulayın

Deneyebilecekleriniz

Ad, tarih ve onam hatalarını görmek için boş çekmeceyi gönderin. Bir ad girin, takvimden bir gün seçin ve yeniden göndermeden önce örnek onamı onaylayın. Yeni katılımcı, seçilen tarih ve değişmeyen bir önizleme kimliğiyle görünmelidir. Ardından bu katılımcının onamını geri çekin ve hem satırda hem özette olanları gözlemleyin.

Veri modeli kasıtlı olarak küçük tutulmuş ve yalnızca bellekte çalışır. Çalışma katılımcısı bulma, onam alma, sunucuda veri saklama veya saat dilimi dönüştürme işlemleri yoktur. Bu örneğin somut değeri, yerel paket entegrasyonu ve görünür denetim davranışıdır; araştırma yönetimi için bir arka uç sunduğu izlenimini vermek değildir.

Mantine Tasarım Sistemi Bileşen Örnekleri

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