Mantine Core 一覧 (ReactのUIコンポーネントライブラリ )

Mantine Core ページ

※2023年2月9日現在 Version 5.10.0 Coreのトップページがない、https://mantine.dev/core/が404扱いになっている。

関連ページ

Mantineのcore一覧

Layout	説明
AppShell	ヘッダー、ナビゲーションバー、フッター 、サイドバーなどがまとめてあり、簡単にコンテンツレイアウトを実装できます。また、特定のルートにのみ有効になるようにReact Routerを使用してAppShellを設定できます。
AspectRatio	レスポンシブな一貫した幅と高さの比率を維持します。イメージ、マップ、ビデオなどの他のメディアを表示するために使用できます。
Center	コンテンツを縦方向と横方向にセンタリングします。要素を中央に配置します。
Container	コンテナは最も基本的なレイアウト要素で、コンテンツを水平方向にセンタリングし、テーマから水平方向のパディングを追加します。Componentは以下のpropを受け付けます。コンテンツを水平方向に中央揃えし、テーマから水平パディングを追加する最も基本的なレイアウト要素です。
Flex	レスポンシブなプロップを提供するコンポーネントであり、基本的な方向性（column）とスマートフォン用の方向性（row）を設定できる。また、間隔を設定することも可能であり、baseやsmなどの値を使用して調整できます。
Grid	デフォルトで12列のレイアウトを使用しています。columnsプロパティをGridコンポーネントに設定することで、これを変更することができます。
Group	水平方向のflexコンテナー内の要素やコンポーネントを構成します。
MediaQuery	与えられたメディアクエリが一致する場合、子要素にスタイルを追加します。
SimpleGrid	シンプルなフレックスボックスコンテナで、各子要素はカラムとして扱われます。各列は同じ量のスペースを取り、グリッドコンポーネントとは異なり、列のスパンを制御することはできません。各子要素を列として扱うシンプルなFlexboxコンテナです。各列は等しいスペースを取り、Gridコンポーネントとは異なり、行数を指定する必要がありません。
Space	要素間に水平または垂直のスペースを追加するために使用されます。
Stack	垂直なFlexコンテナー内の要素やコンポーネントを組み合わせるためのツールであり、インポートすることができます。Stackはレイアウトを容易に行うことができ、コンテナー内の各要素の間隔を調整したり、サイズを変更したりすることが可能です。

Buttons	説明
ActionIcon	色のプロパティは、theme.colors（カラーインデックス参照を含む）のキーのみを受け入れます。disabledプロパティがtrueの場合、ルート要素にdata-disabled属性が付与されます。loadingプロパティがtrueの場合、ルート要素にdata-loading属性が付与されます。
Button	ローディング状態を制御し、Loaderコンポーネントを指定するためのプロパティ（loading、loaderPositionなど）を使用できます。ボタンやリンクをmantineテーマのボタンスタイルでレンダリングします。
CloseButton	CloseButtonは、クローズアイコンを持つプレメードのActionIconです。このコンポーネントは、ActionIconと同じプロパティを受け取り、さらにアイコンの幅と高さを制御するためのiconSizeプロパティを受け取ります。
CopyButton	use-clipboard フックに基づいています。その子要素は、次のプロパティを持つオブジェクトを受け取るボタンです。
FileButton	ファイルを選択するためのボタンを提供します。FileButtonには、追加のプロパティを渡すオプションがあり、フォームコンポーネントと組み合わせて使用することもできます。
UnstyledButton	デフォルトのボタンスタイルをリセットするために使用され、カスタムボタンを作成することができます。

