はじめての Chakra UI - レイアウト編 -
Box
Box はデフォルトで div 要素をレンダリングし、他のすべての Chakra UI コンポーネントをその上に構築する最も抽象的なコンポーネント。
レスポンシブなレイアウトを簡単に作成し、props を介してスタイルを適用できる。
さらに、as プロパティで新しいコンポーネントを作ってオーバーライドできる。例えば、<Button as='a'> ではじまるコンポーネントでは、Button の props と a の props をすべて使用することができる (詳しくはこちら)。
- Link, next/link と組み合わせると良い例はこちら
Flex
Flex (参考)は display:flex つきの Box、すなわちその中の子要素を一方向に並べてくれる Box である。その際、子要素間の間隔を調整してくれる空のスペースが Spacer である。Flex だけで構成した場合と Spacer を使った場合の比較はこちら
Stack
要素をグループ化し、それらの間にスペースを適用するために使用する。
- VStack: 要素を垂直方向に積み重ねる
- HStack: 水平方向に要素を積み重ねる
- Stack: 縦方向または横方向に要素を積み重ねる
prop
- (Stack) direction： VStack、HStack、またはその組み合わせを指定する。
- spacing: 間隔を指定する。
- divider: 仕切りを追加する
Flex & Spacer と Stack (と Grid) の使い分け
- Flex & Spacer では、等間隔で幅いっぱいに広がる
- Sign Up と Log In ボタンを導入するときなど便利、
- HStack は等間隔だが、幅いっぱいには広がらない
- Grid は子要素の開始点は等間隔になるが、要素の幅が一定でない限りそれら同士の間隔は等しくない
Center
幅と高さを指定して、子要素を中央に配置する。子要素は、Square (正方形) もしくは Circle (円) の中に入れることもできる。AbsoluteCenter を用いると、親要素に対して 水平/垂直/その両方 の方向に相対的に中心を合わせられる。
Container
コンテンツの幅を制御する。デフォルトでは最大幅を 60文字 (60ch) だがユーザが指定することもでき、中のコンテンツの幅をコンテナの幅より小さくして中央寄せすることもできる。
Wrap
Wrapは、要素間にスペースを追加する。十分なスペースがない場合は自動的にラップ (改行) される。原理的には、Wrap は <ul> タグとしてレンダリングされた Box コンポーネントで、WrapItem は <li> タグとしてレンダリングされた Box コンポーネントである。
prop
- spacing: 要素間の感覚
- aligh: 配置方向と垂直方向の配置方法
- justify: 配置方向の配置方法
レスポンシブにするには
Discussion