import { Stack } from "@chakra-ui/react"
import { DecorativeBox } from "compositions/lib/decorative-box"
const Demo = () => {
return (
<Stack>
<DecorativeBox h="20" />
<DecorativeBox h="20" />
<DecorativeBox h="20" />
</Stack>
)
}
用法
默认情况下，Stack 将flex-direction: column 和 gap: 8px 应用于其子元素。
import { HStack, Stack, VStack } from "@chakra-ui/react"<Stack>
<div />
<div />
</Stack>示例
水平堆叠
使用 direction prop 更改堆叠方向。
import { Stack } from "@chakra-ui/react"
import { DecorativeBox } from "compositions/lib/decorative-box"
const Demo = () => {
return (
<Stack direction="row" h="20">
<DecorativeBox />
<DecorativeBox />
<DecorativeBox />
</Stack>
)
}
HStack
或者，您可以使用 HStack 创建水平堆叠并水平对齐其子元素。
import { HStack } from "@chakra-ui/react"
import { DecorativeBox } from "compositions/lib/decorative-box"
const Demo = () => {
return (
<HStack>
<DecorativeBox h="10" />
<DecorativeBox h="5" />
<DecorativeBox h="20" />
</HStack>
)
}
VStack
使用 VStack 创建垂直堆叠并垂直对齐其子元素。
import { VStack } from "@chakra-ui/react"
import { DecorativeBox } from "compositions/lib/decorative-box"
const Demo = () => {
return (
<VStack>
<DecorativeBox w="50%" h="20" />
<DecorativeBox w="25%" h="20" />
<DecorativeBox w="100%" h="20" />
</VStack>
)
}
分隔符
使用 separator prop 在堆叠项之间添加分隔符。
import { Stack, StackSeparator } from "@chakra-ui/react"
import { DecorativeBox } from "compositions/lib/decorative-box"
const Demo = () => {
return (
<Stack separator={<StackSeparator />}>
<DecorativeBox h="20" />
<DecorativeBox h="20" />
<DecorativeBox h="20" />
</Stack>
)
}
响应式方向
使用 direction prop 响应式地更改堆叠方向。
import { Stack } from "@chakra-ui/react"
import { DecorativeBox } from "compositions/lib/decorative-box"
const Demo = () => {
return (
<Stack direction={{ base: "column", md: "row" }} gap="10">
<DecorativeBox boxSize="20" />
<DecorativeBox boxSize="20" />
<DecorativeBox boxSize="20" />
</Stack>
)
}