React + material-ui(MUI)でCardコンポーネントを使ってみる

19:14

ReactでMarkdownアプリを作っています。今回はトップの画面に表示するMarkdownのメモをカード型にして表示します。

material-ui(MUI)のカード機能について興味のある方はご覧ください。

前回の内容は以下を参照してください。

今回の手順は以下のとおりです。

カード用のコンポーネントについて

カード用のコンポーネントについて確認します。

カード用のコンポーネントの詳細は以下のページをご覧ください。

https://mui.com/material-ui/react-card/

Basic cardを参考にします。

カード用のリストコンポーネント作成

カード用のリストコンポーネントを作成します。

作成する場所は、「components/uilibs/organisms」の配下です。

ファイル名は、「MarkdownCardList.tsx」とします。

    
project/
　┣ front/
　┃　┣ Dockerfile
　┃　┗ src/
　┃　　　┗ markdown-app/
　┃　　　　　┗ src/
　┃　　　　　　　┣ components/
　┃　　　　　　　┃　┗ uilibs/
　┃　　　　　　　┃　　　┗ organisms/
　┃　　　　　　　┃　　　　　┗ MarkdownCardList.tsx
・・・略・・・

ファイルの内容です。

    
import { FC } from "react";

import { Grid } from "@mui/material";

import { MarkdownType } from "../../../types/MarkdownType.type";
import { MarkdownCard } from "../molecules/MarkdownCard";

interface Props {
  markdowns: Array<MarkdownType>;
}

export const MarkdownCardList: FC<Props> = (props) => {

  const { markdowns } = props;

  return (
    <Grid container spacing={2}>
      {markdowns.map((markdown) => { return <MarkdownCard key={markdown.url} markdown={markdown} /> })}
    </Grid>
  );
};

カードを横に並べて表示します。表示のためにGridを使います。

Gridのコンポーネントの説明は省略します。

Gridタグの中でマークダウンの情報をmapを使って繰り返し処理をします。

ここで、次に作成するマークダウンのカードのコンポーネントを呼び出します。

カード用のコンポーネント作成

カード用のコンポーネントを作成します。

作成する場所は、「components/uilibs/molecules」の配下です。

ファイル名は、「MarkdownCard.tsx」とします。

    
project/
　┣ front/
　┃　┣ Dockerfile
　┃　┗ src/
　┃　　　┗ markdown-app/
　┃　　　　　┗ src/
　┃　　　　　　　┣ components/
　┃　　　　　　　┃　┗ uilibs/
　┃　　　　　　　┃　　　┣ molecules/
　┃　　　　　　　┃　　　┃　┗ MarkdownCard.tsx  
　┃　　　　　　　┃　　　┗ organisms/
　┃　　　　　　　┃　　　　　┗ MarkdownCardList.tsx
・・・略・・・

MarkdownCard.tsxファイルの内容です。

    
import { FC } from "react";

import {
  Card,
  Typography,
  Button,
  CardContent,
  CardActions,
  Grid
} from "@mui/material";

import { MarkdownType } from "../../../types/MarkdownType.type";
import { useNavigate } from "react-router-dom";

interface Prpps {
  markdown: MarkdownType;
}

export const MarkdownCard: FC<Prpps> = (props) => {

  const { markdown } = props;

  const navigate = useNavigate();

  const onClickLink = () => { navigate(markdown.url) };

  return (
    <Grid item xs={3}>
      <Card color="secondary" sx={{ minWidth: 275, height: 300, }}>
        <CardContent sx={{ minWidth: 275, height: 150, overflow: "hidden" }} >
          <Typography variant="h5" component="div" sx={{ paddingBottom: "20px" }}>
            {markdown.title}
          </Typography>
          <Typography variant="body1" >
            {markdown.body}
          </Typography>
        </CardContent>
        <CardActions sx={{ padding: "20px 10px"}}>
          <Button size="small" variant="contained" color='secondary' onClick={onClickLink} >もっと見る</Button>
        </CardActions>
      </Card>
    </Grid>
  );
};

全体をGridのitemを使い囲みます。

Gridのコンポーネントの説明は省略します。

Gridタグの中でCardのコンポーネントを使います。

Cardタグの中をCardContentとCardActionsで囲みます。

エディット画面のテンプレートのイメージです。

表示画面のテンプレートのイメージです。

CardContent

CardActions

CardContentにmarkdownのタイトルと本文を表示します。

CardActionsにボタンタグを表示します。

ボタンをクリックするとマークダウンのページに遷移するようにコーディングします。