# Mantine デザインシステム ## Mantine デザインシステムのインターフェースプレビュー ドロワーを開き、フィールドの入力検証を実行し、研究と日付を選択して、ローカルの参加者を追加し、サンプルの同意を撤回します。 ## Mantine デザインシステムのデザインリファレンス @mantine/core 9.6.3 の DEFAULT_THEME から選んだ値を確認済み。ピクセル換算値はルートを 16px、theme.scale を 1 とした場合の値です。スケールに応じて変わるトークンは --mantine-scale を通じて解決されます。シアンのプライマリカラー、シェード 8、半径 md は、アプリケーションで明示的に上書きしています。 ### サンプルで使用するシアンパレット | 名前 / ルール | 値 / 設定 | 用途 | | --- | --- | --- | | colors.cyan[0] | #e3fafc | 控えめなテーマ概要用のサーフェス。 | | colors.cyan[1] | #c5f6fa | 淡い色調。 | | colors.cyan[2] | #99e9f2 | 淡色。 | | colors.cyan[3] | #66d9e8 | 淡色。 | | colors.cyan[4] | #3bc9db | 中間の淡色。 | | colors.cyan[5] | #22b8cf | 中間の濃色。 | | colors.cyan[6] | #15aabf | パレットの標準シェード。 | | colors.cyan[7] | #1098ad | さらに濃いシェード。 | | colors.cyan[8] | #0c8599 | プライマリアクションに選択したシェード。 | | colors.cyan[9] | #0b7285 | 強調テキスト。 | ### scale 1 の文字サイズスケール | 名前 / ルール | 値 / 設定 | 用途 | | --- | --- | --- | | fontSizes.xs / sm | 12px / 14px | レコード ID／補足テキスト。 | | fontSizes.md / lg / xl | 16px / 18px / 20px | 本文と大きめのテキストの標準サイズ。 | | lineHeights.xs / sm / md | 1.4 / 1.45 / 1.55 | 本文用の組み合わせたサイズ。 | | lineHeights.lg / xl | 1.6 / 1.65 | 大きめの読み物向けサイズ。 | | headings.h1 | 34px / 1.3 | 参加者セッションのタイトル。 | | headings.h2 / h3 | 26px / 1.35; 22px / 1.4 | 使用可能な見出しレベル。 | | fontFamily | Platform sans-serif stack | フォントのダウンロードは不要です。 | ### scale 1 の間隔と角丸 | 名前 / ルール | 値 / 設定 | 用途 | | --- | --- | --- | | spacing.xs / sm | 10px / 12px | 小さな間隔。 | | spacing.md / lg / xl | 16px / 20px / 32px | モバイルの余白／フィールド間隔／セクション間隔。 | | radius.xs / sm | 2px / 4px | 小さな形状。 | | radius.md / lg / xl | 8px / 16px / 32px | 標準および大きめの角丸の例。 | | defaultRadius | md (application override) | createTheme で一元的に適用。 | ### ブレークポイント | 名前 / ルール | 値 / 設定 | 用途 | | --- | --- | --- | | breakpoints.xs | 36em | デフォルトの 16px 設定で 576px。 | | breakpoints.sm | 48em | 概要カードを 3 列に変更。 | | breakpoints.md | 62em | デフォルトの 16px 設定で 992px。 | | breakpoints.lg / xl | 75em / 88em | デフォルトの 16px 設定で 1200px／1408px。 | ### CSS とコンポーネントの対応関係 | 名前 / ルール | 値 / 設定 | 用途 | | --- | --- | --- | | --mantine-primary-color-filled | Resolved from primaryColor and primaryShade | このサンプルではシアンのシェード 8 を選択。 | | --mantine-spacing-lg | calc(1.25rem * var(--mantine-scale)) | Stack の間隔は lg、パネルのパディングは lg。 | | --mantine-radius-md | calc(0.5rem * var(--mantine-scale)) | 標準の角丸パネル。 | | --mantine-font-size-sm | calc(0.875rem * var(--mantine-scale)) | テーブルのレコードラベル。 | | Button.extend defaultProps | size: sm | アプリケーションで明示的に設定したデフォルト。 | | TextInput.extend defaultProps | size: md | アプリケーションで明示的に設定したデフォルト。 | ## Mantine デザインシステムの完全ガイド 実際のインターフェースで、このデザインシステムを選び、適用し、レビューするための実践ガイドです。 詳しいガイダンス、実装の出発点、ソースへのリンクをまとめています。 ## Mantine デザインシステム：Mantineのテーマとパッケージの境界 ### 1 つのプロバイダー、3 つの機能パッケージ > サンプルでは、インターフェースに core、入力検証とバインディングに form、カレンダー入力に dates を使用します。MantineProvider には createTheme のオーバーライドを渡します。core CSS と dates CSS の両方をインポートする必要があります。React コンポーネントだけを読み込んでも、スタイルが適用されたカレンダーは再現できません。 テーマではシアンを選択し、primaryShade に 8、defaultRadius に md を設定します。Button.extend で小さいボタンをアプリケーションのデフォルトにし、TextInput.extend で中サイズのコントロールを選択しています。これらはソースに示された意図的な設定であり、すべての Mantine 製品で採用すべきだという意味ではありません。 関連する仕様を確認する ## Mantine デザインシステム：パレットのインデックスと解決済みの色の役割 ### 順序付けされたパレットは、無関係な色見本の集まりではありません Mantine の色は、シェードをインデックスで指定する配列です。この例ではシアンを使用します。控えめな概要パネルには cyan.0、強調テキストには cyan.9、塗りつぶしアクションには設定済みのプライマリーシェードを使います。リファレンスには、このテーマで使うシアンの全階調を示しています。 テーブルの確認済みバッジには明るいシアンのバリエーション、撤回済みにはオレンジを使います。どちらのステータスもテキストで表示します。同意を撤回しても、それ以前のセッションは表示したままにします。色の変化だけで履歴が誤って削除されるのを防ぐためです。 関連する仕様を確認する ### テーマカラーと任意の CSS コンポーネントの color プロパティには、名前付きパレットを指定できます。一方、背景色を別途 16 進数で指定すると、バリエーションに関する一部の決定が適用されません。通常の CSS を使う場合、テーマに関する設定を繰り返し使う箇所には生成済みの変数を優先してください。このサンプルの CSS 変数の対応関係では、スケールやプライマリーカラーに連動する値を示しています。 関連する仕様を確認する ## Mantine デザインシステム：エクスポートされたフォントと見出しのスケールを適用する ### 階層を再現する テーブルでは、名前と研究ラベルに sm、識別子と日付に xs のテキストサイズを使います。Title order={1} は h1 のスケールを使用します。ドロワーには意味的に h2 の見出しを置き、size="h3" で表示することで、見た目の階層を少しコンパクトにしています。これらの設定は、入力コンポーネントが提供するラベルや補助テキストとは独立しています。 Mantine のプラットフォームフォントスタックは、リモートフォントのダウンロードを必要としません。スケールに応じて変わるフォント値には --mantine-scale が含まれます。リファレンスのピクセル値は scale 1 を前提としています。アプリケーションでスケールを変更する場合、ピクセル換算値を不変の値として扱わないでください。 関連する仕様を確認する ## Mantine デザインシステム：useForm を実際の入力コンポーネントにバインドする ### 入力検証はフォームモデルが担います initialValues には、名前、研究、null 許容の日付、ブール値の同意状態を含めます。validate は、名前、日付、同意の各フィールドについて、エラー文字列または null を返します。form.onSubmit は、ローカルの行を追加する前に入力検証を実行します。手動でエラーラベルを別途作成する必要はありません。 TextInput と DatePickerInput には、フィールドのパスに対応する getInputProps を渡します。Checkbox は checked の値を正しくバインドするため、type:"checkbox" も指定します。Select には固定の研究リストと allowDeselect={false} を設定します。このフローでは研究を未選択にできません。 関連する仕様を確認する ### 日付の値と表示形式 日付コンポーネントには @mantine/dates を使い、core のスタイルシートの後に対応するスタイルシートをインポートします。このサンプルのパッケージでは、日付を文字列として扱います。表示形式の DD MMM YYYY は、テーブルに表示される保存済みの日付文字列とは別のものです。defaultDate を指定すると、セッションの日付を有効な値として事前入力せずに、サンプルの月を表示した状態でカレンダーが開きます。 関連する仕様を確認する ## Mantine デザインシステム：コンポーネントの境界で密度とオーバーフローを制御する ### テーブルを専用のスクロール領域に収める Table.ScrollContainer に minWidth={580} を指定し、画面が狭い場合も 4 列を読みやすく保ちます。ドキュメント全体はビューポート内に収め、必要な場合に限りデータ領域を横スクロールさせます。horizontalSpacing="lg" と verticalSpacing="md" には、個別のセルパディングではなくテーマのスペーシングを使用します。 3 枚の概要カードには SimpleGrid を使い、基本は 1 列、sm 以上では 3 列にします。ページの余白も md から xl に切り替わります。これらはレスポンシブなスタイルオブジェクトであり、テーブルの最小幅はコンテンツに応じて明示的に決めています。 関連する仕様を確認する ## Mantine デザインシステム：登録の入力不備と同意の撤回を区別する ### このサンプルには、異なる 2 種類の変更があります 名前、セッション日、サンプルへの同意が入力検証を通過するまで、スケジュール設定フォームから行を追加することはできません。ローカルへの追加が成功すると、ドロワーを閉じ、レコードを 1 件追加し、概要の件数を更新します。アラートには、研究記録が保存されていないことを示します。 Withdraw は選択した行のステータスだけを変更し、その行のアクションを無効にします。履歴として日付は表示されたままですが、撤回済みの行は予定数に含めません。これはプレビューで定めた方針であり、実際の研究データ保持ルールではありません。 - フォームが無効です。入力項目ごとのエラーを表示し、ドロワーを開いたままにします。 - ローカルのエントリーを受け付けました。行を一度だけ追加し、次の入力用にフォームをリセットします。 - 同意を撤回しました。このレコードは保持し、再度撤回できないようにします。 ## Mantine デザインシステム：ドロワーと入力のセマンティクスを連携させる ### フォーカスとラベル ドロワーにはタイトルを設定し、ネイティブのフォーカス管理を利用します。名前入力には data-autofocus を指定します。すべてのフォームコントロールに視認できるラベルを付け、バインドされた error プロパティから検証メッセージを表示します。撤回ボタンのアクセシブルネームには参加者名を含めるため、見た目が同じラベルが複数あっても区別できます。 この例では、ドロワーを閉じると入力中の内容は破棄されます。「参加者を追加」を開くとフォームがリセットされます。カレンダーは、ドロワー内に表示されるネイティブの Mantine ポップアップです。それぞれ単体でアクセシブルなコンポーネントでも、組み合わせたときに正しく動作するとは限りません。周囲のフォーカストラップも含めて、キーボード操作を確認してください。 関連する仕様を確認する ## Mantine デザインシステム：バージョンをそろえたパッケージと2つのスタイルシートをインストールする ### セットアップ一式を提供しています 以下のターミナルコマンドを実行し、App.jsx を完全版の構成に置き換えて、提供されている main.jsx でマウントしてください。4つの Mantine パッケージのバージョンは意図的にそろえています。App.jsx にプロバイダーとテーマが含まれているため、別途プロバイダーファイルを用意する必要はありません。 別のメジャーバージョンの日付入力例を使う場合は、値の型を確認せずにコピーしないでください。フォームの初期日付と検証処理は、実際の DatePickerInput API に合わせてください。この例は、古いチュートリアルから推測したものではなく、指定されたパッケージバージョンを使って作成されています。 1. core、hooks、form、dates、および dates の依存パッケージ dayjs をインストールします。 2. アプリケーションのエントリーポイントで core/styles.css と dates/styles.css を一度だけインポートします。 3. フォームを実行し、日付付きのレコードを追加してから、テーブルと撤回後の状態を確認します。 ## Mantine デザインシステム：カレンダー、フォーム、テーブルを一体として検証する ### 試してみること ドロワーを空のまま送信し、名前、日付、同意に関するエラーを表示します。名前を入力し、カレンダーで日付を選び、同意の例を確認してから、もう一度送信してください。選択した日付と変わらないプレビュー ID を含む新しい参加者が表示されます。その参加者の同意を撤回し、行と概要の両方を確認してください。 データモデルは意図的に簡素化されており、データはメモリ内にのみ保持されます。研究参加者の募集、同意の取得、サーバーへのデータ保存、タイムゾーン変換は行いません。この例の主な価値は、ネイティブパッケージとの連携と、目に見えるコントロールの動作にあります。研究管理用のバックエンド機能を示唆するものではありません。 ## Mantine デザインシステムのコンポーネント例 ### App.jsx — プロバイダー、テーマ、テーブル、スケジュール設定用ドロワー ネイティブの Mantine を使った完全な例です。テーマのオーバーライド、useForm による検証、DatePickerInput、テーブルの更新、同意ステータスの変更が含まれます。 ``` 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 Mantine · Research operationsParticipant sessionsConsent and scheduling stay visible in the same working view. In this preview{rows.length}Participant recordsScheduled{rows.filter(r=>r.status==='Confirmed').length}With confirmed example consentWorking themecyan.8 action · radius md
spacing lg · body md {notice&&setNotice('')}>{notice}} ParticipantStudy / sessionConsentAction{rows.map((r,i)=>{r.name}P-{String(i+1).padStart(3,'0')}{r.study}{r.date}{r.status})}
 Native Mantine 9.6.3: Table, Drawer, useForm, DatePickerInput, and input error styles. All records are memory-only examples. setOpened(false)} position='right' size='md' title={Schedule a participant}>
All fields below belong to this one study enrollment. Closing discards the draft.