概要
- 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;
画面イメージ
ヨシ!