React+Material-UIで簡単にGridレイアウトが出来た

14598 ワード
React MaterialUI React テキストリンク

概要

  • ReactのためのUIコンポーネントライブラリであるMaterial-UIを使ったら簡単にGridレイアウトを作れたので、試したいくつかの事を書きます。
  • 公式ドキュメントが非常に充実しているので、細かいことは書きません
  • 最近Reactに触れた新参者なので、(特にts周り)おかしかったらすみません

下準備

$ npx create-react-app . --template typescript
$ npm install @material-ui/core
$ npm start

ディレクトリ構成

src
├── components
│   ├── GridList.tsx
│   └── tileData.ts
├── img
│   ├── neko1.jpg
│   ├── neko2.jpg
│   ├── neko3.jpg
│   ├── neko4.jpg
│   └── neko5.jpg
└── App.tsx

Instagram風? 写真のGridList

src/components/GridList.tsx
import React from 'react';
import { Theme, createStyles, makeStyles } from '@material-ui/core/styles';
import GridList from '@material-ui/core/GridList';
import GridListTile from '@material-ui/core/GridListTile';
import GridListTileBar from '@material-ui/core/GridListTileBar';
import ListSubheader from '@material-ui/core/ListSubheader';
import tileData from './tileData';

const useStyles = makeStyles((theme: Theme) =>
  createStyles({
    root: {
      display: 'flex',
      flexWrap: 'wrap',
      justifyContent: 'space-around',
      overflow: 'hidden',
      backgroundColor: theme.palette.background.paper,
    },
    gridList: {
      width: 500,
      height: 700,
    },
  }),
);

const TitlebarGridList: React.FC = () => {
  const classes = useStyles();
  return (
    <div className={classes.root}>
      <GridList cellHeight={200} className={classes.gridList}>
        <GridListTile key="Subheader" cols={2} style={{ height: 'auto' }}>
          <ListSubheader component="div">かわいいねこ</ListSubheader>
        </GridListTile>
        {tileData.map((tile) => (
          <GridListTile key={tile.img}>
            <img src={tile.img} alt={tile.title} />
            <GridListTileBar
              title={tile.title}
              subtitle={<span>by: {tile.author}</span>}
            />
          </GridListTile>
        ))}
      </GridList>
    </div>
  );
}

export default TitlebarGridList;
src/components/tileData.ts
import neko1 from '../img/neko1.jpg';
import neko2 from '../img/neko2.jpg';
import neko3 from '../img/neko3.jpg';
import neko4 from '../img/neko4.jpg';
import neko5 from '../img/neko5.jpg';

const tileData = [
    {
      img: neko1,
      title: 'お顔',
      author: 'yotsak',
    },
    {
      img: neko2,
      title: '眠い',
      author: 'yotsak',
    },
    {
      img: neko3,
      title: '恥ずかしい',
      author: 'yotsak',
    },
    {
      img: neko4,
      title: '細目',
      author: 'yotsak',
    },
    {
      img: neko5,
      title: 'はまり',
      author: 'yotsak',
    },
];

export default tileData;
src/App.tsx
import React from 'react';
import GridList from './components/GridList';

function App() {
  return (
    <div>
      <GridList />
    </div>
  );
}

export default App;

画面イメージ

ヨシ！