はじめに
今日もMaterialUIやっていきます。
コピペの前にnpmインストールを忘れずに！
npm install @material-ui/core@4.12.3 npm install @material-ui/icons@4.11.2
2021/8/5での最新なので気をつけてください。
MaterialUIのCardを使ったデザインまとめ
シンプルなデザイン
See the Pen React_MaterialUI_Practical by atsushiIMG (@atsushiimg) on CodePen.
コンポーネントの説明
- Card カードを作るにあたっての１番の親コンテナ
属性に’variant=”outline”‘を指定してあげることで、カードのボーダー線が出力されるようになる。
属性に’class’を指定し、定義済のStyleの中で’Backcolor’を指定することでカード全体のカラーが変わるようになる。
- CardHeader カード内のヘッダー。「title」属性でカードのタイトル、「subHeader」属性でカードのサブタイトルを描画できる
- CardContent カード内のコンテンツ。Typographyと一緒に使うんですかね。
- CardAction カード内にボタンを設定することができる。この中に”Link”や”Button”を指定し、Action先を設定することで画面の遷移を実現する。
- 上記デザインではLinkのhref属性を指定してGoogle検索画面への遷移を実現している（codepen上だと動かない恐れ）
instagram風のデザイン
ソースコードはこちら↓
import React from 'react';
import { Card, CardHeader, CardMedia, CardContent, Typography, makeStyles, Avatar, IconButton, CardActions} from '@material-ui/core';
import logo from '../img/kaden_reizouko_open.png';
import { black } from 'jest-matcher-utils/node_modules/chalk';
import MoreVertIcon from '@material-ui/icons/MoreVert';
import FavoriteIcon from '@material-ui/icons/Favorite';
import ShareIcon from '@material-ui/icons/Share';
import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
import clsx from 'clsx';
import Collapse from '@material-ui/core/Collapse';
const useStyles = makeStyles((theme) => ({
root: {
maxWidth: 230,
backgroundColor: "lightsteelblue"
},
media: {
height: 0,
paddingTop: '56.25%', // 16:9
},
avatar: {
backgroundColor: "red",
},
expand: {
transform: 'rotate(0deg)',
marginLeft: 'auto',
transition: theme.transitions.create('transform', {
duration: theme.transitions.duration.shortest,
}),
},
expandOpen: {
transform: 'rotate(180deg)',
},
}));
const CleaningCard = () => {
const classes = useStyles();
const [expanded, setExpanded] = React.useState(false);
const handleExpandClick = () => {
setExpanded(!expanded);
};
return (
<Card className={classes.root}>
<CardHeader
avatar={
<Avatar aria-label="recipe" className={classes.avatar}>
R
</Avatar>
}
title="冷蔵庫"
subheader="難易度 ★★★"
action={
<IconButton aria-label="settings">
<MoreVertIcon />
</IconButton>
}
/>
<CardMedia
className={classes.media}
// image="./src/img/kaden_reizouko_open.png"
image={logo}
title="refrigerator"
/>
<CardContent>
<Typography variant="body2" color="textSecondary" component="p">
頻繁にものを出し入れする冷蔵庫は意外と汚れがちです。
定期的に掃除しないと雑菌まみれの食材を食べているようなものです。
</Typography>
</CardContent>
<CardActions disableSpacing>
<IconButton aria-label="add to favorites">
<FavoriteIcon />
</IconButton>
<IconButton aria-label="share">
<ShareIcon />
</IconButton>
<IconButton
className={clsx(classes.expand, {
[classes.expandOpen]: expanded,
})}
onClick={handleExpandClick}
aria-expanded={expanded}
aria-label="show more"
>
<ExpandMoreIcon />
</IconButton>
</CardActions>
<Collapse in={expanded} timeout="auto" unmountOnExit>
<CardContent>
<Typography paragraph>
これはMateriaUIのCollapseタグによって構成できます
</Typography>
<Typography paragraph>
paragraphで段落を変えています。
カードの詳細な情報を書くなどすると良いでしょう！
</Typography>
</CardContent>
</Collapse>
</Card>
)
}
export default CleaningCard;こちらもcodepen実装をしたかったのですが、どうにも「material-ui/icons」がインポートできなく、断念しました。（原因知っていたら教えてください…）
コンポーネントの説明
- iconButtonとXXXIcon XXXIconをiconButtonでラップしてあげることでボタンらしいエフェクトやレイアウトになります。
ボタンの種類がすごく多いです！今のところ無料でも使えている。
- Collapse ボタンを押下すると、下に詳細を展開させるようなUIを構築してくれる。
詳細が少し難しいためざっくり話します。読み飛ばしても構いません。（私自身もまだまだです…）
動きの流れ
“in”属性にはhookのsetStateで宣言した変数を入れておく。
【Collapseが展開される時】
ExpandMoreIconタグのラッパーであるiconButtonにonClickメソッドで”handleExpandClick”があるため、クリックした時に、”handleExpandClick”が呼び出され、setStateによってexpandedの値が現在のexpandedの逆に書き換えられる（trueならfalse、逆も然り）
それにより、Collapse内の”in”属性の値がtrueになり、展開されるという仕組み。
setStateについてもっと学びたい方
シンプルかつ動きもつけたデザイン
シンプルではありますが、画像をクリックすることができ、少し動きをつけたデザインとなっています。
See the Pen react_materiaui_practical2 by atsushiIMG (@atsushiimg) on CodePen.
コンポーネントの説明
- CardActionArea このコンポーネントにラップされているものを対象にクリックが可能である。
まとめ
MaterialUIを使った多くのカードデザインを見てきました。
手軽でありスタイリッシュなデザインが多く用意されており、非デザイナーでも納得のいく出来上がりで嬉しいです。
今後はそれぞれのコンポーネントの属性について触れて行けたら良いなと思います。
終わり
コメント