Inputs	説明
Autocomplete	ユーザー入力に任意のオプションをオートコンプリートします。データオブジェクトに追加のプロパティを追加して、アイテムをフィルタリングするためのフィルタ関数を作成することで変更できます。
Checkbox	ユーザーがオプションを選択したり、状態を変更したりできます。
Chip	複数のChipを同時に選択できるようにするために、子Chipコンポーネントの状態を管理するChip.Groupコンポーネントです。
ColorInput	カラーピッカーのフォームタグを実装します。onChange コールバック関数を使用して、入力値が変更されたときにアクションを実行できます。
ColorPicker	インラインカラーピッカーです。Mantine CoreからText、Stackなどをインポートして使用できます。
FileInput	ユーザーからのファイルをキャプチャするためのAPIです。これは、ユーザーがアップロードしたファイルを取得して処理するために使用されます。
Input	カスタム入力を作成するための基本コンポーネント。（重要：他の入力のためのベースであり、直接使用するように設計されていません。）
JsonInput	Textareaコンポーネントをベースにしており、Jsonバリデーションロジックと、入力値をぼかしながらフォーマットするオプションが含まれています。
MultiSelect	カスタムアイテムコンポーネントを必要としない場合や、表示ラベルをデフォルトと異なるものにする場合に使用できる2つの異なるデータ形式をサポートしています。文字列の配列とオブジェクトの配列です。ユーザーが与えられたデータから任意の量のオプションを選択することができます。
NativeSelect	多くのオプションに限定されたユーザーのフィードバックを得ることができます。次のフォーマットのデータを受け入れます：文字列の配列（アイテムの値がラベルと同じ場合）、オブジェクトの配列。
NumberInput	小数点以下の桁数を指定して、小数点以下の値を変更できるようにするコンポーネントです。ユーザーから入力された番号をキャプチャ
PasswordInput	ユーザーからパスワードを取得し、表示/非表示を切り替え可能です。ユーザーからパスワードを取得する必要がある場合に使用します。コンポーネントは、パスワードの可視性を切り替えるオプションを提供します。
Radio	ラベルを付けたり、チェックボックスを無効にしたりすることができるReactコンポーネントです。
Rating	値を受け取ってレーティングを表示することができます。値は0から5までの小数点以下2桁までの数値で設定可能です。
SegmentedControl	アイテムコンポーネントをカスタマイズする必要がない場合やラベルを異なる表示する必要がある場合に使用する2つの異なるデータフォーマットをサポートしています。複数セグメントによる水平制御をします。
Select	ユーザーが与えられたデータから1つのオプションを選ぶことができます。NativeSelectでは不可能なカスタム値の選択を作成する必要がある場合に、このコンポーネントを使用します。与えられたデータから1つのオプションを選択することを可能にします。カスタム値の選択が必要な場合に使用します。
Slider	さまざまな値からユーザー フィードバックを取得します。
Switch	ユーザーからのブーリアン入力を取得します。
Textarea	テキストエリアをオプションのオートサイズバリアントでレンダリングします。
TextInput	ユーザーからの文字列入力をキャプチャします。
TransferList	2 つのリスト間でアイテムを移動出来ます。

Navigation	説明
Anchor	テーマ スタイルのリンクを表示します。
Breadcrumbs	指定されたセパレーターで（デフォルトでは/）を間に配置します。
Burger	開閉メニューボタンを描画します。
NavLink	ナビゲーションリンクを作ります。
Pagination	アクティブなページを表示し、複数のページ間を移動することができます。
Stepper	ステップシーケンスに分けられたコンテンツを表示します。
Tabs	タブによるビューの切り替え。すべてのタブの色を変更するにはTabsコンポーネントの色を設定し、個々のタブの色を変更するにはTabs.Tabの色を設定します。また、反転されたタブもサポートされています。

Data display	説明
Accordion	コンテンツを折りたたみ可能なセクションに分割します。
Avatar	ユーザープロフィール画像、イニシャルまたはフォールバックアイコンを表示する等の多様な機能を持っています。
BackgroundImage	画像を背景として表示します。
Badge	バッジ、ピル、タグを表示します。
Card	ImageとDividerコンポーネントのコンテキストスタイルを持つカードです。
ColorSwatch	ディスプレイの色見本を表示します。
Image	オブジェクトフィット、半径、プレースホルダーを変更するオプションを備えたimg要素のラッパーです。
Indicator	ある要素の隅に、さらなる要素を追加表示します。
Kbd	キーボードのボタンやキーの組み合わせを表示する。Ctrl + Kなどのキーストロークを表示するために使用されます。
Spoiler	コンテンツの長い部分を隠します。maxHeight プロパティを渡すと、コンテンツがスポイラーの下に隠されるポイントや、余分な部分の表示/非表示を制御できます。スポイラーとは重要な部分を暴露してしまう事です。
ThemeIcon	要素内のアイコンをテーマカラーでレンダリングします。
Timeline	イベント一覧を時系列で表示します

Overlays	説明
Affix	Portalコンポーネント内に固定位置のdiv要素をレンダリングする機能です。このコンポーネントを使用すると、画面上の任意の位置に固定された要素を表示できます。affix=添付する、貼る 書き添える
Dialog	DialogはModalコンポーネントの簡略版です。アクセシビリティやユーザビリティに配慮したModalの機能はほとんど含まれていません。ダイアログは、重要でない情報やアクションで注意を引くために使います。
Drawer	画面の任意の位置にオーバーレイ領域を表示します。
HoverCard	対象要素にカーソルを合わせたときにポップオーバー部を表示します。
LoadingOverlay	センターローダーで指定されたコンテナ上にオーバーレイする。
Menu	セカンダリーアクションのリストを1つのインタラクティブエリアにまとめることができます。
Modal	ダイアログ、ポップオーバー、ライトボックスなどを作成するための強固な基盤を提供するコンポーネントを作ります。
Overlay	指定された要素を任意の色と不透明度でdiv要素に重ね合わせます。
Popover	指定されたターゲット要素からの相対パスでポップオーバー部を表示します。
Tooltip	マウスオーバーなどのイベント発生時に、指定された要素にツールチップを表示します。

