【React TypeScript】Material UIのCardとCollapseを使って、内容を展開できるカードを作ってみよう!

【React TypeScript】Material UIのCardとCollapseを使って、内容を展開できるカードを作ってみよう!
  • URLをコピーしました!

今回は、Material UIを使って内容を展開できるCardを作成してみようと思います。
Cardに表示したい内容が多い場合は、開閉式のCardを作成しておくと便利ですので、ぜひ試してみてください!

まだ、React TypeScriptの開発環境を未構築の方は、「ReactとTypeScriptとRedux Toolkitの開発環境構築をしよう!」を参考にしてみてください!

本記事はReact・TypeScript・Redux Toolkitの利用を前提に実装をしていきます。
構築からデプロイまでやっていきますので、必要に応じて他の記事も参考にしてみてください。

学習に使った本はこちら!

¥519 (2022/06/25 09:17時点 | Amazon調べ)
\楽天ポイント5倍セール!/
楽天市場
¥6,490 (2022/06/25 10:22時点 | Amazon調べ)
\楽天ポイント5倍セール!/
楽天市場
\楽天ポイント5倍セール!/
楽天市場
¥700 (2022/06/24 15:55時点 | Amazon調べ)
\楽天ポイント5倍セール!/
楽天市場
クマじい

Amazon Kindle Unlimited でもReactの本はいっぱいあるぞ!

  • 技術書をたくさん読みたい!
  • 色々な技術を学びたい!
初回30日間無料体験があるので、どのような参考書があるか確認してみよう!

Kindle Unlimitedで技術書を読むならタブレットがあるとさらに便利ですよ!
10インチあるとより見やすいと思いますが、7インチでも十分見やすくなります!

¥9,980 (2022/06/23 23:52時点 | Amazon調べ)
\楽天ポイント5倍セール!/
楽天市場
¥15,980 (2022/06/24 09:39時点 | Amazon調べ)
\楽天ポイント5倍セール!/
楽天市場
目次

Cardを実装する!

早速ですが、内容を開閉できるカードを作っていきましょう!

ファイルを作成する。

まずは、Cardを実装するためのファイルを作成しておきましょう。

  • components>mobules>cards>textCardにTextCard.tsxを追加
  • components>mobules>cards>textCardにTextCard.module.scssを追加

内容を開閉できるカードを作る。

続いて、TextCard.tsxに内容を開閉できるカードを作成します。

  • 開閉の状態(State)を管理する。(今後はRedux Toolkitで管理するが、今はコンポーネント内で定義)
    const [expanded, setExpanded] = React.useState(false);
    const handleExpandClick = () => {
      setExpanded(!expanded);
    };
  • 開かずに見せる内容は、in={!expanded}に配置する。
    <Collapse in={!expanded} timeout=”auto” unmountOnExit>
      <Typography variant=”body1″>
        [開かずに見せる内容]
      </Typography>
    </Collapse>
  • 開いたら見せる内容は、in={expanded}に配置する。
    <Collapse in={expanded} timeout=”auto” unmountOnExit>
      <Typography variant=”body1″>
        [開いたら見せる内容]
      </Typography>
    </Collapse>
  • 開閉の状態を変更するボタンを定義。
    <Button
      fullWidth
      onClick={handleExpandClick}
      startIcon={expanded ? <ExpandLessIcon /> : <ExpandMoreIcon />}
      className={styles.icon_button}
    >
      {expanded ? “LESS” : “MORE”}
    </Button>
import React from "react";
// material-ui
import {
  Card,
  CardHeader,
  CardContent,
  Divider,
  Typography,
  Button,
  Collapse,
} from "@material-ui/core";
import {
  ExpandMore as ExpandMoreIcon,
  ExpandLess as ExpandLessIcon,
} from "@material-ui/icons";
// styles
import styles from "./TextCard.module.scss";

const TextCard = (): JSX.Element => {

  const [expanded, setExpanded] = React.useState(false);
  const handleExpandClick = () => {
    setExpanded(!expanded);
  };

  return (
    <div className={styles.root}>
      <Card className={styles.card}>
        <CardHeader
          title={<Typography variant="h5">TextCard</Typography>}
          subheader="テキストカード"
          className={styles.card_header}
        />
        <Divider />
        <CardContent className={styles.card_content}>
          <Collapse in={!expanded} timeout="auto" unmountOnExit>
            <Typography variant="body1">
              100文字は開かずにみれるようにしよう!!
            </Typography>
          </Collapse>
          <Collapse in={expanded} timeout="auto" unmountOnExit>
            <Typography variant="body1">
              ここには全行表示してあげよう!!!!!!!!!!!!!
              !!!!!!!! 自由記入欄
            </Typography>
          </Collapse>
        </CardContent>
        <div className={styles.button_wrapper}>
          <Button
            fullWidth
            onClick={handleExpandClick}
            startIcon={expanded ? <ExpandLessIcon /> : <ExpandMoreIcon />}
            className={styles.icon_button}
          >
            {expanded ? "LESS" : "MORE"}
          </Button>
        </div>
      </Card>
    </div>
  );
};

