material-uiとは？
GoogleのMaterialデザインをベースに開発されたUIコンポーネントライブラリ、コンポーネントが色々用意されておりそれらを組み合わせるだけでも見栄えの良いものが作れる。
バージョン
| バージョン |
リリース年月 |
説明 |
| 5 |
2021年9月 |
Theme UIやchakuraなどで用いられているsx Propsによるスタイリングになった。全てのコンポーネントがsxでスタイリングが可能。スタイリングソリューションとしてemotion、styled-componentsを使うようになった。 |
| 4 |
2019年3月 |
makeStylesなどのような独特なスタリイングが用いられていた。 |
| 3 |
|
withStylesという文法が使われていました。 |
| 1 |
2018年 |
|
ライブラリの種類
| ライブラリ名 |
説明 |
URL |
| @material-ui/core |
このライブラリだけでもほとんどのコンポーネントが使える。 |
|
| @material-ui/icons |
SVGアイコンコンポーネント集 |
https://material-ui.com/components/material-icons/ |
| @material-ui/lab |
トグルボタンなど、coreにはないコンポーネント |
|
| @material-ui/pickers |
Data Picker（カレンダーや時計UI）的なコンポーネント |
|
|
|
|
@material-ui/core
構成要素
| 構成要素 |
関数 |
説明 |
URL |
| @material-ui/core/styles |
makeStyles |
スタイルを定義しておける。 |
|
| @material-ui/core/styles |
styled |
あらかじめスタイルを当てたコンポーネントを作成しそれを利用する |
|
|
|
|
|
|
|
|
|
コンポーネント
| コンポーネント名 |
説明 |
URL |
| Box |
divやspanでCSSを当てるような感覚と同じように実装できる。 |
|
| Button |
ボタンコンポーネント |
|
| IconButton |
アイコン自体をボタンにしたもの |
|
| ButtonGroup |
ボタンをグループ化したコンポーネント |
|
| CheckBox |
チェックボックスコンポーネント |
|
| Fab |
「Floating Action Button」の略、少し浮いているボタンのようなコンポーネント |
|
| Container |
中央揃えするコンポーネント |
|
| Grid |
グリッドレイアウトを表現するためのコンポーネント |
|
| GridList |
画面をグリッドリストとして表現するコンポーネント |
|
| GridListTile |
画面をグリッドリストとして表現するコンポーネント |
|
| GridListTileBar |
画面をグリッドリストとして表現するコンポーネント |
|
| Hidden |
コンポーネントを非表示にできるコンポーネント、ブレイクポイントを設定して画面幅によって非表示にするなどできる。 |
|
| Radio |
ラジオボタンコンポーネント、FormControlLabelと組み合わせることで、ラベル付きのものも作れる。 |
|
| RadioGroup |
ラジオボタンコンポーネント、FormControlLabelと組み合わせることで、ラベル付きのものも作れる。 |
|
| Select |
セレクトボックスコンポーネント、選択肢をグルーピングできる。 |
|
| Slider |
スライダーコンポーネント |
|
| Switch |
スイッチコンポーネント、FormControlLabelと組み合わせることで、ラベル付きのものも作れる。 |
|
| Text Field |
入力ボックスのコンポーネント |
|
| BottomNavigation |
ナビゲーションコンポーネント |
|
| BottomNavigationAction |
ナビゲーションコンポーネント |
|
| Breadcrumbs |
パンくずリストコンポーネント |
|
| Drawer |
ドロワーコンポーネント、スマホでよくあるクリックすると画面を覆うような奴 |
|
| Link |
リンクコンポーネント、 |
|
| Menu |
メニューコンポーネント |
|
| MenuItem |
メニューを開いた後に表示される各項目 |
|
| Stepper |
ステップ手順を踏む表現ができるコンポーネント |
|
| StepLabel |
ステップ手順を踏む表現ができるコンポーネント |
|
| Tabs |
タブコンポーネント |
|
| AppBar |
ヘッダーに使えるコンポーネント |
|
| ToolBar |
ヘッダーに使えるコンポーネント |
|
| Paper |
積み重なった紙の表現ができるコンポーネント |
|
| Card(その他多数） |
カードコンポーネント、文字だけでなく画像も入れられる。 |
|
| ExpansionPanel |
ハンバーガーメニューのコンポーネント |
|
| CircleProgress |
プログレスバーのコンポーネント |
|
| LinerProgress |
プログレスバーのコンポーネント |
|
| Dialog（その他多数） |
Buttonと組み合わせて使い、クリックされた際にメッセージを表示する。 |
|
| Snackbar |
スナックバーコンポーネント |
|
| Backdrop |
アプリの状態変化を表現できる。背景のコンポーネント |
|
| Avatar |
アバターコンポーネント、画像や名称を指定する。 |
|
| Badge |
バッジコンポーネント 、通知を表現できたりする。 |
|
| Chip |
チップコンポーネント、入力、属性、アクションを表現できる。 |
|
| Divider |
線(hr)を表現できるコンポーネント |
|
| List（その他多数） |
リスト表示を表現できるコンポーネント |
|
| Table(その他多数） |
テーブル表示を表現できるコンポーネント |
|
| ToolTip |
コンポーネントをホバーした際に簡易説明を表示する表現が可能 |
|
| Typography |
文字表示を表現できるコンポーネント |
|
| NoSsr |
ラップしたコンポーネントをSSRから外すコンポーネント |
|
| Popover |
ポップオーバーコンポーネント 、コンテンツを別コンテンツの上に表示する表現の際に使える。 |
|
| Popper |
ポッパーコンポーネント 、コンテンツを別コンテンツの上に表示する表現の際に使える。 |
|
| Portal |
ラップしたコンポーネントを現在のDOM階層外の新しいサブツリーにレンダリングすることに使う。 |
|
| Collapse |
ラップしたコンポーネントを上から下へ表示させる表現ができるコンポーネント |
|
| Fade |
ラップしたコンポーネントで、フェードイン、フェードアウトを表現できるコンポーネント |
|
| Grow |
ラップしたコンポーネントを順番にフェードインするような表現ができるコンポーネント |
|
| Slide |
ラップしたコンポーネントをスライド表示する表現ができるコンポーネント |
|
| Zoom |
ラップしたコンポーネントが、要素の中心から外側に広がるように表示する（もしくはその逆）表現ができるコンポーネント |
|
|
|
|
|
|
|
|
|
|
@material-ui/lab
コンポーネント
| コンポーネント名 |
説明 |
URL |
| Alert |
アラートコンポーネント |
|
| AutoComplete |
オートコンプリート、サジェスト入力 |
|
| Pagination |
ページネーション |
|
| Rating |
レーティング（評価）ができる |
|
| Skelton |
コンテンツ読み込み中にスケルトン表示できるコンポーネント |
|
| SpeedDial |
スピードダイヤル |
|
| ToggleButton |
トグルボタン |
|
| TreeView |
ツリービューを表現できるコンポーネント |
|
|
|
|
スポンサーリンク
この記事へのコメントはありません。