import { Badge, Wrap } from "@chakra-ui/react"
export const WrapBasic = () => (
<Wrap>
<Badge>Badge 1</Badge>
<Badge>Badge 2</Badge>
<Badge>Badge 3</Badge>
</Wrap>
)
用法
¥Usage
默认情况下，Wrap 将 display: flex、flex-wrap: wrap 和 gap: 8px 应用于其子项。
¥By default, Wrap applies display: flex, flex-wrap: wrap, and gap: 8px to
its children.
import { Wrap, WrapItem } from "@chakra-ui/react"<Wrap>
<div />
<div />
</Wrap>示例
¥Examples
间隙或间距
¥Gap or Spacing
传递 gap 属性，即使子组件换行，也能在每个子组件之间应用一致的间距。
¥Pass the gap prop to apply a consistent spacing between each child, even if it
wraps.
import { Wrap } from "@chakra-ui/react"
import { DecorativeBox } from "compositions/lib/decorative-box"
export const WrapWithGap = () => (
<Wrap gap="5">
{Array.from({ length: 10 }).map((_, index) => (
<DecorativeBox key={index} h="12" w="12" />
))}
</Wrap>
)
对齐
¥Alignment
传递 align 属性以更改子组件沿横轴的对齐方式。
¥Pass the align prop to change the alignment of the child along the cross axis.
import { Center, Wrap, WrapItem } from "@chakra-ui/react"
export const WrapWithAlign = () => (
<Wrap gap="30px" align="center">
{Array.from({ length: 5 }).map((_, index) => (
<WrapItem key={index}>
<Center w="180px" h="80px" bg="red.muted">
Box {index + 1}
</Center>
</WrapItem>
))}
</Wrap>
)
对齐
¥Justify
传递 justify 属性以更改子组件沿主轴的对齐方式。
¥Pass the justify prop to change the alignment of the child along the main
axis.
import { Center, Wrap, WrapItem } from "@chakra-ui/react"
export const WrapWithJustify = () => (
<Wrap gap="30px" justify="center">
{Array.from({ length: 5 }).map((_, index) => (
<WrapItem key={index}>
<Center w="180px" h="80px" bg="red.muted">
Box {index + 1}
</Center>
</WrapItem>
))}
</Wrap>
)
行列间距
¥Row and Column Gap
传递 rowGap 和 columnGap 属性，以在行和列之间应用一致的间距。
¥Pass the rowGap and columnGap props to apply a consistent spacing between
the rows and columns.
import { Wrap } from "@chakra-ui/react"
import { DecorativeBox } from "compositions/lib/decorative-box"
export const WrapWithRowColumnGap = () => (
<Wrap rowGap={["0px", "24px"]} columnGap={["4px", "12px"]}>
{Array.from({ length: 10 }).map((_, index) => (
<DecorativeBox key={index} w="12" h="12" />
))}
</Wrap>
)
响应式
¥Responsive
对 gap、rowGap 和 columnGap 属性使用响应式值，以便在每个子项之间应用响应式间距。
¥Use responsive values for the gap, rowGap, and columnGap props to apply
responsive spacing between each child.
import { Wrap } from "@chakra-ui/react"
import { DecorativeBox } from "compositions/lib/decorative-box"
export const WrapResponsive = () => (
<Wrap gap={["12px", "24px"]} justify={["center", "flex-start"]}>
<DecorativeBox h="12" w="12" />
<DecorativeBox h="12" w="12" />
<DecorativeBox h="12" w="12" />
<DecorativeBox h="12" w="12" />
<DecorativeBox h="12" w="12" />
<DecorativeBox h="12" w="12" />
<DecorativeBox h="12" w="12" />
<DecorativeBox h="12" w="12" />
<DecorativeBox h="12" w="12" />
<DecorativeBox h="12" w="12" />
<DecorativeBox h="12" w="12" />
</Wrap>
)