export default TextCard;

スタイルを修正する。

Cardのスタイルを修正したいので、TextCard.module.scssを修正しましょう!
とはいえ、今回は大した修正をするつもりはないので、背景色のみ変更しておきます。

  • 背景色を変更
    background-color: salmon;
.root {
  .card {
    background-color: salmon;
  }
}

Sample1Pageを修正する。

前回の記事を見てくれている方は、Sample1Page.tsxでTextCard.tsxをインポートして表示してあげましょう!
もし、この記事から見ている方は、Cardを表示したいコンポーネントでインポートしてあげてください。

  • 詳細は省略しますが、追加したコードのみ挙げておきます。
  • import TextCard from “../../modules/cards/textCard/TextCard”;
  • <TextCard />
import React from "react";
// react-router-dom
import { RouteComponentProps } from "react-router-dom";
import { Link } from "react-router-dom";
import { Path } from "../../../Routes";
// material-ui
import Grid from "@material-ui/core/Grid";
// styles
import styles from "./Sample1Page.module.scss";
// components
import ProfileCard from "../../modules/cards/profileCard/ProfileCard";
import PiechartCard from "../../modules/cards/piechartCard/PiechartCard";
import ChipCard from "../../modules/cards/chipCard/ChipCard";
import TextCard from "../../modules/cards/textCard/TextCard";

type PropsTypes = RouteComponentProps;

const Sample1Page = ({ history }: PropsTypes): JSX.Element => {
  return (
    <div className={styles.root}>
      <Grid container spacing={3}>
        <Grid item xs={6}>
          <ProfileCard />
        </Grid>
        <Grid item xs={6}>
          <PiechartCard />
        </Grid>
        <Grid item xs={3}>
          <ChipCard />
        </Grid>
        <Grid item xs={3}>
          <TextCard />
        </Grid>
        <Grid item xs={3}>
          <TextCard />
        </Grid>
        <Grid item xs={3}>
          <TextCard />
        </Grid>
      </Grid>
    </div>
  );
};

export default Sample1Page;

動作確認をする。

ここまでできたら動作確認してみましょう!

ピンクのカードが開閉で表示される内容が変わっているのが確認できたと思います!
今回はこれで完了となりますが、工夫次第ではもっと実用的なものも作成できるので試してみてください!

クマじい

利用する場面は多そうじゃの!

まとめ

今回は、Material UIを使って内容を展開できるCardを作成してみました。
実用性が高いので、様々な場面で活躍してくれると思います!ぜひ色々工夫してみてください!

本記事はReact・TypeScript・Redux Toolkitの利用を前提に実装をしていきます。
構築からデプロイまでやっていきますので、必要に応じて他の記事も参考にしてみてください。

また、今回のReactを勉強するにあたり利用した教材をあげています。
主に本(Amazon Unlimitedを含む)とUdemyの動画教材を利用しています。ここには私なりに理解した内容をもとに独自に内容を考えて共有しているので興味ある方は、本やUdemyを購入して勉強してみることをおすすめします。

学習に使った本はこちら!

¥519 (2022/06/25 09:17時点 | Amazon調べ)
\楽天ポイント5倍セール!/
楽天市場
¥6,490 (2022/06/25 10:22時点 | Amazon調べ)
\楽天ポイント5倍セール!/
楽天市場
\楽天ポイント5倍セール!/
楽天市場
¥700 (2022/06/24 15:55時点 | Amazon調べ)
\楽天ポイント5倍セール!/
楽天市場
クマじい

Amazon Kindle Unlimited でもReactの本はいっぱいあるぞ!

  • 技術書をたくさん読みたい!
  • 色々な技術を学びたい!
初回30日間無料体験があるので、どのような参考書があるか確認してみよう!

Kindle Unlimitedで技術書を読むならタブレットがあるとさらに便利ですよ!
10インチあるとより見やすいと思いますが、7インチでも十分見やすくなります!

¥9,980 (2022/06/23 23:52時点 | Amazon調べ)
\楽天ポイント5倍セール!/
楽天市場
¥15,980 (2022/06/24 09:39時点 | Amazon調べ)
\楽天ポイント5倍セール!/
楽天市場
【React TypeScript】Material UIのCardとCollapseを使って、内容を展開できるカードを作ってみよう!

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!

この記事を書いた人

東京在住で20代のエンジニアです。
特に特技があるわけではありませんが、誰もが楽しくプログラミングができたらいいと思い、「teech lab.」を開設いたしました。

Enjoy Diaryという、ガジェットや雑貨を紹介しているブログもあります!
ぜひ、みてください!!

目次
閉じる