【React】Mantineライブラリでコンポーネントの配置を編集する。

前回の記事まではMantineで用意したコンポーネントの装飾について説明をしました。

【React】一括で装飾を整えるMantine Providerの使い方

コンポーネントの見た目の変更方法については基本的な方法がある程度理解できたかと思います。

しかし、これだけだとコンポーネントの配置は調整することができないので、今回は配置の調整方法について説明します。

今回の内容はMantineというよりはほとんどがCSSっぽい内容になりますので、CSSのドキュメント参考にしながら記事を読んでいただければと思います。

https://developer.mozilla.org/ja/　（CSSドキュメント）

今回紹介するライブラリと導入

今回は以下の3つのライブラリをご紹介します。

• Center
• Flex
• Grid

まずはこれらを使用するためにimportが必要なので、import {Center, Flex, Grid} from mantine/coreを記述しましょう。

前回の記事から作成されている方は既にMantineProviderがimportされているので
import {MantineProvider, Center, Container, Flex, Grid} from mantine/core
と書き換えてください。

それでは1つずつ使い方を解説していきます。

単一のコンポーネントを配置する場合はCenterを使う

単一のコンポーネントを配置する場合は最も簡単なCenterを使うことをお勧めします。

Centerは配置する縦と横の座標を数字で指定するだけなのでとても簡単に使用することができます。

使い方は配置したいコンポーネントを<Center> タグで挟んで、タグの中に座票を記述するだけです。

以下が一例です。

<Center style={{ width: 400, height: 200 }}>
　　<DemoButton></DemoButton>
</Center>

style={{ width: 400, height:200 }}　の部分が座標です。

widthの数値が横、heightの数値が縦を表しています。

実際にこの数値を変更させてローカルホストにアクセスし配置がどのように変更されているかを確認してみてください。

複数のコンポーネントを配置する場合はFlexがおすすめ

次にFlexをご紹介します。

Flexを使うと複数のコンポーネントの配置を一括で行うことができます。

例えば複数のボタンを配置する際に等間隔で配置するができたり、配置の順番をコントロールすることができます。

使用方法は<Flex>タグで複数のコンポーネントを挟み、タグの中に設定したい項目を記述します。

<Flex 
      mih={50}
      bg="rgba(0, 0, 0, .3)"
      gap="md"
      justify="flex-start"
      align="flex-start"
      direction="row"
      wrap="wrap"
>
　<DemoButton></DemoButton>
　<DemoButton></DemoButton>
　<DemoButton></DemoButton>
</Flex>

設定項目は以下のとおりです。

mih

Flexでコンポーネントを配置する領域の高さを数値で指定することができます。

bg

Flexでコンポーネントを配置する領域の背景色を指定できます。
赤緑青の3色と明るさを数値で指定します。

gap

各コンポーネント間の余白を設定することができます。

使用できるパラメータは以下の5つです。
余白の小さいものから順に並べています。

• xs
• sm
• md
• lg
• xl

justify

各コンポーネントを画面の左、中央、右のどこに配置するかを指定します。

• Flex-start 　左詰め
• Center 　中央
• Flex-end　右詰め

Align

各コンポーネントを画面の上部、中央、下部のどこに配置するかを指定します。

• Flex-start 　上部
• Center 　中央
• Flex-end　下部

direction

コンポーネントを横方向に並べるか縦方向に並べるかを指定します。
また、並べる順番を逆転させることもできます。

• Row 　左から右へ横並べ
• Column 　上から下へ縦並べ
• Row-reverse 　右から左へ横並べ
• Column-reverse　　下から上へ縦並べ

wrap

複数のコンポーネントを配置することで画面の領域から飛び出した場合に折り返して表示するか、折り返さずにスクロールして表示するかを指定します。

• nowrap 　折り返さずに各コンポーネント一列に並びます。
• wrap 　画面の領域を超えた際に折り返して複数行で表示されます。
• wrap-reverse　コンポーネントの表示順を逆転させて、画面の領域を超えた際に折り返して複数行で表示されます。

以上である程度は配置を自由に変更できるかと思います。

Flexのパラメータは少し数が多いので、

一つづつ変更して、どのように配置が変わるのかを試してみてください。

コンポーネントを配置する領域のサイズと配置を決めるGrid

最後にコンポーネントの配置する領域を細かく調整するためのGridを紹介します。

大雑把に説明するとGridを使ってグループ分けをすることができます。

GridはGrid.Colというタグと合わせて使用します。

GridとGrid.col

まず、<Grid>タグを用意してその中に領域を示す<Grid.Col>タグを設置します。
今回は例として<Grid.Col>タグを3つ用意します。

<Grid>
 <Grid.Col></Grid.Col>
 <Grid.Col></Grid.Col>
 <Grid.Col></Grid.Col>
</Grid>

<Grid.Col>タグで挟まれたコンポーネントはその領域内に納められます。

以下の記述の場合、一つ目の領域にボタンが一つ追加されます。

<Grid>
 <Grid.Col>
　<DemoButton></DemoButton>
 </Grid.Col>
 <Grid.Col></Grid.Col>
 <Grid.Col></Grid.Col>
</Grid>

先ほど説明したFlexをGrid.Colで挟むことで領域内でのコンポーネントの配置を調整することができます。

span

次にGrid.Colにspanを設定します。

spanは各領域の横幅の占有量を意味しており、デフォルトで横幅の最大値は12になっています。

3つの領域を均等に配置するには全てのGrid.Colにspan={4}と設定します。

<Grid>
 <Grid.Col span={4}></Grid.Col>
 <Grid.Col span={4}></Grid.Col>
 <Grid.Col span={4}></Grid.Col>
</Grid>

spanの数字を変更して領域のサイズを変更することも可能です。

例えば、

<Grid>
 <Grid.Col span={6}></Grid.Col>
 <Grid.Col span={3}></Grid.Col>
 <Grid.Col span={3}></Grid.Col>
</Grid>

とすることで、一番左の領域は画面の左から画面中央までの半分を占拠し、残りの右半分を二つの領域で半分ずつ使用することになります。

また、spanの合計値が12を超えた場合は領域が上下に別れ表示されます。

gutter

各領域間の余白については、<Grid>タグ内にgutterというパラメータを設定します。

<Grid gutter="xl">
 <Grid.Col span={6}></Grid.Col>
 <Grid.Col span={3}></Grid.Col>
 <Grid.Col span={}></Grid.Col>
</Grid>

gutterに使用できる数値は以下の5つで、余白の少ないものから順に並べています。

• xs
• sm
• md
• lg
• xl

この他の領域の細かい調整についてもほとんどの場合、<Grid>タグもしくは<Grid.Col>タグ内にパラメータを記述することで可能です。

パラメータについてはMantineの公式ドキュメントに説明がありますので、そちらを参照してください。
https://mantine.dev/core/grid/　（Mantine　公式ドキュメント Grid）

まとめ

コンポーネントの配置を調整するために、ライブラリであるCenter、Flex、Gridを使用する。
Centerは単一のコンポーネントの配置を縦と横の値だけで調整することができる。
Flexは複数のコンポーネントの調整をすることができる。
Gridは画面内を複数の領域に分けて、その領域のサイズや配置を調整することができる。