TypeScriptでMaterial-UI練習帳 〜 Grid 〜

技術情報

Gridレイアウトコンポーネントを使ってみる練習。
Appはこんな感じ。

const App = () => {
  return (
    <div>
      <CssBaseline />
      <NavigationBar />
      <BookMarks />
    </div>
  );
}

NavigationBar の中身は省略(Material-UIのサンプルをほぼほぼコピって作成)。
BookMarksコンポーネントの中身は以下。

import React, { FunctionComponent, useState } from "react";
import { makeStyles, createStyles, Theme, Grid } from '@material-ui/core';
import { BookMark } from "./BookMark";

const useStyles = makeStyles((theme: Theme) =>
  createStyles({
    bookMarks: {
      padding: "10px 10px 10px 10px"
    }
  }));

interface Link {
  link: string;
  text: string;
}

export const BookMarks: FunctionComponent = () => {
  const classes = useStyles();
  const [links, setLinks] = useState(
    [
      { link: "https:/yahoo.co.jp", text: "Yahoo" },
      { link: "https://google.co.jp", text: "Google" },
      { link: "https://www.amazon.co.jp/", text: "Amazon" },
      { link: "https://qiita.com/", text: "Qiita" },
      { link: "https://www.shoeisha.co.jp/", text: "翔泳社" },
    ]);
  const items = links.map((link) => {
    return (
      <Grid item xs={12} md={4} className={classes.bookMarks}>
        <BookMark {...link} />
      </Grid>
    )
  })
  return (
    <Grid container>
      {items}
    </Grid>
  )
}

Gridコンポーネントはcontainer属性を付与したコンテナのGridタグ(35行目)の中に、item属性を付与したアイテムのGridタグ(29行目)を複数個配置するようになっている。

Gridのレイアウトは12カラムのレスポンシブデザインとなっている。xs属性にはデフォルトで何カラム分を割り当てるかを指定する。モバイルファーストなので、スマホで見たときのカラム数。
上のコード例では、md属性を指定して中くらいのサイズ(960dp〜)では1行3アイテムで表示されるようにしている。

小さいサイズ
大きいサイズ

コメント

タイトルとURLをコピーしました