Chapter 17無料公開

Stackをどんどん使おう(リストレイアウト編)

terrierscript
terrierscript
2021.05.07に更新
このチャプターの目次

Chakra UIにおいて頻出に利用するのは<Box>になります。
ただ、<Box>を使うより、他のコンポーネントを使ったほうが手早く綺麗に組める事が多いです。

<Flex><Grid>など、よりCSSの実装に近いものもありますが、<Stack> (<VStack>/<HStack>)を利用すると手早く綺麗に並べる事がしやすいです。

リスト表示

まずわかりやすいのはリスト表示です。

<Box>
  {sampleText.map(item => <Box bg="red.50" p={2}>{item}</Box>)}
</Box>
<Stack>
  {sampleText.map(item => <Box bg="red.50" p={2}>{item}</Box>)}
</Stack>

Stackにはデフォルトで最低限のGapを設定してくれるので、あれこれ考える必要がなくなります。

capture

もしGridやFlexで行うのであれば下記のような形で類似を再現出来るでしょう

<Grid gap={2}>
 {sampleText.map(item => <Box bg="red.50" p={2}>{item}</Box>)}
</Grid>

<Flex direction="column" gridGap={2}>
  {sampleText.map(item => <Box bg="red.50" p={2}>{item}</Box>)}
</Flex>