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>
)
}
用法
¥Usage
默认情况下，Stack 将 flex-direction: column 和 gap: 8px 应用于其子项。
¥By default, Stack applies flex-direction: column and gap: 8px to its
children.
import { HStack, Stack, VStack } from "@chakra-ui/react"<Stack>
<div />
<div />
</Stack>示例
¥Examples
水平
¥Horizontal
使用 direction 属性更改堆栈的方向。
¥Use the direction prop to change the direction of the stack.
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 属性创建水平堆栈并水平对齐其子项。
¥Alternatively, you can use the HStack to create a horizontal stack and align
its children horizontally.
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 创建垂直堆栈并垂直对齐其子元素。
¥Use the VStack to create a vertical stack and align its children vertically.
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
使用 separator 属性在堆叠项目之间添加分隔符。
¥Use the separator prop to add a separator between the stack items.
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>
)
}
响应式方向
¥Responsive Direction
使用 direction 属性响应式地更改堆栈的方向。
¥Use the direction prop to change the direction of the stack responsively.
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>
)
}