Material UI学習時のメモ書き
Gridシステム
bootstrapを使用するときも同じだが、まずは基本のGridシステムの使い方を最初に知る必要がある。
Gridは親Gridでcontainerを書き、その内側の子Gridでitemを定義する。
boostrapでいう、div class='container'とdiv class='row'と同じ関係。
<Grid container spacing={2}>> <Grid item xs={6} md={8}> <Item>xs=6 md=8</Item> </Grid> <Grid item xs={6} md={4}> <Item>xs=6 md=4</Item> </Grid> <Grid item xs={6} md={4}> <Item>xs=6 md=4</Item> </Grid> <Grid item xs={6} md={8}> <Item>xs=6 md=8</Item> </Grid> </Grid>
レスポンシブデザインは、boostrapと同じように、breakpointがあり内容は以下。
xs, extra-small: 0px
sm, small: 600px
md, medium: 900px
lg, large: 1200px
xl, extra-large: 1536px
Breakpoints - Material UI
モバイルベースのxsベースで考えて、必要に応じてmdやlgを使う。
Auto-layoutという機能もあり、12の数値を全て、各rowに割り振るのではなく、
その一部に当てはめればあとは、使用可能ならスペースに応じて、均等に割り振ったwidthでレイアウトしてくれる。
<Grid container spacing={3}> <Grid item xs> <Item>xs</Item> </Grid> <Grid item xs={6}> <Item>xs=6</Item> </Grid> <Grid item xs> <Item>xs</Item> </Grid> </Grid>
Grid container(親Grid)でよく使用する属性
direction
子Gridの並び順を定義できる。rowで横並び、columnで縦並び
<Grid container direction="row">
justifyContent
親Gridをメイン軸とし、子Gridを横軸のどの位置に配置するかを指定する
【CSS】justify-content使い方、アイテムの配置する位置を指定する | SHU BLOG
<Grid container justifyContent="flex-start"> // 先頭寄せ <Grid container justifyContent="center"> // 中央寄せ <Grid container justifyContent="flex-end"> // 末尾寄せ
alignItems
親Gridをメイン軸とし、子Gridを縦軸のどの位置に配置するかを指定する
【CSS】align-itemsの使い方、配置する方向を指定する! | SHU BLOG
<Grid container alignItems="flex-start"> // 上部寄せ <Grid container alignItems="center"> // 中央寄せ <Grid container alignItems="flex-end"> // 下部寄せ
spacing
子Grid間のスペースを設定できる。小数点を含めた正の数を指定できる。
またv5からspacingを含めた全てのproprsでレスポンシブ値をサポート
<Grid container spacing={{ xs: 2, md: 3 }} />
rowSpacingとcolumnSpacing
rowSpacing(縦)とcolumnSpacing(横)の間隔をサポート
<Grid container rowSpacing={1} columnSpacing={{ xs: 1, sm: 2, md: 3 }}>
columns
デフォルトのカラム数である12を変更することができる。
細かいレイアウト表現が必要な時に便利そう。
<Grid container spacing={2} columns={16}> <Grid item xs={8}> <Item>xs=8</Item> </Grid> <Grid item xs={8}> <Item>xs=8</Item> </Grid> </Grid>
