この記事で学ぶ内容
- Stackについて
- 要素間の余白の幅の指定方法
1.「Stack」について
Stackとは
Stackとは、Chakra-UIに用意されているレイアウトコンポーネントの１つである。
Stackには、以下の3種類がある。
| VStack | 垂直方向に要素をスタックする |
|---|---|
| HStack | 水平方向に要素をスタックする |
| Stack | 垂直,水平方向の両方に要素をスタックする |
※詳細は公式ドキュメントを参照。
Stackの使い方
ソースコード
<VStack>
<Box bgColor="#fff0f0">Stack1</Box>
<Box bgColor="#fff0f0">Stack2</Box>
<Box bgColor="#fff0f0">Stack3</Box>
</VStack>
表示結果
marginやpaddingを使用しなくても、デフォルトで要素間に8pxの余白が作られる。
2.要素間の余白の幅を指定する
spacingを使い、要素間の余白を指定する
ソースコード
<VStack spacing="20px">
<Box bgColor="#fff0f0">Stack1</Box>
<Box bgColor="#fff0f0">Stack2</Box>
<Box bgColor="#fff0f0">Stack3</Box>
</VStack>
表示結果
marginやpaddingを使い、要素間の余白を指定する
基本的にはspacingを使うとよいが、Boxと同様にmarginやpaddingを使うこともできる。
ソースコード
<VStack>
<Box bgColor="#fff0f0" marginBottom="20px">Stack1</Box>
<Box bgColor="#fff0f0" marginBottom="20px">Stack2</Box>
<Box bgColor="#fff0f0" >Stack3</Box>
</VStack>
表示結果
オレンジ色の部分は、marginを使って指定した20pxである。
実際の余白＝「marginやpaddingで指定した値＋デフォルトの8px」になるため、調整がややこしくなる。
3.「Box」と「Stack」の比較する
ここでは、Box(divのようなもの)を使用した場合とVStackを使用した場合を比較する。
※Boxについての詳細は公式ドキュメントを参照。
Boxで要素を囲む
ソースコード
<Box>
<Box bgColor="#fff0f0" marginBottom="20px">Box1</Box>
<Box bgColor="#fff0f0" marginBottom="20px">Box2</Box>
<Box bgColor="#fff0f0" >Box3</Box>
</Box>
Stackで要素を囲む
ソースコード
<VStack spacing="20px">
<Box bgColor="#fff0f0">Stack1</Box>
<Box bgColor="#fff0f0">Stack2</Box>
<Box bgColor="#fff0f0">Stack3</Box>
</VStack>
表示結果
BoxでもStack同様に要素間の余白を指定することはもちろん可能である。
しかし、Boxで要素間の余白を指定しようとすると、余白の数だけmarginを記述しなければならない。
そのため、Stackとspacingを使うよりソースコードの記述量が増えてしまう。
まとめ
- Stackを使用すると、デフォルトで余白が付くため簡単に見やすいレイアウトになる。
- 余白を指定したければ、marginやpaddingを使うよりspacingを使うほうがよい。