Web開発で意外と難しい横並び
Web開発をしていると度々直面する横並びデザイン。Reactでも最終的に吐き出されるのはhtmlであるため、floatやpositionを使うパターンは多いのではないでしょうか。
今回はReactのMaterial-UIを使って横並びを実現する方法を紹介します。
Material-UIのGridを使う
Material-UIにはGridコンポーネントがあり、htmlのtableをよりUIとして実現しやすいように作られています。
Gridは格子が12個あるイメージで合計12分割できます。どのように分割するかをxsプロパティに記述していきます。
<Grid container>
<Grid item xs={2}>値1</Grid>
<Grid item xs={4}>値2</Grid>
<Grid item xs={4}>値3</Grid>
<Grid item xs={2}>値4</Grid>
</Grid>
Material-UIのStackを使う
Stackは縦、または横に要素を並べられるコンポーネントです。横並びにするにはStackのプロパティに「direction="row"」を記述します。
<Stack direction="row">
<Item>値1</Item>
<Item>値2</Item>
<Item>値3</Item>
</Stack>
