Material-u Cardコンポーネントについて

12860 ワード
next.js React material-ui React テキストリンク

Card API

material-uiの勉強をかねてCardコンポーネントとについてまとめました。
カードコンポーネントを使用しプロフィールを作成

index.jsx
import Card from "@material-ui/core/Card";

export default function ProfileCard() {
const useStyles = makeStyles((theme) => ({
  root: {
    margin: "16px",
    maxWidth: 445,
  },
});
return (
   <>
     <Card className={classes.root}>
       test
     </Card>
   </>
 )
}

CardHeader API

使用したプロパティ

(avatar、title、subheader、action)

index.jsx
// JSX
<CardHeader
          className={classes.avatar}
          avatar={<Avatar aria-label="avatar" src={avatarURL} />}
          title="タイトル"
          subheader="サブタイトル"
          action={
          <IconButton aria-label="settings">
            <MoreVertIcon />
          </IconButton>
         }
 />

avatar={<Avatar aria-label="avatar" src={avatarURL} />}

srcに設定してあるurlは、gravatarを使用

CardContent、Typography、CardContent　API

https://material-ui.com/api/card-media/#cardmedia-api
https://material-ui.com/api/card-content/#cardcontent-api
https://material-ui.com/components/typography/#typography

index.jsx
<CardMedia className={classes.media} image={kyoto.jpg} />
<CardContent>
          <Typography variant="inherit" color="textSecondary" component="p">
            Kiyomizu is one of Kyoto's leading tourist destinations, and
            its illumination is also popular, so you will have to wait in line
            during the season, but there are still scenery worth seeing. This
            time I would like to introduce its charm.
          </Typography>
</CardContent>

対象のソースコード

index.jsx
import {Card,CardHeader,CardMedia,CardContent,Avatar,Typography,} from "@material-ui/core";

const useStyles = makeStyles((theme) => ({
  root: {
    margin: "16px",
    maxWidth: 445,
  },
  media: {
    height: 0,
    paddingTop: "50%",
  },
});

export default function ProfileCard() {

  const avatar = require("gravatar");
  const avatarURL = avatar.url("メールアドレス", { protocol: "https" });

return (
   <>
     <Card className={classes.root}>
     <CardHeader
          avatar={<Avatar aria-label="avatar" src={avatarURL} />}
          title="Sakamoto"
          subheader="November"
          action={
          <IconButton aria-label="settings">
            <MoreVertIcon />
          </IconButton>
          }
     />
     <CardMedia className={classes.media} image={kyoto.jpg} />
        <CardContent>
          <Typography variant="inherit" color="textSecondary" component="p">
            Kiyomizu is one of Kyoto's leading tourist destinations, and
            its illumination is also popular, so you will have to wait in line
            during the season, but there are still scenery worth seeing. This
            time I would like to introduce its charm.
          </Typography>
       </CardContent>
     </Card>
   </>
 )
}