見出し画像

MUI (Material-UI) の主要コンポーネント早見表

個人的に使いたいのでおすそ分け的な感じです。

  • <Card>: 情報をまとめて表示するためのボックス。

  • <Button>: クリック可能なボタン。

  • <Typography>: テキストのスタイリング (見出し、本文など) に使用。

  • <Grid>: レイアウトを構築するためのグリッドシステム。

  • <TextField>: テキスト入力フィールド。

  • <AppBar>: ナビゲーションバーやヘッダー。

  • <Toolbar>: ツールバーやAppBarの中で使用するコンテナ。

  • <IconButton>: アイコン付きのボタン。

  • <Drawer>: スライドするサイドメニュー。

  • <Snackbar>: 一時的にメッセージを表示する通知バー。

  • <Dialog>: モーダルウィンドウ(ポップアップ)。

  • <Checkbox>: チェックボックス。

  • <Radio>: ラジオボタン(1つだけ選択可能なオプション)。

  • <Switch>: トグルスイッチ(オン/オフ)。

  • <Slider>: 数値を調整するスライダー。

  • <Paper>: 紙のような背景コンテナ。

  • <Avatar>: ユーザーのアイコンや画像表示。

  • <Container>: 中央に寄せたレイアウトを作るためのコンテナ。

  • <Box>: フレックスボックスやレイアウトの調整に使う汎用コンテナ。

  • <FormControl>: フォームの入力コンポーネント(TextFieldなど)をラップするコンテナ。

  • <Select>: ドロップダウンメニュー(選択リスト)。

  • <MenuItem>: Selectの中で使う選択肢。

  • <Table>: データを表形式で表示するテーブル。

  • <TableRow>: テーブルの行。

  • <TableCell>: テーブルのセル。

  • <Tabs>: ページ内でタブ式にコンテンツを切り替える。

  • <Tab>: 個別のタブ。

  • <Tooltip>: ホバー時に表示されるツールチップ(補足情報)。

  • <CircularProgress>: ローディングを示す円形のスピナー。

  • <LinearProgress>: ローディングを示す横棒のスピナー。

  • <Badge>: アイコンやテキストに小さなバッジ(通知数など)を表示。

  • <Chip>: ラベルやタグのような要素。

この記事が気に入ったらサポートをしてみませんか?