Mantine 入門3 主要パーツ一覧
ここではMantine Coreコンポーネントの概要を一覧で示します。
MANTINEの公式ホームページの左サイドーバーの目次のところにMANTINE CORE を探してクリックするとそれぞれのコンポーネントにアクセスできます。
Layout一覧
AppShell
ヘッダとナビゲーションをもつ骨格です。
AspectRatio
子要素のImageやIframのアスペクト比を設定すると、サイズを自動調整します。
Center
子の要素を上下左右で中央よせします。
Container
子の要素を左右で中央よせします。
Grid
子の要素を横に並べるレイアウトです。画面をX方向に最大12spanで定義し、12spanごとに改行します。
Group
複数の子要素を水平にグループ化して均等に並べます。
MediaQuery
メディアクエリに該当した場合、子要素にスタイルを適用します。
SimpleGrid
子の要素を同一サイズで横に並べるレイアウトです。列数を指定できます。
Space
要素の間に縦と横いずれかにスペースを入れます。
Stack
子の要素をコンテナに入れて縦に並べます。
Button一覧
ActionIcon
アイコンのボタンです。
Button
普通のボタンです。
CloseButton
閉じるボタンです。
CopyButton
クリップボードに文字列をコピーさせるボタンです。
FileButton
ファイルダイアログを表示するボタンです。
UnstyledButton
カスタムボタンを作るためのスタイルが空のボタンです。
Input一覧
Autocomplete
選択肢のリストを使って入力補助するテキスト入力行です。
Checkbox
チェックボックスです。
Chip
複数の選択肢から1つ（複数も可能）を選ばせるボタンです。
ColorInput
RGBをグラフィカルに選択させます。
ColorPicker
rgbaをグラフィカルに選択させます。
FileInput
ファイル選択ダイアログを表示するテキスト入力行です。
Input
カスタムの入力行を作成するためのコンポーネントです。
JsonInput
Json入力専用のテキスト入力領域です。
MultiSelect
複数の値を選択できる入力です。
NativeSelect
通常の選択入力です。
NumberInput
数を入力させます。
PasswordInput
パスワードを入力させます。
Radio
ラジオボタンです。グループ化し、グループ内でひとつ選ばせることもできます。
SegmentedControl
複数の中からひとつを選ばせるコンパクトな入力です。
Select
カスタマイズ可能な選択入力です。
Slider
スライダーです。ひとつの値を指定したり、最大値と最小値の範囲を指定できます。
Switch
ONOFFスイッチです。
Textarea
テキスト入力範囲です。
TextInput
テキスト行を入力させます。
TransferList
2つのリスト間でアイテムを移動させます。検索もできます。
ナビゲーション一覧
Anchor
"a"要素を持ったハイバーリンクが貼れるTextです。
Breadcrumbs
パンくずリストです。
Burger
開く、閉じるの状態を保つボタンです。トップメニューボタンとして使われます。
NavLink
MantineでのLinkです。
Pagination
たくさんのシリーズのページがある場合に使われる、番号になったリンクです。
Stepper
チュートリアルなどで見かける、コンテンツをステップに分けて表示するナビゲーションです。
Tabs
タブです。
データ表示一覧
Accodion
アコーディオンのように複数のコンテンツの一つだけを開きます。
Avater
アバターアイコンを表示します。画像やマークを使えます。
BackgroundImage
子要素の後ろのバックグランドを指定します。
Badge
小さな文字を表示します。アバターなどを組み込めます。
Card
画像と文字のコンテンツを一つのカードにまとめたフレームです。
ColorSwatch
色を複数並べて表示します。
Image
画像を表示します。キャンプションや角の丸めなどができます。
Indicater
他の要素の角に丸などを表示し強調します。
Kbd
キーボードのキーの中に文字を表示し、キーの組み合わせなどを表現します。
Spoiler
指定高さ以上の子要素の一部を隠したり全部を表示したりします。
Themelcon
テーマカラーで要素内にアイコンを表示します。
Timeline
時系列のイベントをリスト表示します。
オーバーレイ表示
Affix
子要素をポータル（上のレイヤー）の固定位置に表示します。
Dialog
スクリーンの角にシンプルなダイアログを表示します。
Drawer
いずれかのサイドから飛び出すオーバーレイを表示します。
HoverCard
指定した要素の上にカードを表示します。
LoadingOverlay
処理中を示すオーバーレイマスクを表示します。
Menu
オーバーレイでメニューリストを表示します。
Modal
一般的なモーダルダイアログを表示します。
Overlay
オーバーレイマスクを表示します。
Popover
指定した要素から吹き出し付きカードを表示します。
ToolTip
小さなチップを表示します。
文字表示（タイポグラフィー）一覧
Blockquote
引用を表示します。
Code
ハイライトなしのコードを表示します。ハイライト付きのコード表示が必要な場合は@mantine/prismを使います。
Highlight
指定した単語をハイライトしたテキストを表示します。下記のTextとMarkの組み合わせです。
List
順序なし、順序ありの箇条書きリストを表示します。
Mark
Textコンポーネント内で囲った文字をハイライトします。
Table
表を表示します。
Text
テーマのスタイルで文字を表示します。サイズ、色、幅、下線、イタリックなどを設定できます。
Title
h1からh6までのタイトルを表示します。
フィードバック 一覧
Alert
固定の警告を表示します。
Loader
ロード中であることを示します。
Notification
さまざまな通知を示します。
Progress
プログレスバーを表示します。
RingProgress
プログレスリングを表示します。
Skeleton
ロード中のコンテンツの代替スケルトンを表示します。
その他
Box
sxを使ってスタイルをインラインで変更するための囲いです。
Collapse
囲った領域の表示をONOFFします。
Divider
水平線を表示します。
FocusTrap
入力用の子要素を囲いフォーカストラップを設定します。フォーカストラップ：タブキーを押していくとその範囲内でフォーカスが回ります。再選択された入力要素のカーソル位置が保存されています。などなどの入力支援。
Paper
基本的な影付きの背景です。カードやモーダルなど、影付きの背景を必要とするコンポーネントで使われています。
Portal
現在のコンテキストの外に要素を表示します。（モーダルやドロワーはデフォルトでPortalにラップされています。）
ScrollArea
囲った部分をスクロールエリアにします。
Transition
コンポーネントの出現と消滅をアニメーションさせます。
この記事が気に入ったらサポートをしてみませんか？