Aa Typography	説明
Blockquote	引用・転載文であることを示すタグを作ります。
Code	シンタックスハイライトを使用しないインラインまたはブロックコードです。デフォルトでは、コードの色はグレーですが、theme.colorsから任意の色に変更できます。
Highlight	文字列の一部をマークタグで強調表示します。LightとDarkのテーマをサポートしています。
List	順序付きリストまたは非順序付きリストを表示します。リストの先頭にアイコンを付けたり、ネストさせて表示したりする事が出来ます。
Mark	テキストの一部を強調表示します。
Table	テーマスタイルでテーブルをレンダリングします。
Text	テーマスタイルでテキストやリンクを表示するコンポーネントです。
Title	タイトルタグをh1-h6 での見出しで表示するコンポーネントです。
TypographyStylesProvider	htmlコンテンツにMantineのタイポグラフィースタイルを追加します。TypographyStylesProviderは、段落、見出し、リスト、引用、テーブル、リンク、画像、hr、コードおよびpreなどのスタイルを含んでいます。

Feedback	説明
Alert	重要な静的メッセージを使用してユーザーの注意を引き付けるためのツールです。
Loader	ロード中の状態を表すアイコンを表示します。サイズを制御することで高さまたは幅（バリアントによって異なります）を調整できます。事前定義されたサイズ（xs、sm、md、lg、xl）を使用するか、数値を使用してサイズを指定できます。
Notification	ユーザーへの動的な通知とアラートの表示、通知システムの一部です。
Progress	タスクの状況をユーザーにフィードバックします。、必要なプロップ値（%で埋められたバーの幅）を渡すことでバーの色を変更できます。また、例えばコンポーネントを使用してインタラクティブなプログレスバーを作成する事ができます。
RingProgress	タスクの進捗状況を円グラフでユーザーにフィードバックします。
Skeleton	コンテンツをロードするためのプレースホルダーを作成します。(プレースホルダーとは、入力欄に入力例などのテキストを薄いグレーで表示し、入力方法をユーザーに提示することができる機能です。 )

その他 (Miscellaneous)	説明
Box	sx propを使用して任意の要素やコンポーネントにインラインスタイルを追加します。
Collapse	スライドダウン トランジションを使用してアニメーションプレゼンスを実現する機能です。
Divider	水平もしくは垂直な仕切り線を引きます、太さの変更や、ラベルを追記できます。
FocusTrap	モーダルウィンドウ内のフォーカスを囲い込むためのテクニックです。これは、ユーザーがモーダルウィンドウから外部にフォーカスを移動させないようにするために使用されます。
Paper	配色によって白または暗い背景を描画します。白（または黒）の背景に、テーマの影、境界半径、パディングをレンダリングします。
Portal	現在のコンテキスト以外のコンポーネントをレンダリングします、コンポーネントや要素を異なる場所にレンダリングするためのツールであり、親のスタイルを防ぐ必要がある場合に便利です。
ScrollArea	カスタムスクロールバー付きエリアを作ります。
Transition	あらかじめ用意されたアニメーションでコンポーネントの存在をアピールします。

Mantineとは？

ReactのUIコンポーネントライブラリで、120種類以上の豊富なコンポーネントとHooksを提供しています。
使いやすさ、アクセシビリティ、開発者体験を重視したネイティブなダークテーマサポートを備えています。
ドキュメントがわかりやすく、Componentの種類が多く、アップデートの頻度が速いなどかなり優れたUIライブラリであると評価されています。

perplexityで調査

この記事はAIを用いた質問応答サービス

を利用して調査しました。
一度に全てのHooksを調査することはまだ不可能でしたので、それぞれ個別に検索・調査しました。

perplexityAI について日本語で答えてください。

Perplexity.aiは、AIを用いた質問応答サービスで、日本語にも対応している。Perplexityとは、ある事象に対して、別の事象が発生した際の頻度（確率）を対数を組み合わせて表す機械学習の指標です。

mantineの公式サイト

Mantine関連の便利なサイト

mantineの派生サイト？？？
公式にもリンクはみつからず、独自のサイトか？